호이스팅
선언문이 코드 상단으로 끌어올려진 것처럼 동작하는 것이 변수 호이스팅이라 합니다. 변수 선언 키워드 var뿐 아니라 var, let, const, function, class 키워드들도 호이스팅이 됩니다.
일부 키워드들 중 정확히는 호이스팅이 되지 않는 것처럼 동작되는 것들도 있습니다.
변수 호이스팅
console.log(num)
var num
해당 코드에서는 에러가 발생하지 않고 undefined가 출력됩니다. 이는 변수 선언이 작성한 코드대로가 아닌 상단에서 선언되기 때문입니다. 자바스크립트 엔진은 실행 전 코드를 훑는 과정을 거칩니다. 변수와 함수 선언을 먼저 찾아내어 선언을 한 후 실행을 하게 됩니다. 작성한 코드에서 선언문이 어디에 있던 먼저 선언되어 실행됩니다.
자바스크립트는 변수 선언 시 다음과 같은 과정을 거칩니다.
- 1. 선언 : 변수 이름을 execution context(실행 컨텍스트)에 등록합니다.
- 2. 할당 및 초기화 : 메모리 공간을 확보한 뒤 undefined로 초기화 합니다.
변수 선언을 실행 이전 단계에서 선언을 하게 됩니다. 여기서 주의할 점은 값의 할당은 실행에서 이루어집니다.
console.log(num)
var num=4
console.log(num)위 코드는 아래와 같이 동작합니다.
var num
console.log(num)//undefined
num=4
console.log(num)//4선언과 할당, 초기화가 이루어질 뿐 나머지 과정은 호이스팅 이후에 실행됩니다.
let과 const는 실제로는 비슷하지만 호이스팅이 되지 않는 것처럼 결과가 나옵니다.
let 키워드는 변수의 중복 이름을 피하기 위해 선언하는 키워드입니다. let과 const는 서로 변수 호이스팅을 하지만 조금 다르게 동작합니다. 초기화가 호이스팅 시기에 진행되지 않고 실행 시에 초기화가 진행됩니다. const 역시 let과 동일합니다.
함수 호이스팅
함수 역시 호이스팅이 됩니다.
console.log(add(2,5))//7
function add(a, b){
return a+b
}호이스팅으로 인해 함수는 미리 선언되고 add(2,5)로 add함수가 호출됩니다. 하지만 함수를 표현식으로 생성할 경우 함수 호이스팅이 되지 않습니다.
var add = function(x, y){
return x – y
}위와 같은 경우는 변수 add가 이름 등록과 할당만 될 뿐 함수는 호이스팅 되지 않습니다.
댓글