호이스팅

호이스팅이란, 변수의 선언문이 코드의 선두로 끌어올려지는 것처럼 동작하는 자바스크립트 고유의 특징이다. 자바스크립트가 실행되면 가장 먼저 소스 코드의 평과과정 → 런타임(순차적으로 코드를 읽음)이 일어나는데, 평과과정에서 가장 먼저 class, function,var,let,const 등 변수와 함수들을 가장 먼저 평가한 후에야 나머지 코드들을 순차적으로 읽어 내려가는 런타임 실행한다.

추가 설명)

var는 함수레벨 scope를 갖고 있으며, 가장 먼저 선언된 변수가 맨위로 평과가정을 거쳐 선언과 동시에 값이 초기화 되고 런타임에 따라 값을 할당 받습니다.

let은 블록 레벨 scope를 가지고 있기 때문에 겉보기에는 호이스팅이 이루어지지 않게 보입니다. 왜냐하면 호이스팅으로 맨처음 선언이 된 후, 런타입 과정을 지나면서 ‘선언문(let x)’을 직접 만난 후에야 초기화가 이루어지기 때문입니다. (선언과 평과 초기화가 다른 단계에서 이루어짐, 아래 설명 참고) 이처럼 함수가 호이스팅으로 선언이 된 후, 선언문을 만나 초기화가 이루어지기 전까지 참조가 되지 않는 상태를 TDZ(Temporal Dead Zone) 일시적 사각지대라고 합니다.

const 또한, 블록 레벨 scope를 갖고 있기 때문에 호이스팅이 이뤄나지 않는 것처럼 보이지만, 호이스팅은 이루어집니다. 특히 const의 경우에는 선언과 초기화가 동시에 이뤄져야 합니다 무조건!

(const x = 1;이렇게 값이 주어져야함, const x; 이건 error)

상세 설명

딥다이브 보면서 정리를 했는데 더 추가 설명 해주시면 감사하겠습니다!

저도 이번 기회에 scope랑 호이스팅을 제대로 공부한거라서 아직 헷갈리는 부분도 있기 때문이죠!

집단지성 파이팅!

맨위 코드가 에러가 나지 않고 undefined가 뜬 이유는?

바로 score가 마치 맨 위에서 선언되었다고 호이스팅 과정이 일어났기 때문입니다!

실행 순서) var score가 먼저 변수가 선언되고 → 초기화 → undefined → 100값 할당

console.log(score) 
//undefined

score = 100
console.log(score)
// 100

var score

var 변수의 호이스팅과 문제점

var 변수는 중복 선언이 가능해서 언제 오류를 발생시키가 값이 수정되었는지 알 수 없으며 가독성도 떨어진다.

• var score가 맨위로 호이스팅 → 초기화 → undefined → 값 할당
• 선언과 초기화 동시 발생

console.log(score) 
//undefined

score = 100
console.log(score)
// 100

var score 

let변수와 호이스팅

• 마치 호이스팅이 안되는 것처럼 보임 ⇒ 선언과 초기화 단계 분리된 상태
• 블록레벨 스코프
• 호이스팅이 된 후 ‘선언문’을 만나야 초기화가 된다

console.log(foo) // Reference Error: foo is not defined
let foo

//런타임 이전 선언단계 실행은 똑같음 
console.log(foo) 
//Reference Error: foo is not defined
//일시적 사각지대

let foo
console.log(foo)
//undefined
// 초기화 단계

foo = 1
console.log(foo)
// 1
// 할당

💡 **일시적 사각지대(Temporal Dead Zone)**

호이스팅 이후 선언단계 → 선언문을 만나 초기화가 되기 전까지 값을 참조할 수 없는 부분

const와 호이스팅

• 선언과 초기화 동시에 이루어져야 함! must ! ! !

const foo = 1; (O)
const foo (X) //syntaxError

• 블록레벨 스코프 ⇒ 호이스팅이 안된 것처럼 보임

{
console.log(foo);
//Reference Error

const foo = 1;
console.log(foo)
// 1
}

console.log(foo)
// Reference Error