자바스크립트 호이스팅

자바스크립트 호이스팅이 헷갈리시나요?
괜찮아요! 이 블로그에서 혼란이 사라지고 javascript 호이스팅에 대한 명확한 아이디어를 얻을 수 있습니다. 그래서.......시작하자!

자바스크립트 호이스팅이란?

호이스팅은 코드 실행 전에 변수 및 함수 선언이 해당 범위의 맨 위로 이동되는 JavaScript 메커니즘입니다. 하지만...하지만 ..기술적으로는 이런 일이 일어나지 않을 것입니다.

자바스크립트 코드가 실행될 때마다 전역 실행 컨텍스트
(모르시면 )이 생성됩니다.
하나는 생성 단계이고 다른 하나는 실행 단계입니다.

변수와 함수는 실행 단계 전에 메모리에 저장됩니다. 이렇게 하면 함수나 변수를 선언하기 전에 사용할 수 있습니다. 이 동작을 호이스팅이라고 합니다.

무슨 일이 일어나고 있는지 보여드리겠습니다...

변수 호이스팅

  var a;            //Declaration 
  a = 5;            //Initialization
  console.log(a);    //Prints 5

위 코드에서는 먼저 변수 a를 선언한 후 초기화하여 사용한다.

  a = 5;            //Initialization
  console.log(a);   
  var a;            //Declaration 

위의 코드가 어떻게 인쇄될 것이라고 생각하십니까? 오류가 인쇄됩니까?
아니요, a의 값을 인쇄합니다. a의 값을 인쇄하는 방법. 전역 실행 컨텍스트를 사용하여 보여 드리겠습니다.



위의 다이어그램은 두 단계(생성 단계와 실행 단계)가 있다는 점에서 전역 실행 컨텍스트가 생성되었음을 보여줍니다.

생성 단계에서는 코드가 실행되지 않고 메모리만 할당됩니다. 따라서 javascript는 각 함수와 변수에 대해 메모리를 할당합니다. 이것은 변수에 대해 메모리가 할당되고 정의되지 않은 할당 방법입니다.

실행 단계에서 javascript는 코드를 한 줄씩 실행합니다. 따라서 변수 a에 값 5를 할당한 다음 값을 인쇄합니다(아래 참조). 줄 초기화 줄이 console.log 앞에 오기 때문입니다.



따라서 코드를 실행하기 전에 javascript는 모든 변수에 대한 메모리를 할당합니다. 이 동작으로 인해 오류 없이 변수에 액세스할 수 있습니다. (당신이 여전히 이해하지 못하는 경우).

선언만 게양됨

    console.log(a);  //prints undefined
    a = 5;           // Initialization
    var a;           // Declaration
    console.log(a);  //Prints 5

첫 번째 console.log가 5가 아닌 undefined를 인쇄하는 이유는 무엇입니까? 호이스팅이 작동하지 않습니까?

아니요, 호이스팅이 진행 중입니다. 선언만 초기화가 아닌 호이스팅됩니다. 이는 생성 단계에서 메모리만 할당되고 값은 할당되지 않음을 의미합니다. 실행 단계에서 정의되지 않을 때까지 값이 할당됩니다. 실행 단계에서 두 번째 줄(a=5)까지 변수 a의 값은 정의되지 않습니다. 두 번째 줄 다음에 값이 변수에 할당됩니다. 따라서 마지막 줄에 값 5를 인쇄합니다.

함수 호이스팅

let a=5,
    b=5;

let result = add(a,b);
console.log(result);

function add(x,y){
  return x+y; 
}

위의 코드는 완벽하게 잘 작동합니다. 생성 단계에서 javascript는 정의되지 않은 변수를 할당하는 대신 함수 코드를 추가 변수(아래 표시)에 복사하기 때문입니다.


위의 다이어그램은 생성 단계에서 javascript가 변수에 대해 정의되지 않음을 할당하지만 ....함수에 대해 코드를 할당함을 보여줍니다. 따라서 함수가 호출되는 실행 단계에서 코드를 제공하고 작업을 수행합니다.

함수 표현식은 호이스팅되지 않습니다.

let a=5,
    b=5;

let result = add(a,b);   //Prints “TypeError : add is not a function”

console.log(result);     

var add = function(x,y){
  return x+y; 
}

코드를 실행하면 다음과 같은 결과가 표시됩니다.

   “TypeError : add is not a function 

위 코드에 대한 전역 실행을 살펴보겠습니다.


여기서 add는 변수로 간주되며 정의되지 않은 값이 할당됩니다.
따라서 함수로 호출하면 TypeError가 발생합니다.

결론

그래서 우리는 코드를 실행할 때 Global Execution 컨텍스트가 생성된다는 것을 배웠습니다. 여기에는 생성 단계와 실행 단계의 두 단계가 있습니다. 생성 단계에서 변수의 경우 메모리가 할당되고 기능의 경우 코드가 복사됩니다. 이 동작으로 인해 변수가 선언되기 전에 변수에 액세스할 수 있습니다.
이것은 "Javascript에서 호이스팅"으로 알려져 있습니다.

기사를 읽어 주셔서 감사합니다. 당신이 그것을 좋아한다면 당신의 친구들과 공유하십시오. 질문이 있으시면 의견에 자유롭게 질문하십시오.

행복한 코딩!!😀