[JS Deep Dive] 15장 - let const 키워드와 블록레벨 스코프

 

https://khw063011.tistory.com/103

[JS Deep Dive] 13장 - 스코프

 

13장에서 var 키워드로 선언한 변수들과 let 과 const 로 선언한 변수들의 차이점에 대해서 포스팅 했었다. 

이걸 조금 더 구체적으로 들어가보도록 하겠담

---

 

1. var 키워드로 선언한 변수의 문제점

(1) 변수 중복 선언 허용

• var 은 변수 중복 선언이 가능하다.
• var 로 선언한 변수를 중복 선언하면 초기화문 유뮤에 따라 다르게 동작한다.
• 따라서... 의도하지 않아도 먼저 선언된 변수값이 변경이 될수도 있고 여러 문제점이 생길 수 있다. 

var x =1;
var y = 1;

// 중복 선언 허용함
var x = 100; // 초기화문이 있는 변수 선언문은 var 키워드가 없는 것처럼 동작함
var y;  /// 초기화문이 없는 변수 선언문은 무시함

console.log(x);  //100 
console.log(y);  //1

 

 

(2) 함수레벨 스코프

var 키워드로 선언한 변수는 오로지 코드 블록만을 지역 스코프로 인정하기 때문에

함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 됨

 

var i =10;

for (var i = 0; i <5; i++) {
	console.log(i);
}

console.log(i); ///5

 

(3) 변수 호이스팅

 var 로 선언을 하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려진 것처럼 동작한다.

변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 

단 할당문 이전에 변수를 참조하면 언제나 undefined 반환함

-> 오류 발생 여지 있음..

---

 

4. var 과 반대되는 let 키워드

(1) 변수 중복 선언 금지 

var 키워드로 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않는다. 이때 변ㄱ수를 중복 선언하면서 값까지 할당했다면

의도치 않게 먼저 선언된 변수 값이 재할당되어 변경되는 부작용이 발생할 수 있다. 

 

 

하지만 let 으로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. 

 

(2) 블록 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따른다. 

하지만 ㅣet 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록레벨 스코프를 따른다. 

 

let 키워드로 선언한 변수는 "선언단계{ " 와 "초기화단계 " 가 분리되어 진행된다.

즉 .. 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만

초기화단계는 변수 선언문에 도달했을 때 발생된다.

 

만약 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조에러가 발생한다. 

 

 

** 일시적 사각지대 (TDZ)

let 이나 const 로 변수를 선언할 때 초기화되기 전에 접근하려고 할 때 발생하는 현상
변수가 선언된 위치부터 초기화되기 전까지의 영역을 의미하며, 이 영역에서는 해당 변수에 접근하려고 하면
ReferenceError 가 발생

console.log(x); // ReferenceError
let x = 10;​

let x = 10;이 선언되기 전에 x를 로그로 출력하려고 하면 ReferenceError가 발생.
이는 x가 선언되었지만 아직 초기화되지 않은 상태에서 접근하려고 했기 때문이다. 
TDZ를 피하기 위해서는 변수가 선언되고 초기화된 이후에 해당 변수에 접근해야 한다.

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

 

 

---

 5. const 키워드

• 상수를 선언하기 위해 사용
• let 과 비슷한 부분이 많음

 

(1) 선언과 초기화

반드시 선언과 동시에 초기화 해야함

그렇지 않으면 문법 에러가 발생함

 

let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며

변수 호이스팅이 발생하지 않는 것처럼 동작함

 

 

(2) 재할당 금지

var, let 로 선언한 변수는 재할당이 자유롭지만 const 로 선언한 변수는 재할당이 금지됨

const foo = 1;
foo =2 // invalid error

 

(3) 상수

- const 로 선언한 변수에 원시값을 할당한 경우 변수 값을 변경할 수 없음

- const 로 선언한 변수에 객체값을 할당한 경우 값을 변경할 수 있음 

 

const person = {
    name: "John",
    age: 30
};

// 객체의 속성 변경 - 가능
person.age = 31;
console.log(person.age); //  31

// 새로운 객체 할당 - 불가능
// person = { name: "Jane", age: 22 }; 
// TypeError

 

=> const 키워드로 선언된 변수에 원시값을 할당한 경우 원시값은 변경할 수 없는 값이고 const 키워드에 의해 재할당이 금지되기 때문에 할당된 값을 변경할 수 있는 방ㅇ법이없음...

=> 하지만 const 로 객체를 할당한 경우에는 값을 변경할수 있음...

왜냐하면 변경 불가능한 값인 원시값은 재할당 없이 변경할 수 있는 방법이 없지만 변경가능한 값인 객체는 재할당 없이도 직접 변경을 할 수 있기 때문이다. 

 

따라서...!!! const 키워드는 단지 재할당이 금지되는 것이지 " 불변 " 을 의미한다고 이해하면 틀린 것이다.