- 호이스팅이 뭔데 ?
호이스팅 , 발생하는 이유? (1)
호이스팅 설명
- 호이스팅이 뭔데 ?
호이스팅(Hoisting)은 사전적 의미로 끌어 올리기 라는 의미를 가지고 있습니다.
실제로 하는 일도 사전적 의미와 동일함.
코드가 실행 하기 전에 선언된 변수 , 함수 를 해당한 스코프의 최상단으로 끌어 올리는 작업을 말합니다.
호이스팅을 통해서 선언된 위치와 상관없이 코드 내 어디서든지 참조할 수 있게 됩니다.
호이스팅, 발생하는 이유
참고 다시 읽고 이해 정리
함수 호이스팅이 발생하는 원인은
자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문입니다.
[JavaScript] 호이스팅의 원리와 TDZ가 발생하는 원인
호이스팅이 발생하는 이유는 다음과 같다. [실행컨텍스트]
-
자바스크립트 엔진은 함수선언문 해석 -> 변수 초기화 -> 코드실행 순서로 진행된다.
-
코드를 실행할 땐 이미 함수 선언문과 변수가 생성되어있는 상태이기 때문에
-
어디에서든 함수나 변수를 호출할 수 있다. (심지어 제일 위에서도!)
이러한 호이스팅이 발생하는 이유는 자바스크립트의 변수 선언과 실행 컨텍스트(Execution Context)와 관련이 있습니다.
실행컨텍스트는 자바스크립트 코드가 실행되는 환경을 말하는데, 모든 자바스크립트가 코드는 실행컨텍스트 내부에서 실행됩니다.
자바스크립트에서는 실행 컨텍스트가 생성될 때 변수와 함수 선언을 메모리에 저장하고, 코드 실행 단계에서 참조할 수 있도록 합니다. 이를 위해 변수와 함수를 선언한 위치와 상관없이 먼저 메모리에 저장하고, 그 후에 코드 실행이 이루어지게 됩니다.
예를 들어, 아래의 코드를 살펴보겠습니다.
console.log(x);
var x = 10;
위 코드에서 변수 x를 선언하고, 이를 출력하는 console.log() 함수를 호출합니다. 그러나 x 변수를 선언하기 전에 출력을 시도하면 undefined가 출력됩니다. 이는 호이스팅에 의해 변수 x가 메모리에 먼저 저장되고, 그 후에 코드 실행이 이루어지기 때문입니다.
따라서, 호이스팅은 자바스크립트에서 매우 중요한 개념 중 하나입니다. 변수와 함수를 선언할 때 이를 고려하여 코드를 작성하면 예기치 못한 문제를 예방할 수 있습니다.
변수에서 호이스팅
먼저 변수 선언은 ECMA 2016 이전과 이후로 나뉘어 집니다. 왜냐하면 ECMA 2016이전에는 var를 많이 사용하였고 ECMA 2016 이후로는 let과 const를 사용하였기 때문입니다
🚩 호이스팅 사용 시 주의
코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.let/const를 사용한다.var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해해야 할까?ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다.따라서 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다.
let/const의 경우, 호이스팅이 일어나지 않기 때문에 위의 예시 그대로 이해하면 된다.
console.log(inner);에서 inner에 대한 선언이 되어있지 않기 때문에 이때는 “inner is not defined” 오류가 발생한다.
함수표현식보다 함수선언문을 더 자주 사용하지만, 어떤 코딩컨벤션에서는 함수표현식을 권장하기도 한다.
즉, 어떤 컨벤션을 갖던지 한가지만 정해서 사용하는 게 좋다.
함수 선언식에서의 호이스팅은 다르게 동작합니다.
var result = sum(1,3); // 놀랍게도 이 때는 실행이됩니다!
function sum(num1, num2){ // var sum 같은 표현식이아닌 함수 선언식으로 되어있기 때문에 함수가 그대로 끌어올려집니다.
return console.log(num1+num2);
}
위에 코드가 동작하는 이유는 변수호이스팅과 함수호이스팅이 다르기 때문입니다.
변수 호이스팅의 경우 undefiend로 변수 생성이 되지만 함수는 그대로 맨 위로 올라오기 때문입니다.
