[JS] 호이스팅 이해하기 - 기본편
건설 현장 주변을 지나다 보면 이런 괴상한 엘리베이터를 쉽게 볼 수 있다.
건설 현장에선 이 엘리베이터를 호이스트라고 부르는데 자바스크립트에서의 호이스팅 개념은 이와 유사하다.
호이스팅은 자바스크립트에서 발생하는 기이한(?) 현상 중 하나이다.
처음 호이스팅을 공부했을 때, 변수와 함수 선언이 물리적으로 코드의 상단으로 이동하여 작동한다고 이해했었다.
하지만 이는 잘못된 개념이었다.
MDN 공식문서에는 다음과 같이 호이스팅을 설명하고 있다.
변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.
- 함수 호이스팅
// 1
function catName(name) {
console.log("My cat's name is " + name);
}
catName("Tigger");
/*
위 코드의 결과는: "My cat's name is Tigger"
*/
// 2
catName("Chloe");
function catName(name) {
console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/
2번의 예제에서 함수의 호이스팅이 발생한 경우이다.
함수를 선언하기 전에 함수를 먼저 실행시켜 오류가 발생할 것 같지만
함수 실행 코드를 실행하기 전에 함수 선언을 메모리에 저장하기 때문에 오류가 발생하지 않는다.
- 변수 호이스팅
num = 6;
num + 7;
var num;
/* num이 선언되지 않더라도 에러를 내지 않습니다 */
var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefined'
var y = 2;
// 아래 코드는 이전 코드와 같은 방식으로 동작합니다.
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y
변수에서의 호이스팅에서는
변수를 선언하기 전에 초기화해서 사용할 수 있고 초기화 없이는 사용할 수 없다.
변수에서 호이스팅은 초기화를 하냐 안하냐가 중요한듯 하다.
명확하게 초기화라는게 이해가 잘 되지는 않지만, 예제를 참고해보면 변수를 사용하는 실행 지점(컨텍스트)과 연관이 있다고 생각된다.
Author And Source
이 문제에 관하여([JS] 호이스팅 이해하기 - 기본편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zero_mountain/JS-호이스팅-이해하기-기본편저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)