자바스크립트에서 호이스팅

먼저 예를 보겠습니다.

var x ;
x = 50;
console.log(x);

// Output: 50

또 다른 예 :

x = 50;
console.log(x);
var x ;

// Output: 50

두 경우 모두 출력이 50인 이유. 이를 위해서는 Hoisting을 이해해야 합니다.

JavaScript로 호이스팅하면 무엇을 이해합니까?

According to MDN :
JavaScript Hoisting refers to the process whereby the compiler allocates memory for variable and function declarations prior to the execution of the code.

걱정마세요 간단하게 설명드리겠습니다

Simple terms:
Hoisting means MOVING the DECLARATION part of the variables at the top of the code.

이제 😒 . 내가 미쳤거나 문장 사이에 2 개의 대문자 단어를 썼습니까? 그러나 이 두 단어는 매우 중요합니다.

이 속성의 일부 캐치(호이스팅)에 대해 이해합시다.

호이스팅은 JS 엔진이 수행하는 씬 프로세스 뒤에 있습니다. 변수가 코드 맨 위로 이동하는 것을 볼 수 있는 것은 아닙니다.

변수를 **선언**하는 것일 뿐 초기화하는 것은 아닙니다.

 let x ; // Declaration
 var y ; // Declaration

let x = 6 ; // Initialization
var y = 5 ; // Initialization

변수 초기화는 해당 라인 코드가 실행된 후에만 발생합니다.

선언하기 전에 "let"을 사용하면 참조 오류가 발생합니다.

car = "Volvo" ;
console.log(car);
let car;

// Output:  Reference error.

"const"를 선언하기 전에 사용하면 구문 오류가 발생합니다.

car = "Volvo" ;
console.log(car);
const car;

// Output:  Syntax error.

var 변수만 "undefined"값으로 초기화되며 let 및 const는 해당 코드 줄이 실행될 때까지 전혀 초기화되지 않습니다.

Arrow 함수 및 클래스에서는 호이스팅이 발생하지 않습니다.

퀴즈

var x = 10;
y = 10 ;
console.log (x+y);
var y ;

// Output : ? 

var x = 10;
console.log(x + y);
var y = 10;

// Output: ?

x = 10;
y=10;
console.log(x + y);
const x;
let y;

// Output: ?

참고: 약간 압도당할 수 있지만 호이스팅에 대해 이해해야 하는 개발자는 아닙니다. 이 문제를 해결하는 간단한 방법은 맨 위에 변수를 선언하는 것입니다.

그게 이 블로그의 전부입니다. 그때까지 계속 배우고, 계속 성장하기 전까지 다음 블로그에서 만나요.

코멘트 섹션에서 이 질문에 답하십시오.

👇 저와 연결하실 수 있습니다.

이미지 크레디트 : Kissanwat

참조:
W3school
MDN