hoisting 호이스팅

변수명을 자바스크립트에게 알려주는 것 → 선언
변수에 값을 저장하는 것 → 할당
변수에 저장된 값을 읽어오는 것 → 참조

자바 스크립트에서 변수 선언은 선언 -> 초기화 단계를 거쳐 수행한다.

선언 단계
변수명을 등록하여 자바스크립트 엔진의 변수의 존재 알림
초기화 단계
값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

변수 호이스팅

var hooo
console.log(hooo) // output: undefined

var 키워드를 사용하여 변수 선언했을 때, 선언과 초기화가 동시에 이루어져 hooo에 암묵적으로 undefined를 할당해 초기화 함

console.log(hooo) // output: undefined
var hooo

반대로 console.log를 먼저 찍어도 undefined가 나오는 걸 확인할 수 있다.

이는 변수선언이 런타임에서 진행되는 것이 아니라 이미 그 이전 단계에서 실행되기 때문이다. 자바 스크립트는 소스코드를 한줄씩 순차적으로 실행하기에 앞서, 모든 선언문 (변수 선언, 함수 선언등)을 찾아내 먼저 실행한다.

즉, 변수 선언이 어디에 있던, 다른 코드보다 먼저 실행되는데 이를 호이스팅(hoisting)이라고 한다.

변수 선언 뿐만 아니라 var, let, const, function, class 키워드를 사용해 선언한 모든 식별자는 호이스팅이 된다.

var hooo  // 변수 선언
hooo = '나는야경바' // 값 할당
var hooo = '나는야경바' // 변순 선언과 할당

변수 선언은 하나의 statement로 단축 표현할 수 있지만, 두개의 실행 시점이 다르다. 변수 선언이 호이스팅되어 런타임 이전에 실행 되지만 값의 할당은 소스 코드가 순차적으로 실행되는 런타임에 실행된다.

-> 변수의 할당과 console.log의 실행하는 위치에 따라 반환되는 값이 다름

var hooo
console.log(hooo) // output: undefined
hooo = '나는야경바' 
console.log(hooo) // output: '나는야경바' 

재할당은 변수에 저장된 값을 다른 값으로 변경하는 것으로, 만약 변경할 수 없는 값이라면 이는 변수가 아니라 상수(constant)라 부른다.

보는것처럼 선언과 할당을 아주 자유롭게 한다. 변수를 새로 선언했음에도 에러가 나지 않고 각기 다른 값이 잘 뜬다. 매우 유연한 방식으로 테스트 코드에서는 사용이 편리하지만 나중에 코드량이 많아진다면 어디서 선언했는지 찾기가 힘들어진다.

함수 호이스팅

함수가 정의되는 네가지 방식

// 1. 함수 선언문
// 함수 이름 생략 불가능
function add(x, y) {
  return x + y
}

// 2. 함수 표현식
// 함수 이름 생략 가능
var add = function(x, y) {
  return x + y
}
// 함수 이름 작성 시,
// var add = function plus(x, y) {
//   return x + y
// }

// 3. Function 생성자 함수
var add = new Function('x', 'y', 'return x+ y')

// 4. 화살표 함수
var add = (x, y) => x + y

함수 선언문과 함수 표현식의 호이스팅 결과

console.dir(add) // output: f add(x, y)
console.dir(sub) // output: undefined

// 함수 호출
console.log(add(2, 5)) // output: 7
console.log(sub(2, 5)) // output: Uncaught TypeError: sub is not a function

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

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

함수 선언문의 경우, 런타임 이전에 자바스크립트 엔진에서 먼저 실행되어, 함수 자체를 호이스팅 시킬 수 있다.

반면, 함수 표현식은 위에서 봤던 변수 호이스팅과 같이 런타임 이전에 해당 값을 undefined로 초기화만 시키고, 런타임에서 해당 함수 표현식이 할당되어 그때 객체가 된다.