const와 let을 사용하는 이유

홍정민·2023년 3월 11일

Syntax

JavaScript 문법

목록 보기

2/3

const, let 키워드

단편적으로 본다면 const와 let의 의미는 다음과 같다.

const는 constant(상수)의 의미로 바뀌지 않는 값이다.
let은 var처럼 변수의 값이 바뀔 수 있다.

초기의 자바스크립트는 출시하는 데에 급급하여 문제가 많았다. 그래서 문제들을 해결하기 위해 const와 let같은 새로 도입된 키워드를 덕지덕지 붙혀 문법을 개선 하고 있다.

🍔 const와 let 사용 이유

1. 블록 레벨 스코프 사용(Block-Level-Scope)

Scope란? 변수나 함수를 참조할 수 있는 범위이다.

C, C++, Java 등 그리고 JS의 const, let 키워드는 블록 레벨 스코프를 사용한다.
JS는 함수레벨 스코프를 사용한다.

블록 레벨 스코프(Block-Level-Scope)

: 블록( { } ) 단위로 스코프(유효 범위)가 정해진다.

let num = 10;
{
    let num = 20;
    console.log(num); //20출력
}
console.log(num); //10출력

함수 레벨 스코프(Function-Level-Scope)

: 함수( function ) 단위로 스코프(유효 범위)가 정해진다.
블록 레벨 스코프 예시 코드를 가져왔을 때, 출력 값이 다르다.

var num = 10;
{
    var num = 20;
    console.log(num); //20
}
console.log(num); //20

블록을 함수로 바꾼다면??

var num = 10;
function functionLevel() {
    var num = 20;
    console.log(num); //20
}
functionLevel();
console.log(num); //10

2. 재할당 여부 선택 가능

재할당이 가능한 var, let
재할당이 불가능한 const

var, let은 선언 후 할당 가능하다.
const는 선언과 할당을 동시에 해야하고, 선언 후 재할당을 할 수 없다.

var varNum = 1;
let letNum = 2;
const constNum = 3;

varNum = 10; //재할당 가능
letNum = 20; //재할당 가능
constNum = 30; //TypeError: Assignment to constant variable.

3. 호이스팅(Hoisting) 차단

호이스팅: 변수나 함수 선언문의 선언을 최상단으로 위치 시킨다.

함수 선언문: 일반적인 함수 형태 function name(arg) { ... }로 호이스팅 된다.
함수 표현식: var name = function() { ... } 형태로, 호이스팅 되지 않는다.

예를 보면, var은 호이스팅 되기 때문에 메모리에 바로 할당되어, 선언하기도 전에 console.log에 undefined가 찍히지만, const와 let은 호이스팅이 안되기 때문에 console.log에서 에러가 발생한다.
```
console.log(varNum); //undefined
console.log(constNum); //ReferenceError: 초기화 전에 'constNum'에 접근할 수 없습니다.
var varNum = 1;
const constNum = 2;
```
🤔 호이스팅을 차단하려는 이유는 무엇일까?
1. var 변수 코드가 실행되기도 전에 할당되므로, 불필요한 메모리 공간이 소요된다.
2. var 변수 코드가 실행되기도 전에 undefined로 할당되므로, 예상치 못한 에러가 발생할 수 있다.