ch4 - 1. let, const의 쓰임과 유효 범위

Index

Index 1. let, const란?2. let, const의 특징: 공통점 2.1 유효 범위: 블록 레벨 스코프(Block-level Scope)2.2 변수 중복 선언 불가 2.3 전역 객체와의 관계 2.4 호이스팅 불가 3. let, const의 특징: 차이점 3.1 기본형 변수 3.2 참조형 변수 4. let, const의 사용법

1. let, const란?

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

유효 범위: 함수 레벨 스코프(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);

2.2 변수 중복 선언 불가

let과 const에서는 중복 선언 시, 이미 선언된 변수라는 SyntaxError가 발생합니다.


let letValue = 1;
let letValue = 2;

2.3 전역 객체와의 관계

let과 const로 전역변수를 선언 시, 전역 객체의 property(속성)로 되지 않습니다. 즉 전역 변수로 선언한다면 해당 변수는 보이지 않는 블록 내에 존재하게 됩니다.


let letValue = 1;
console.log(window.letValue);

2.4 호이스팅 불가

var 대신 let으로 코드를 작성 시, ReferenceError라는 오류가 발생합니다. 즉 let과 const로 선언한 변수는 호이스팅이 적용되지 않습니다. let과 const로 선언하면 블록이 시작되는 부분부터 선언이 실행되기 전까지 일시적 사각지대(Temporal Dead Zone, TDZ) 구간이 생기는데, 이 구간에서는 참조가 불가능하기 때문에 해당 오류가 발생합니다.


if(true){
   let letValue = 1;
}
console.log(letValue);

3. let, const의 특징: 차이점

차이점 또한 예제를 통해 살펴보도록 하겠습니다.

3.1 기본형 변수

기본형 변수(number, string, boolean, null, undefined)를 선언할 때 값의 변경이 필요할 경우 let을 사용합니다. const는 기본형 변수에서 상수로 동작하기 때문에, let처럼 사용할 경우 TypeError가 발생합니다.


let letValue = 1;
letValue = 2;         //오류 없음

const constValue = 1;
constValue = 2;       //오류 발생

3.2 참조형 변수

참조형 변수(array, object, function)의 경우 const로 선언하더라도 멤버 값을 조작하는 것이 가능하기 때문에, const로 선언하는 것이 바람직합니다.


const constValue = [];
constValue.push(1);
console.log(constValue);  //[1]

4. let, const의 사용법

따라서 var는 지양하고, 가급적이면 let과 const를 사용하여 블록 레벨 스코프 내로 작성하는 것이 좋습니다. 또한 가변 변수는 let, 상수 또는 참조형 변수는 const로 선언합니다.


let a = 123;
const b = 123;