Question

자바스크립트 선언문 var let const 호이스팅 스코프 에 대해서 자세히 설명해 주세요.

Answer 1

JavaScript에서 변수 선언에 사용되는 var, let, const는 각기 다른 특성과 동작 방식을 갖습니다. 특히 호이스팅과 스코프와 관련된 차이점이 있습니다. 이를 자세히 설명해 볼게요:

1. 변수 선언 방식

• var: ES5 이전에 변수를 선언할 때 사용되던 방식입니다.
• let: ES6(ECMAScript 2015)에서 도입된 새로운 변수 선언 방식으로, var의 단점을 보완합니다.
• const: let과 함께 도입된 변수 선언 방식으로, 재할당이 불가능한 상수를 선언할 때 사용합니다.

2. 호이스팅 (Hoisting)

호이스팅은 자바스크립트의 특징으로, 변수 선언과 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 것을 의미합니다. 하지만 선언만 끌어올려지고, 초기화는 원래 위치에서 이루어집니다.

• var의 호이스팅:

  • var로 선언된 변수는 선언 자체가 호이스팅됩니다. 즉, 코드 상에서 변수를 선언하기 전에 접근할 수 있지만, 초기화되지 않은 상태이므로 undefined 값을 가집니다.
  • 예시:

    console.log(a); // undefined (호이스팅에 의해 선언은 되었으나 초기화되지 않음)
    var a = 5;
    console.log(a); // 5
    

• let과 const의 호이스팅:

  • let과 const도 선언은 호이스팅되지만, "일시적 사각지대(TDZ, Temporal Dead Zone)"에 놓이게 됩니다. 이 구간에서는 변수가 선언되기 전까지 참조할 수 없습니다.

  • 예시:

    console.log(b); // ReferenceError: Cannot access 'b' before initialization
    let b = 5;
    
    console.log(c); // ReferenceError: Cannot access 'c' before initialization
    const c = 10;
    

• let과 const는 선언 전에 접근할 수 없어 예측 가능한 코드를 작성하는 데 도움을 줍니다. 따라서 일반적으로 var보다 let이나 const를 사용하도록 권장됩니다.

3. 스코프 (Scope)

스코프는 변수가 유효하게 사용할 수 있는 코드의 영역을 뜻합니다. 자바스크립트에서는 크게 전역 스코프, 함수 스코프, 블록 스코프로 나눌 수 있습니다.

• var의 스코프 (함수 스코프):

  • var는 함수 스코프를 가집니다. 즉, var로 선언된 변수는 가장 가까운 함수 내에서만 유효하며, 블록 {} 안에서 선언하더라도 함수 스코프에 속하게 됩니다.
  • 예시:

    function test() {
      if (true) {
        var a = 5;
      }
      console.log(a); // 5 (블록 스코프를 무시하고 함수 스코프를 가짐)
    }
    test();
    

• let과 const의 스코프 (블록 스코프):

  • let과 const는 블록 스코프를 가집니다. 즉, {}로 감싸진 코드 블록 안에서만 유효하며, 블록 밖에서는 접근할 수 없습니다.
  • 예시:

    function test() {
      if (true) {
        let b = 5;
        const c = 10;
      }
      console.log(b); // ReferenceError: b is not defined
      console.log(c); // ReferenceError: c is not defined
    }
    test();
    

• 블록 스코프 덕분에 let과 const는 변수를 보다 세밀하게 제어할 수 있어, var보다 예측 가능한 코드를 작성하는 데 유리합니다.

4. 재할당 및 재선언

• var:

  • 재할당과 재선언이 모두 가능합니다.
  • 예시:

    var x = 1;
    var x = 2; // 재선언 가능
    x = 3; // 재할당 가능
    console.log(x); // 3
    

• let:

  • 재할당은 가능하지만, 같은 스코프 내에서 재선언은 불가능합니다.
  • 예시:

    let y = 1;
    y = 2; // 재할당 가능
    let y = 3; // SyntaxError: Identifier 'y' has already been declared
    

• const:

  • 재선언과 재할당 모두 불가능합니다. 선언 시 반드시 초기화해야 하며, 이후 값을 변경할 수 없습니다.

  • 예시:

    const z = 1;
    z = 2; // TypeError: Assignment to constant variable
    

  • 다만, const로 선언된 객체나 배열의 경우 참조값을 변경하지 않는 한 객체의 속성이나 배열의 요소는 수정할 수 있습니다.

  • 예시:

    const obj = { key: 1 };
    obj.key = 2; // 객체의 속성 값은 변경 가능
    console.log(obj); // { key: 2 }
    

5. 정리 및 사용 시 주의점

• var: 호이스팅과 함수 스코프 때문에 예기치 않은 동작을 유발할 수 있어 사용을 지양하는 것이 좋습니다.
• let: 블록 스코프를 가지며, 재할당이 필요할 때 유용합니다. 반복문에서 루프 변수를 선언할 때 많이 사용됩니다.
• const: 상수 값을 선언하거나, 객체나 배열 참조를 고정할 때 사용됩니다. 기본적으로 const를 사용하고, 필요 시 let으로 선언하는 것이 좋은 관례입니다.

위 설명을 바탕으로 var, let, const의 차이점과 호이스팅, 스코프에 대해 더 깊이 이해할 수 있을 것입니다. 필요에 따라 적절한 선언 방식을 선택해 코드를 작성하면 보다 안정적이고 예측 가능한 코드를 작성할 수 있습니다.