: 호이스팅은 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 범위의 최상단에 선언하는 것
위의 그림으로 블로그 글을 이해했다.
① 함수는 {} 로 감싸져 있고, 이 함수 블록 내에서 유효하다.
② 자바스크립트 Parser가 함수 실행 전 해당 함수를 슥 훑고 함수 내 변수/함수 선언에 대한 정보를 기억한다.
③ 해당 변수/함수를 언급할 때 실행한다.
var apple; // 호이스팅 -> 선언
apple = "red"; // 할당
let peach = "pink"; // 호이스팅 X (let 변수)
foo();
foo2();
function foo() { } // 함수선언문
var foo2 = function() { } // 함수표현식
var foo2; // 호이스팅 -> 함수표현식의 변수값 선언
function foo() { } // 호이스팅 -> 함수선언문
foo();
foo2(); // error -> foo2가 상단에서 변수로 선언되어 호이스팅 되었기 때문에 함수가 아니다.
foo2 = function() { }
-> 선언된 변수에 할당된 함수표현식은 끌어올려지지 않으므로 변수의 스코프 규칙을 따른다.
function printName() {
var result = inner(); // 선언 및 할당
console.log(typeof inner); // "function"
console.log(result); // "inner value"
function inner() {
return "inner value";
}
}
printName();
-> inner 함수가 할당되고 해당 값을 콘솔에 출력하는 부분보다 더 아래있지만, js의 parser가 슥 돌아본 후 inner()라는 함수를 기억한 덕분에 자바스크립트를 해석할 때 오류없이 사용되었다.
function printName() { // 함수선언문
var inner = function() { // 함수표현식
return "inner";
}
var result = inner(); // 함수 호출
console.log(result); // "inner"
}
printName();
function printName() { // 함수선언문
var inner; // 호이스팅 - 함수표현식의 변수값 선언
var result; // 호이스팅 - 변수 선언
inner = function() { // 함수표현식 할당
return "inner";
}
result = inner();
console.log(result); // "inner"
}
printName();
function printName() { // 함수선언문
console.log(inner); // undefined -> 선언은 되어있지만, 할당이 되지 않은 경우
var result = inner();
// error -> 함수가 실행되면서 inner가 함수로 인식되지 않아 undefined로 지정되는데,
// undefined에 함수를 할당하고 있기 때문에 에러 발생
console.log(result);
var inner = function() { // 함수표현식
return "inner";
}
}
printName();
function printName() { // 함수선언문
var inner; // 호이스팅 - 함수표현식의 변수값 선언
console.log(inner); // undefined
var result = inner(); // error
// inner는 이미 선언은 되었지만 할당되지 않은 상태라 undefined 값을 가지고 있기 때문에 함수로 인식 X
console.log(result); // "inner"
inner = function() { // 함수표현식 할당
return "inner";
}
}
printName();
function printName() { // 함수선언문
console.log(inner); // undefined -> 선언은 되어있지만, 할당이 되지 않은 경우
var result = inner();
// error -> 함수가 실행되면서 inner가 함수로 인식되지 않아 undefined로 지정되는데,
// undefined에 함수를 할당하고 있기 때문에 에러 발생
console.log(result);
var inner = function() { // 함수표현식
return "inner";
}
}
printName(); // inner is not a function 에러 발생
function printName() { // 함수선언문
var inner; // 호이스팅 - 함수표현식의 변수값 선언
console.log(inner); // undefined
var result = inner(); // error
// inner는 이미 선언은 되었지만 할당되지 않은 상태라 undefined 값을 가지고 있기 때문에 함수로 인식 X
console.log(result); // "inner"
inner = function() { // 함수표현식 할당
return "inner";
}
}
printName(); // inner is not a function 에러 발생
function printName() { // 함수선언문
console.log(inner); // error -> inner 함수가 let으로 선언되었기 때문에 호이스팅 X -> 에러 발생
var result = inner();
console.log(result);
let inner = function() { // 함수표현식
return "inner";
}
}선
printName(); // inner is not defined 에러 발생
var myName; // 호이스팅 - 변수값 선언
var yourName;
function myName() {} // 호이스팅 - 함수선언문
function yourName() {}
myName = "hi"; // 변수값 할당
yourName = "bye";
console.log(type myName); // string
console.log(type yourName); // string
var myName = "Hi"; // 값 할당
var yourName; // 값 할당 X
function myName() {} // 같은 이름의 함수 선언
function yourName() {} // 같은 이름의 함수 선언
console.log(type myName); // string
console.log(type yourName); // function