[Javascript] 블록 레벨 스코프 (let, const) 와 함수 레벨 스코프(var) 의 차이점과 예시 코드

var 키워드

 JavaScript에서 변수를 선언하는 데 사용되며, 다음과 같은 단점이 있습니다:

함수 스코프: var로 선언된 변수는 함수 스코프를 갖습니다.

이는 변수가 선언된 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없습니다.

이로 인해 변수가 함수의 범위를 벗어날 경우 예상치 못한 결과가 발생할 수 있습니다.

호이스팅: var로 선언된 변수는 호이스팅(hoisting)이라고 불리는 동작을 합니다.

이는 변수 선언이 스코프의 맨 위로 끌어올려지는 것을 의미하며, 초기화 부분은 그 자리에 남게 됩니다.

이로 인해 변수를 선언하기 전에 사용하더라도 오류가 발생하지 않습니다.

중복 선언 허용: var로 선언된 변수는 같은 이름으로 여러 번 선언해도 오류가 발생하지 않고 이전 선언을 덮어씁니다.

블록 레벨 스코프 미지원: var 변수는 블록 레벨 스코프를 지원하지 않습니다.

이는 if, for, while 등의 블록 내에서 선언된 변수가 해당 블록 내에서만 유효하다는 의미입니다.

따라서 블록 스코프를 따르지 않으므로 변수가 블록 외부에서도 접근 가능하고 수정될 수 있습니다.

이러한 단점 때문에 ECMAScript 6 (ES6)에서는 let 및 const라는 새로운 변수 선언 키워드가 도입되었습니다.

 

 

let과 const는 var의 이러한 단점을 보완하고 블록 레벨 스코프를 지원합니다.

블록 레벨 스코프란 변수가 선언된 블록(일반적으로 중괄호 {}로 둘러싸인 부분) 내에서만 유효하고, 블록 외부에서는 접근할 수 없는 스코프를 의미합니다.

이는 코드의 가시성과 예측 가능성을 높이며, 변수의 범위를 블록 단위로 제한할 수 있습니다. ES6에서 도입된 let와 const 키워드는 이러한 블록 레벨 스코프를 지원하므로 코드의 신뢰성을 향상시킵니다.

 

 

블록 레벨 스코프 란 ? 

let과 const 키워드는 변수를 선언할 때 블록 레벨 스코프를 지원합니다. 이는 변수가 선언된 블록 내에서만 유효하고 블록 외부에서는 접근할 수 없음을 의미합니다. 아래의 코드 예제를 통해 let과 const의 블록 레벨 스코프를 보여드리겠습니다:

// 예제 1: let을 사용한 블록 레벨 스코프
function blockScopeExample() {
  if (true) {
    let x = 10; // 블록 스코프 내에서만 유효한 변수 x를 선언
    console.log(x); // 10 출력
  }

  // 블록 외부에서는 x에 접근할 수 없음
  // console.log(x); // ReferenceError: x is not defined
}

blockScopeExample();

// 예제 2: const를 사용한 블록 레벨 스코프
function blockScopeWithConst() {
  const y = 20; // 블록 스코프 내에서만 유효한 상수 y를 선언
  console.log(y); // 20 출력

  if (true) {
    // y = 30; // const로 선언한 변수는 재할당 불가능하므로 오류 발생
  }
}

blockScopeWithConst();

// 예제 3: 블록 내에 중첩된 블록 스코프
function nestedBlockScope() {
  let z = 5;

  if (true) {
    let z = 10; // 외부 블록의 z와 독립적인 새로운 z를 선언
    console.log(z); // 10 출력
  }

  console.log(z); // 외부 블록의 z는 변하지 않으므로 5 출력
}

nestedBlockScope();

위의 예제에서, let과 const로 선언된 변수들은 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없습니다. 이로써 변수의 범위를 블록 수준에서 제한할 수 있으며, 변수 재선언과 재할당을 피할 수 있습니다.

 

함수 레벨 스코프 란?

 

함수 레벨 스코프는 var 키워드를 사용하여 선언된 변수가 함수 내에서만 유효하고 함수 외부에서는 접근할 수 없는 스코프입니다. 아래의 예제를 통해 함수 레벨 스코프를 보여드리겠습니다:

function functionScopeExample() {
  var x = 10; // 함수 레벨 스코프 내에서만 유효한 변수 x를 선언

  if (true) {
    var y = 20; // 블록 내에서 선언한 변수 y도 함수 레벨 스코프 내에서 유효
    console.log(x); // 10 출력
    console.log(y); // 20 출력
  }

  console.log(x); // 10 출력 (함수 내에서 유효)
  console.log(y); // 20 출력 (블록 내에서도 유효함)
}

functionScopeExample();

// 함수 외부에서는 x와 y에 접근할 수 없음
// console.log(x); // ReferenceError: x is not defined
// console.log(y); // ReferenceError: y is not defined

위의 예제에서 var로 선언된 변수 x와 y는 함수 내에서 유효하므로 함수 레벨 스코프를 따릅니다. 따라서 함수 외부에서는 x와 y에 접근할 수 없으며, 이러한 변수들은 함수 내에서만 사용할 수 있습니다. 함수 레벨 스코프는 var로 선언된 변수들의 특징 중 하나입니다.  다만, ES6에서 도입된 let과 const 키워드는 블록 레벨 스코프를 지원하므로, 변수의 범위를 블록 내에서 더 엄격하게 제어할 수 있습니다.

 

저는 var도 많이 사용합니다. 

var 키워드에 익숙해져 있기 때문인데 

꼭 나쁘다고만은 할 수 없을 것 같습니다. 

용도에 맞게 사용하면 될 것 같습니다.