[JavaScript]스코프(Scope)

스코프(Scope)

JavaScript에서 스코프(Scope)는 변수의 가용성(변수를 사용할 수 있는지)을 관리하는 중요한 개념입니다. 

 

JavaScript에서 사용되는 변수 또는 함수는 선언되는 위치에 따라 다르게 동작하므로 스코프에 대해 구체적으로 이해할 필요가 있습니다.

[JavaScript]함수 호이스팅(Function Hoisting)

[JavaScript]변수 선언과 호이스팅(Hoisting)

다음 예제는 변수가 선언된 위치와 사용되는 위치가 동일한 범위에 존재하므로 정상적으로 실행됩니다.

const msg = 'Hi';
console.log(msg); // Hi

다음 예제는 변수 msg를 if문 내부에 선언합니다.

if(true) {
  const msg = 'Hi';
}
console.log(msg);

[에러 내용]

이번에는 변수를 사용할 때, ReferenceError가 발생합니다. 변수 msg는 if문은 의 코드 블록( { } ) 내부에 선언되었습니다. 따라서, 변수 msg는 if문 내부에서만 접근할 수 있습니다.

 

즉, JavaScript에서 스코프(Scope)는 변수의 접근성을 관리하는 개념이며, 변수 또는 함수가 선언된 위치에 따라 전역 스코프(Global Scope)와 로컬 스코프(Local Scope)로 분류됩니다.

---

스코프 중첩

스코프는 중첩될 수 있습니다. 즉, 스코프 내부에 스코프가 있고 계속해서 중첩될 수 있다는 의미입니다.

 

다음 예제는 함수의 스코프를 생성하고 함수 내부에 if문을 작성하여 또 다른 스코프를 생성합니다.

function show() {
  const msg = 'Hello!';
  if (true) {
    const str = 'String Value';
    console.log(msg); // Hello!
  }
  console.log(str); // ReferenceError 발생
}

show();

[실행 결과]

show() 함수 스코프 내부에는 if문 스코프가 존재하므로 if문 스코프는 내부 스코프(inner scope)라고 말하며, show() 함수 스코프는 if문 스코프를 감싸므로 외부 스코프(outer scope)라고 말합니다. 

위 예제를 통해 확인할 수 있는 내용은 외부 스코프에 선언된 변수는 내부 스코프에서 접근할 수 있으며, 내부 스코프에 선언된 변수는 외부 스코프에서 접근할 수 없다는 것입니다.

---

글로벌 스코프(Global Scope)

프로그램의 상단이나 함수 외부에 선언된 변수는 글로벌 스코프에 존재합니다. 글로벌 스코프에 존재하는 변수는 어디에서나 접근할 수 있습니다.

 

다음 예제는 글로벌 스코프에 존재하는 변수를 접근합니다.

const msg = '글로벌 스코프에 존재하는 변수를 호출';

function show() {
  console.log(msg);
  if (true) {
    console.log(msg);
  }
  console.log(msg);
}

show();

[실행 결과]

글로벌 스코프에 존재하는 변수를 호출
글로벌 스코프에 존재하는 변수를 호출
글로벌 스코프에 존재하는 변수를 호출

변수 msg는 프로그램 상단에 선언되었기 때문에 전역 변수입니다. 위에서 설명했듯이 글로벌 스코프에 존재하는 변수는 어디에서나 접근할 수 있으므로 show() 함수의 스코프에서도 접근할 수 있으며, show() 함수의 내부 스코프에서도 접근할 수 있습니다.

 

그리고 JavaScript에서는 변수를 선언하지 않고 사용할 수도 있으며, 해당 변수는 자동으로 전역 변수가 됩니다.

function show() {
  msg = '전역 변수다';
  console.log(msg);
  if (true) {
    console.log(msg);
  }
  console.log(msg);
}

show();

[실행 결과]

전역 변수다
전역 변수다
전역 변수다

---

로컬 스코프(Local Scope)

로컬 스코프에는 코드 블록 내부에 정의된 항목이 포함됩니다. 지역 변수는 변수가 선언된 스코프 그리고 해당 스코프의 내부 스코프에서만 접근할 수 있습니다.

 

다음은 로컬 스코프 예제입니다.

let a = 'hello';

function show() {
  let b = ' World';
  console.log(a + b);
}

show();
console.log(a + b);

[실행 결과]

변수 a는 전역 변수이므로 모든 스코프에서 접근할 수 있으며, 변수 b는 show() 함수 내부에서 선언되었으므로 show() 함수 내부에서만 접근할 수 있습니다.

 

따라서, show() 함수 외부에서 변수 b를 접근하면 ReferenceError가 발생합니다.

---

정리

• 스코프는 변수의 접근성을 관리하는 개념입니다.
• 스코프는 전역 스코프와 로컬 스코프 두 가지 유형으로 분류됩니다.