가변 호이스팅📢

소개

아래에 있는 이 세 개의 console.log가 무엇을 출력하는지 알 수 있습니까?

console.log('x is', x)

var x

console.log('x is', x)

x = 5

console.log('x is', x)

그렇지 않은 경우 저와 함께 있어 주시면 최선을 다해 호이스팅을 설명하겠습니다.

그리고 그들이 무엇을 출력하는지 알고 있더라도 이유를 설명할 수 없다면 계속 머물러 있으십시오. 새로운 것을 배울 수도 있습니다!

게양

호이스팅은 언어를 처음 접하거나 약간의 경험이 있는 사람들에게 가장 혼란스러운 측면 중 하나로 악명이 높습니다. 무대 뒤에서 일어나고 있습니다.

종종 변수와 함수 선언이 물리적으로 코드의 맨 위로 이동하는 것처럼 설명됩니다. 그러나 그것은 일어나고 있는 일이 아닙니다. 호이스팅을 이해하려면 JavaScript 엔진이 코드를 통과하는 여러 단계를 이해해야 합니다.

참고: let/const/class 선언은 다르게 동작합니다. var/function을 사용한 호이스팅을 먼저 이해하는 것이 가장 좋을 것 같아서 다음에 설명하겠습니다. 이 포스트에서는 변수 호이스팅에 대해 설명하는 것으로 시작하겠습니다.

자바스크립트 엔진

JavaScript 엔진 없이 JavaScript에 대해 이야기할 수 없습니다. JavaScript 코드를 읽고 실행하는 프로그램입니다. 웹 브라우저에서 아름다운 코드를 실행할 수 있게 해주는 핵심입니다. 현재로서는 메모리 생성 단계와 실행 단계의 두 단계로 작업을 수행하고 두 번째 단계까지 코드가 실행되지 않는다는 것을 아는 것으로 충분합니다.

브라우저 개발자 도구

충분한 이야기! 호이스팅의 몇 가지 예를 살펴보겠습니다. 진행하면서 예제를 빠르게 시도하고 싶다면 브라우저에서 개발자 도구를 열고(Chrome의 단축키는 alt + cmd + i임) 콘솔 패널로 이동하면 됩니다.
개발자 도구에서 여러 줄 코드를 실행하기 위한 팁: Shift + Enter를 눌러 새 줄로 이동한 다음 실행하려는 경우 Enter 키를 누릅니다. 또는 전체 코드를 복사하여 붙여넣은 다음 Enter 키를 누르십시오.

가변 호이스팅

자, 여기 첫 번째가 있습니다.

console.log(x)

// ReferenceError: x is not defined

알겠습니다. 이것은 실제로 호이스팅의 예가 아닙니다. 변수 x는 코드의 어디에도 선언되지 않았으므로 x가 정의되지 않았다고 불평하는 큰 빨간색 ReferenceError가 발생합니다. 충분히 공평합니다!

이건 어때?

console.log(x)
var x

// undefined

얼핏 보면 첫 번째 예와 많이 비슷하다고 생각할 수 있습니다. 그러나 이 코드는 오류를 발생시키지 않습니다. undefined 값을 실행하고 출력합니다. JavaScript에서 undefined가 실제 값이라는 점에 유의하는 것이 중요합니다. 따라서 이것은 기본적으로 var x = 5 또는 var x = '문자열'과 같이 var x = undefined를 해석하는 JavaScript 엔진입니다.

여기서 핵심은 x가 선언되기 전에 정의되고 사용 가능하다는 것입니다. 예, 이것은 호이스팅의 합법적인 예입니다. 따라서 예제 2는 다음과 실질적으로 동일합니다.

var x
console.log(x)

그러나 누가 x의 값을 undefined로 설정합니까? 나는 확실히 하지 않았다, 그렇지?

이것은 JavaScript 엔진의 작업입니다. 메모리 생성 단계에서 코드를 읽을 때 변수 선언을 인식하고 정의되지 않은 상태로 초기화하고 실행 단계에서 사용할 메모리에 저장합니다.

다른 예를 살펴보겠습니다. console.log는 무엇을 출력합니까?

console.log(x)
var x = 10

// undefined

x를 10으로 초기화했기 때문에 10이 출력될 것이라고 추측했을 수도 있습니다. 그러나 console.log는 undefined를 출력합니다. 왜??

여기에 문제가 있습니다 ... 초기화는 호이스트되지 않습니다.

메모리 생성 단계에서 JavaScript 엔진은 x(var x)의 선언을 인식하고 자동으로 x를 undefined로 초기화하여 사용할 수 있도록 했습니다. 그러나 초기화(= 10)가 호이스트되지 않았기 때문에 실행이 1행에서 console.log에 도달했을 때 x 값이 정의되지 않은 상태로 유지되었습니다.

3행에 다른 console.log를 추가하면 두 번째 출력은 10이 됩니다. 그때까지는 x가 10으로 재할당되기 때문입니다.

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

// undefined
// 10

알았어요?

피드백, 질문 또는 주제에 대한 요청을 게시하십시오. 게시물이 마음에 드셨다면 다른 분들도 찾을 수 있도록 👏 저도 감사합니다.