[자바스크립트] ES6+ 상수/변수 선언

상수/변수 선언

var (function scope) 대신에 const/let을 사용하기 (block scope)

ES6문법에서 가장 큰 변화중 하나는 변수 선언 방식이라고 한다. 'var'는 함수 스코프를 가지지만, 'const와 'let'은 블록 스코프를 가진다. 이를 통해서 변수의 범위를 더 명확히 할 수 있다.

 

var의 문제점

var 키워드는 함수 스코프를 가지며, 이는 블록 내에서 선언된 변수가 블록 외부에서도 접근이 가능하다는 것을 의미한다.

아래 예제처럼 'x'는 if 블록 내부에서 선언되었지만, 블록 외부에서도 접근이 가능하고, 이는 의도치 않은 버그를 유발할 수 있다.

function varTest() {
    if (true) {
        var x = 1;
    }
    console.log(x); // 1
}
varTest();

 

const와 let의 도입

const와 let은 블록 스코프를 가지며, 이는 변수가 선언된 블록 내에서만 접근이 가능하다는 것을 의미한다. 또한, const는 상수를 선언할 때 사용되며, 한번 값을 할당하면 재할당이 불가능하다.

 

let

변수를 선언할 때 사용하며, 블록 스코프를 가진다. 변수를 재할당할 수 있다.

아래의 예제처럼 y는 if 블록 내부에서만 접근이 가능하며, 블록 외부에서는 접근할 수 없다.

function letTest() {
    if (true) {
        let x = 1;
        console.log(x); // 1
    }
    // console.log(x); // ReferenceError: x is not defined
}
letTest();

 

const

상수를 선언할 때 사용하며, 블록 스코프를 가진다. 한번 값을 할당하면 재할당할 수 없다.

아래의 예제처럼 y는 if 블록 내부에서만 접근 가능하며, 블록 외부에서 접근할 수 없다. 추가적으로 const로 선언된 y는 재할당할 수 없다.

function constTest() {
    if (true) {
        const y = 2;
        console.log(y); // 2
        // y = 3; // TypeError: Assignment to constant variable.
    }
    // console.log(y); // ReferenceError: y is not defined
}
constTest();

 

호이스팅

호이스팅은 자바스크립트에서 변수 선언과 함께 선언이 해당 범위의 최상단으로 끌어올려지는 동작을 의미한다. 자바스크립트 코드 실행전에 변수 선언과 함수 선언을 미리 처리한다. 그러나 let과 const의 경우, 호이스팅이 다르게 작동한다.

 

var의 호이스팅

var로 선언된 변수는 호이스팅이 일어나서 변수가 함수 또는 전역 스코프의 최상단으로 이동하지만, 값은 undefined로 초기화 된다.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

 

let과 const의 호이스팅

let과 const로 선언된 변수도 호이스팅이 일어나지만, TDZ에 의해 초기화되기 전까지는 접근할 수 없다. 이는 변수가 선언되기 전에 접근하려고 하면 ReferenceError를 발생시킨다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;
console.log(c); // 30

 

함수 선언의 호이스팅

함수 선언도 호이스팅이 일어나며, 함수의 정의가 끌어올려진다. 이는 함수 선언문이 코드의 어느 위치에 있든지 상관없이 호출할 수 있음을 의미한다.

hoistedFunction(); // "This function is hoisted."

function hoistedFunction() {
    console.log("This function is hoisted.");
}

 

함수 표현식의 호이스팅

함수 표현식으로 선언된 함수는 변수 호이스팅의 규칙에 따른다.
변수 호이스팅의 규칙으로 선언 전에 호출할 수 없다.

// notHoistedFunction(); // TypeError: notHoistedFunction is not a function

var notHoistedFunction = function() {
    console.log("This function is not hoisted.");
};