[Js 딥다이브] 15. let, const

📌 var 키워드의 단점

 

1. 변수의 중복 선언 허용

 

var x = 10;
console.log(x);

var x = 20;
console.log(x);

 

이미 선언되고 초기화까지 완료된 변수 x 의 중복선언을 허용한다.

전역변수가 의도치않게 값이 변경되면 에러를 발생시킬 가능성이 매우 높다.

 

2. 함수 레벨 스코프

 

var x = 1;

if(true){
    var x = 10;
}

console.log(x);

 

함수 레벨 스코프에서 선언한 변수가 아니면, 스코프를 생성하지 않고 전역변수로 취급한다.

이 문제 역시 의도치 않게 변수 값을 변경시킨다.

 

3. 호이스팅

 

console.log(x);
var x = 1;

 

런타임 이전 자바스크립트 엔진에 의해서 선언문이 제일 선두로 끌어 올려지고 undefined 로 초기화된다.

코드가 실행되기전에 이미 선언과 초기화 단계를 마친 것이 된다.

에러를 발생시키지는 않지만 이렇게 변수를 사용하는 것은 잘못된 방법이다.

 

💡 var 키워드는 브라우저의 전역 객체 window 의 프로퍼티가 된다.

 

var a = 10;
console.log(window.a);

 

var 키워드로 선언한 변수는 이렇게 접근할 수 도 있다.

let, const 키워드로 선언한 변수는 전역객체의 프로퍼티가 아니다.

 

위의 3문제를 해결할 수 있는 let, const 키워드를 알아보자!

2개의 키워드는 비슷하지만 약간 다르다.

 

1️⃣ let

 

1. 변수의 중복 선언 허용 x

 

let 키워드는 같은 스코프에서 변수의 중복 선언을 허용하지 않는다.

전역변수의 의도치 않은 변경을 막을 수 있다.

 

let x = 10;
console.log(x);
let x = 5;
console.log(x); // Uncaught SyntaxError: Identifier 'x' has already been declared

 

 

2. 블록 레벨 스코프

 

let 키워드는 블록 레벨 스코프로써, 블록을 하나의 스코프로 인정해준다

 

let x = 10;

if (true){
    let x = 5;
    console.log(x); // 5
}

console.log(x); // 10

 

 

var 키워드의 함수 레벨 스코프의 경우 처럼, 변수의 이름이 같아도 선언 시점의 스코프가 다르다면 다른 변수로 취급하고 각각 다른 메모리 주소를 식별한다.

 

let x = 10;

function go(){
    let x = 20;

    for(let x = 1; x <= 5; x ++){
        console.log(x); // 1 2 3 4 5
    }

    console.log(x); // 20
}

console.log(x); // 10

 

함수 내부에서도 중첩된 하나의 스코프를 생성한다.

 

3. 호이스팅

 

🧐 let 키워드는 호이스팅이 발생하지 않는 것 처럼 동작한다?!

 

var 키워드로 선언한 변수가 호이스팅으로 인해 undefined 값에 접근할 수 있었던 이유는 런타임 이전에 

"선언 단계" 와 "초기화(undefined) 단계" 를 모두 거치기 때문이다.

 

하지만, let 키워드를 통해 선언한 변수는 선언, 초기화 단계가 분리되어 실행 된다.

런타임 이전에는 선언 단계만 거치고, 실행 이후 코드 상에서 값을 할당해주는 변수 선언문을 만나야지 변수가 초기화 된다.

따라서 이 시점 사이에서는 변수에 접근할 수 없게 된다. 이 시점을 일시적 사각지대 라고 한다

 

그렇다면 호이스팅이 발생하지 않는 것인가?

아니다. 호이스팅은 여전히 발생한다.

스코프에서 호이스팅은 스코프 단위로 발생한다고 했었다.

 

let x = 10;

if(true){
    console.log(x); // Uncaught ReferenceError: Cannot access 'x' before initialization
    let x = 5;
    console.log(x); // 5
}

 

let 키워드는 블록 레벨 스코프 이므로, 호이스팅도 블록 레벨에서 발생한다.

위의 코드에서 전역변수 10을 출력 해야하는거 아닌가? 이렇게 생각할 수 있지만 호이스팅으로 인해서 블록 내에서 일시적 사각 지대가 생성되므로 x 에 접근할 수 없게된다.

 

2️⃣ const

아래의 2가지를 제외하고 let 키워드와 같은 특징을 가진다.

 

1. const 키워드로 선언한 변수는 선언할 때 무조건 선언과 초기화를 동시에 해줘야 한다.

 

var x ;
x = 10;
console.log(x); // 10

let y ;
y = 20;
console.log(y); // 20

const z;
z = 30;
console.log(z); // Uncaught SyntaxError: Missing initializer in const declaration

 

2. 원시 값을 식별하는 변수의 재할당이 불가능 하다.

 

const z = 30;
console.log(z); // 30
z = 10;
console.log(z); // Uncaught TypeError: Assignment to constant variable.

const user = { 
    userId : 'woong';
}
 
console.log(user.userId); // woong
user.userId = 'choi';
console.log(user.userId); // choi

 

원시 값을 식별하는 변수 값을 변경하는 유일한 방법은 재할당 이라고 했었다

하지만 const 키워드로 선언한 변수는 재할당이 금지 된다.

 

🧐 원시, 객체 값 모두 const 키워드로 식별하면 변경할 수 없는가?

 

객체는 "변경 가능한 값" 이다.

따라서, const 키워드로 식별해도 변경이 가능하기 때문에 객체 리터럴로 생성한 객체의 프로퍼티를 동적으로 관리할 수 있다.

 

재할당 금지와 불변을 같은 의미로 받아들이지 말자.

원시 값은 기본적으로 "변경 불가능한 값" 이라서 변수 값을 변경하는 유일한 방법이 재할당인데, const 키워드는 이것을 금지 한다.

따라서 변수 값 변경이 허용되지 않는 것이다.