[JS] 호이스팅

Mincho·2023년 6월 2일
0

JS

목록 보기
4/8
post-thumbnail

🔴 호이스팅

console.log(score)
var score;

다음과 같이 score의 변수의 선언이 실행되지 않은 상태에서 참조하면 참조 에러가 발생하지 않고 undefined가 출력된다. 이는 자바스크립트 엔진에서 호이스팅때문이다.

 호이스팅은 변수를 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유 특징이다. 변수 선언이 소스코드가 한 줄 씩 순차적으로 실행되는 시점인 런타임 단계 전에 실행된다.


✔ 변수의 선언/초기화/할당 과정

 기본적으로 변수는 선언/초기화/할당 과정을 지닌다.

1. 변수 선언

var data;

말 그대로 변수를 선언하는 과정이다.

2. 변수 초기화

 초기화 단계에서는 선언 키워드를 통해 이름이 정해진 변수에 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당한다.

여기서 var / let,const의 차이가 발생하는데,,,

var의 경우선언과 함께 초기화가 함께 발생한다. 그러므로 초기화가 이루어져 메모리에 있는 것으로 판단하여 참조가 가능하게 된다.

let,const는 선언만 이루어지고 초기화단계는 런타임과정에서 이루어진다. 그렇기 때문에 마치 호이스팅이 이루어지지 않은 것처럼 보인다.

3. 변수 할당

 실제로 변수에 값을 넣어주어 할당한다. 메모리에 있던 초기화값인 undefined가 실제 값으로 바꿔진다. 이것은 런타임과정에서 이루어지는 것을 명심해야 한다. 또한 값이 변경된다하더라도 메모리에 차지하고 있던 undefined의 공간이 바뀌는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 저장한다는 점에 주의하자!



✔ 함수의 호이스팅

 변수와 함께 함수도 호이스팅이 일어난다.

console.log(add(2,5)) // 7
console.log(sub(2,5)) // TypeError : sub is not a function

//함수 선언문
function add(x,y){
	return x + y;
}

//함수 표현식
var sub = function(x,y){
	return x - y;
}

 함수 선언문으로 정의된 함수는 함수 선언문 이전에 호출 할 수 있다. 함수에서도 호이스팅이 일어나기 때문이다.

 하지만 앞서 var를 선언 이전에 참조했던 undefined 초기화 값과는 다르다. 함수 선언문은 암묵적으로 함수 객체로 초기화되기 때문에 함수를 정상적으로 실행이 가능한 것이다. 때문에 함수 표현식은 변수로 담아 놓았기때문에 변수 호이스팅이 발생하여 함수로 참조가 불가능한 것이다.

 이처럼 함수 호이스팅은 함수를 호출하기 전에 반드시 함수를 선언해야 한다는 규칙을 무시하기 때문에 표현식을 이용할 것을 권장하고 있다.

 추가적으로 es6에 추가되어 많이 사용되고 있는 화살표 함수도 함수 호이스팅이 적용이 되지않는다

👍올바른 피드백은 언제든지 환영입니다~!

profile
사진찍는 개발자.

0개의 댓글