개인노트-인강

개인노트 nomad ES6의 정석 #1 Variables

roroism 2023. 1. 30. 21:53

# 1.0 Let and Const

 

## const

 

const가 항상 read-only인 것은 아닙니다. 아래처럼 object 안의 변수까지 체크하지는 않습니다.

const person = {
	name: "Nicolas"
}

person = true // error
person.name = "Pedro" // changed. no error

 

# 1.1 Dead Zone

 

temporal dead zone은 let이랑 같이 소개되는 개념입니다.

 

let 변수는 초기화하기 전에는 읽거나 쓸 수 없습니다
(선언 구문에 초기 값을 지정하지 않은 경우 undefined로 초기화함).
초기화 전에 접근을 시도하면 ReferenceError가 발생합니다.

* 참고: var 변수와 다른 점으로, var의 경우 선언 전에 접근할 시 undefined입니다.

 

변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "시간상 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현합니다.

 

## 호이스팅

 

프로그램이 시작되면 javascript내부에서 일어납니다.

var들을 미리 제일 위로 올립니다.

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.
console.log(myName);
var myName = "nico";
// 실행결과 undefined
// 내부적으로 호이스팅 일어남

console.log(myName);
// 실행결과 error

var myName;
console.log(myName);
myName = "nico";
// 실행결과 undefined
// 첫번째 코드를 실행하면 호이스팅이 일어나서
// 내부적으로 세번째 코드처럼 실행됩니다.

호이스팅이 좋은 경우는 아닙니다. 첫번째 코드의 경우, 실제로는 에러를 내야 하기 때문입니다.

 

let을 사용하면 호이스팅이 일어나지 않습니다.

console.log(myName);
var myName = "nico";
// 실행결과 undefined

console.log(myName);
let myName = "nico";
// 실행결과 error

 

# 1.2 Block Scope

 

let, const의 또 다른 장점은 block scope가 있다는 점입니다.

 

let, const : block scope (중괄호{} 단위의 범위)

var : function scope (함수 단위의 범위)