Index

1. let, const란?

JavaScript(이하 JS)에서 ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었습니다. var 키워드로 선언된 변수는 아래와 같은 특징을 가지고 있어, 주의하지 않고 사용했을 시 심각한 문제를 초래합니다.

1. 유효 범위: 함수 레벨 스코프(Function-level Scope) 프로그래밍 언어에서는 변수를 참조할 수 있는 범위가 존재합니다. JS 또한 변수의 선언 위치에 따라 유효범위를 갖게 되는데, var 키워드를 사용하면 함수의 코드 블록만을 스코프로 인정합니다. 함수 레벨 스코프 범위일 경우, for문의 변수 선언문에서 선언한 변수를 for문 코드 블록 외부에서 참조할 수 있습니다. 또한 전역 함수 외부에서 생성한 변수는 모두 전역 변수로 인식되기 때문에, 이는 전역 변수를 남발할 가능성을 높이게 됩니다.

{
    var varValue = 1;
}

console.log(varValue);

2. var 키워드 생략 허용 암묵적인 전역 변수를 양산할 가능성이 큽니다.

3. 변수 중복 선언 허용 의도하지 않은 변수값의 변경이 일어날 가능성이 큽니다.

4. 호이스팅(Hoisting) 호이스팅이란 var, function 등에서 정의된 변수의 선언문을 유효 범위의 최상단으로 끌어올리는 행위를 말합니다. 아래의 예시를 살펴보면 개발자가 작성한 코드에서는 varValue라는 변수를 선언과 동시에 값을 지정해줬습니다. 하지만 호이스팅으로 변환된 코드를 보면 맨 위로 varValue가 선언된 후 조건문에서 값이 지정되 는 모습을 확인할 수 있습니다.

// 개발자가 작성한 코드
if(true){
   var varValue = 1;
}
console.log(varValue);

// 호이스팅으로 변환된 코드
var varValue;
if(true){
   varValue = 1;
}
console.log(varValue);

var 키워드를 사용하면 특히 전역 변수 부분에서 빈번하게 오류가 발생합니다. 따라서 이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 통해 변수를 선언하게 되었습니다.

2**. let, const의 특징: 공통점**

예제를 통해 let과 const의 공통점을 살펴보도록 하겠습니다. let과 const의 공통적인 특성이므로 예제는 let을 이용해 작성했습니다.

2.1 유효 범위: 블록 레벨 스코프(Block-level Scope)

   let과 const 키워드를 사용하면 블록{ ... } 내부에서만 사용이 가능합니다.

이렇게 블록 내에서만 유효한 범위를 Block Level Scope라고 합니다.

{
    let letValue = 1;
}

console.log(letValue);