JavaScript 스코프 이해하기

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

이 글을 통해 JavaScript의 스코프에 대해 이해하고 예제를 통해 확인해보자.

 

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

 

조건문 내 블록 스코프

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

 

반복문 내 블록 스코프

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

 

중첩 블록 스코프

{
  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
}

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

 

JavaScript 스코프는 변수의 가시성과 생명 주기를 제어하는 핵심 개념입니다. 

코드를 작성할 때 스코프를 이해하고 올바르게 사용하는 것은 버그를 줄이고 코드의 효율성을 높이는 데 큰 도움이 됩니다. 이 글을 통해 블록 스코프와 함수 스코프에 대한 이해를 높이셨길 바랍니다.