변수 선언
자바스크립트는 꽃이 무엇인지 알 수 없다. 하지만 개발자들이 코드에 '꽃'을 정의해준다면 비로소 꽃은 자바스크립트 안에서 의미를 가지게 된다.
이렇게 정의는 '여기에 변수명이 있다!'라고 자바스크립트에 선언을 해줌으로써 변수의 존재를 알리는 작업이다.
초기화
var coffee;
console.log(coffee); //undefined변수를 선언하게 되면 그 변수는 자바스크립트가 인식하게 되고 변수에 메모리를 넣을 수 있게 저장공간을 만든다. 그리고 초깃값으로 undefined를 default 값으로 주게 된다.
즉 변수 초기화는 선언된 변수에 저장 공간을 생성해주고 초기값 undefined를 주는 것을 의미한다.
할당
var coffee = "커피콩물"
console.log(coffee) //커피콩물변수는 = 연산자를 통해 값을 할당해줄 수 있다. 할당된 값은 변수의
저장 공간에 저장되게 된다.
호이스팅
console.log(thisisHoisting());//이게 호이스팅이다
function thisisHoisting(){
console.log('이게 호이스팅이다')
}함수는 아래쪽에 선언했지만 그 위에 호출을 해도 함수가 실행된다.
이는 자바스크립트는 필요한 모든 변수를 유효 범위의 최상단으로 끌어와서 선언을 하게 되기 때문이다.
이것이 호이스팅이다.
console.log(coffee); //커피콩물
var coffee = '커피콩물'이는 var에서는 잘 드러나는 특징이며 var로 선언된 변수들은 선언 이전에 호출해도 사용을 할 수 있다.
하지만 var는 여기서 문제가 생긴다.
만약 어~~~엄청 긴 코드를 치다가 변수명을 까먹어서 먼저 할당을 한다던가..재선언을 해버리게 되면 이 또한 변수를 사용할 수 있어서 디버깅에 큰 시간을 사용하게 될 것이다.
그래서 사용하는 것이 재선언 뿐만 아니라 호이스팅을 방지하는 es6 문법 let과 const이다.
let과 const는 호이스팅이 안될까?
let과 const도 hoisting이 된다! 단지 최상단으로 끌어왔을 때 reference error가 나타나게 될 뿐이다.
console.log(pig);//Uncaught ReferenceError: pig is not defined
let pig = "delicious"이는 var과 let/const의 변수 선언, 초기화 과정이 서로 다르기 때문이다.
pig; // temporal dead zone => not defined!
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ //여기까지 temporal dead zon에 결림
const pig = "delicious" // 선언 & 초기화(그리고 할당까지)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
console.log(pig) // 호출 잘됨!var는 변수 선언과 함께 초기화가 진행된다. 따라서 var는 호이스팅이 되더라도 초기화가 이미 이루어졌기 때문에 선언 전에도 읽을 수 있다.
반면에 let과 const는 선언과 초기화 사이에는 과정이 있다. 선언이 되더라도 초기화 전까지는 temporal dead zone이라는 곳에 변수가 놓이게 된다. 이 곳에서는 hoisting이 되도 변수를 읽을 수 없다. 그래서 let과 const는 temporal dead zone에 의해 효과적으로 호이스팅을 방지할 수 있다.
