let, const, var (scope 개념에서의 차이)

📌 let, const, var (scope 개념에서의 차이)

오늘은 우리가 변수를 선언하기 위해 사용하는 키워드 let, const, var의 특징을 알아보고 scope 개념에서의 차이점에 대해서도 알아보도록하자

var와 let은 값이 변할 수 있기 때문에 변수 라고 애기하며 const는 값이 변할수 없기때문에 상수라고 부른다
값이 변한다? 변할 수 없다? 좀 더 자세히 알아보자

위 사진 처럼 재할당이 가능하다면 데이터를 수정 할수 있기때문에 값이 변한다고 하는 것이고
const의 경우 재선언 재할당 모두 불가능 하기 때문에 값이 변할 수 없다고 하는 것이다

그렇다면 var와 let const의 scope안에서 무엇이 다를까?
우선 설명에 필요한 scope의 개념에대해 간략히 알아보자

대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)를 따르지만 자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다.

함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

블록 레벨 스코프(Block-level scope)
모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

위 스코프 개념에서 var, let, const의 차이점에대해 알아보자

var foo = 123; // 전역 변수

console.log(foo); // 123

{
  var foo = 456; // 전역 변수
}

console.log(foo); // 456

블록 레벨 스코프를 따르지 않는 var 키워드의 특성 상, 코드 블록 내의 변수 foo는 전역 변수이다. 그런데 이미 전역 변수 foo가 선언되어 있다. var 키워드를 사용하여 선언한 변수는 중복 선언이 허용되므로 위의 코드는 문법적으로 아무런 문제가 없다. 단, 코드 블록 내의 변수 foo는 전역 변수이기 때문에 전역에서 선언된 전역 변수 foo의 값 123을 새로운 값 456으로 재할당하여 덮어쓴다.

그럼 let도 동일한 방식으로 테스트 해보자

let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

let 키워드로 선언된 변수는 블록 레벨 스코프를 따른다. 위 예제에서 코드 블록 내에 선언된 변수 foo는 블록 레벨 스코프를 갖는 지역 변수이다. 전역에서 선언된 변수 foo와는 다른 별개의 변수이다. 또한 변수 bar도 블록 레벨 스코프를 갖는 지역 변수이다. 따라서 전역에서는 변수 bar를 참조할 수 없다.

const도 let과 동일하게 코드를 작성해보면

const foo = 123; // 전역 변수

{
  const foo = 456; // 지역 변수
  const bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

let과 동일하게 블록 레벨 스코프를 따르는것을 볼 수 있다.

위 세가지 예제를 통해 알아본 결과
var은 블록 레벨 스코프를 따르지않고 let과,const는 블록 레벨 스코프를 따르는것을 볼 수있다.
우리는 위 결과를 보고 var 키워드는 코드의 혼선이 올 수 있으니 사용하지 않는 것이 좋다는 결과를 도출 할 수 있다.

참조

https://poiemaweb.com/es6-block-scope