JavaScript 스코프 이해해보기

JavaScript에서 스코프(scope)는 변수의 가시성과 생명 주기를 관리하는 중요한 개념중 하나이다,.

그러한 스코프에 대해 간단한 예제 코드들을 통해 이를 쉽게 이해해보자

 

JavaScript 스코프란?

JavaScript에서 스코프는 변수가 정의되고 사용되는 영역이다.

변수가 어디에서 참조될 수 있는지를 결정하는 역할을 하며 아래에 다음과 같은 스코프들이 존재한다.

1. 블록 스코프(Block Scope)
- 블록 스코프는 중괄호({})로 둘러싸인 코드 블록 내에서 변수가 정의되고 사용된다.

- let과 const 키워드를 사용하여 블록 스코프 변수를 생성할 수 있다.

- 블록 스코프에서 정의된 변수는 해당 블록 및 하위 블록에서만 접근할 수 있다.

 

{
  let blockScopedVar = 'I am block scoped!';
  console.log(blockScopedVar); // 'I am block scoped!'
}

console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

 

 

2. 함수 스코프(Function Scope)
- 함수 스코프는 함수 내에서 변수가 정의되고 사용된다.

- var 키워드를 사용하여 함수 스코프 변수를 생성할 수 있다.

- 함수 스코프에서 정의된 변수는 해당 함수 내부에서만 접근할 수 있다.

 

function functionScoped() {
  var functionScopedVar = 'I am function scoped!';
  console.log(functionScopedVar); // 'I am function scoped!'
}

functionScoped();
console.log(functionScopedVar); // ReferenceError: functionScopedVar is not defined

 

 

3. 전역 스코프(Global Scope)
- 전역 스코프는 전체 프로그램에서 변수에 접근할 수 있는 영역이다.

- 전역 변수는 어떤 함수 내에서도 참조할 수 있다.

 

let globalVar = 'I am a global variable!';

function accessGlobalVar() {
  console.log(globalVar); // 'I am a global variable!'
}

accessGlobalVar();
console.log(globalVar); // 'I am a global variable!'

 

 

4. 조건문 내의 블록 스코프
- 조건문 내에서 let 또는 const 키워드를 사용하여 변수를 정의하면 해당 조건문 블록 내에서만 변수가 유효하다

if (true) {
  let blockScopedVar = 'I am block scoped within an if statement!';
  console.log(blockScopedVar); // 'I am block scoped within an if statement!'
}

console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

 

 

5. 반복문 내의 블록 스코프
- 반복문 내에서 let 또는 const 키워드를 사용하여 변수를 정의하면 해당 반복문 블록 내에서만 변수가 유효하다.

 

for (let i = 0; i < 3; i++) {
  let blockScopedVar = 'I am block scoped within a loop!';
  console.log(blockScopedVar); // 'I am block scoped within a loop!' 출력됩니다 (3번 반복)
}

console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

 

 

6. 중첩된 블록 스코프
- 블록 스코프는 중첩될 수 있으며, 내부 블록에서 외부 블록의 변수에 접근할 수 있다.

- 하지만 반대의 경우(외부 블록에서 내부 블록의 변수에 접근)는 불가능하다.

{
  let outerVar = 'I am in the outer block!';

  {
    let innerVar = 'I am in the inner block!';
    console.log(outerVar); // 'I am in the outer block!'
  }

  console.log(innerVar); // ReferenceError: innerVar is not defined
}