블록 레벨의 유효 범위(Scope)에 대하여

const는 블록 레벨 스코프이고, 재할당이 안된다.
하지만 아래와 같이 하위 블록에서 동일한 이름으로 선언하고, 값을 할당할 수 있다.

Case 1 : 상위 블록과 하위 블록에 동일한 이름의 변수가 선언된 경우

function try1() {
  const a = "cocoa";

  console.log("[try1] before", a); // cocoa
  
  if (true) {
    console.log("[if] before", a); // undefined
    const a = "leaf";
    console.log("[if] after", a); // leaf
  }
  
  console.log("[try1] after", a); // cocoa
}

try1();

그리고 그 블록에서는 상위 블록의 동일한 이름을 가진 변수는 참조할 수 없다.

 

(당연한 얘기이지만, 하위 블록 안에서 동일한 이름으로 선언한 변수가 없으면 상위 블록의 변수를 참조한다)

Case 2: 상위 블록의 변수를 하위 블록에서 참조하는 경우

function try2() {
  const a = "cocoa";

  console.log("[try1] before", a); // cocoa
  
  if (true) {
    console.log("[if] before", a); // cocoa
    const aa = "leaf"
    console.log("[if] after", aa); // leaf
  }
  
}

try2();

 

예제는 const를 다루었지만 같은 블록 레벨 스코프인 let도 동일하다. 

가급적이면 같은 이름의 변수는 사용하지 않는 것이 좋다. 히스토리가 오래되거나 관련된 사람이 많을 수록 헷갈리고 문제가 발생할 수 있기 때문이다.