호이스팅을 기반으로 5가지 문제 해결

문제를 만나 해결하기 전에 Javascript 호이스팅이 실제로 무엇인지 다시 한 번 살펴보겠습니다.

javascript에서 호스팅은 변수 및 함수 선언이 범위의 맨 위로 이동되는 동작입니다.

범위는 로컬 또는 글로벌일 수 있습니다.

x = 20 ;
console.log(x);  // 20  
var x ;

X는 범위( Global )의 맨 위로 호이스팅되므로 x를 위로하면 20이 됩니다.

게양은 let, const와 어떻게 작동합니까?

let과 const는 HOISTED가 되지만 당분간은 초기화될 때까지 액세스할 수 없습니다.

이것은 일반적으로 Temporal Dead Zone이라는 용어를 나타냅니다.

console.log(b);

let b = 100;

// Cannot access 'b' before initialization"

요약 완료 이 5가지 문제에 직면해 봅시다!

Q1: 출력을 예측합니다.

(function random(){
    x++;
    console.log(x);
    var x = 21;
  })();

출력 : NaN

// if we try to do hoisting here in the function scope

(function random(){
var x; // hoisted to the Top
x++; // here x is undefined
console.log(x) // NaN
x = 21; 
})();

Q2: 출력을 추측?

doSomething();
function doSomething(){
  x = 33;
  console.log(x);
  var x;
}

출력: 33

var x가 호이스팅되고 33으로 초기화됨에 따라.

질문 3: 이 문제의 출력?

var b = 1;
console.log(c);
var c = 2;
a = 1;
console.log(a);

출력 : 정의되지 않음, 1

호이스팅으로 인해 c가 정의되지 않았고 새로운 변수가 a = 1을 생성하여 1이 됩니다.

Q4: 출력을 예측합니다.

makeStringReverse();
var reverse = "*/" ;
function makeStringReverse(){
console.log(reverse);
reverse = "/*" ;
}
console.log(reverse);

산출

한정되지 않은

"*/"

설명

// actual execution flow 
var reverse; // reverse is undefined atm
function makeStringReverse(){ 
console.log(reverse); // undefined
reverse = "/*" ; // initialized
}
makeStringReverse(); // called before reverse been initialized with "*/"
reverse = "*/" ;
console.log(reverse); // will console "*/" because it reverse was reassigned again.

질문 5:

function callName() {   
var name = "John";
} 
callName();
console.log(name);

산출

참조 오류: 이름이 정의되지 않음

설명 :

참조 오류의 간단한 이유는 변수가 호이스트된 범위입니다.

callName 함수 범위에는 호이스트되었지만 전역 범위에는 없기 때문에 오류가 발생했습니다.

그게 다야!
이것이 javasxript에서 게양을 명확하게 하는 데 도움이 되었기를 바랍니다. :)

삐!!