TIL - Hoisting

정경훈·2021년 12월 7일

1. 호이스팅이란 무엇인가?

enviromentRecord에는 코드의 식별자 정보들이 저장된다. 이때, 자바스크립트 엔진이 식별자들을 최상단으로 끌어올려 놓는 것으로 간주하는 것이며, 변수 정보를 수집하는 과정을 더욱 이해하기 쉽게 대체한 개념이다.

(1) 변수로만 이루어져 있을 때

첫번째, 원본코드

원본코드에서 콘솔 1,2,3에 출력되는 값을 알아보면 콘솔 1과 2는 '경훈정' 콘솔3은 '경훈'이라는 값을 반환한다. 이는 호이스팅의 규칙에 따라 반환된 값이다.

두번째, 매개변수 "경훈정"을 변수 선언/할당과 같다고 간주한 상태

원본코드에서 userName 함수를 실행시킬 때 넣었던 매개변수 "경훈정"을 함수안에서 변수로 선언하고 할당하였다. 이때도 값은 원본코드와 다르지 않다.

🔍 세번째, 호이스팅이 완료된 상태

호이스팅이 완료된 상태의 코드를 확인해보면 첫번째, 두번째 코드와는 다른 모습을 볼 수 있다. 자바스크립트는 userName 함수를 실행하는 순간 변수명과 함수 선언의 정보를 위로 끌어올린다. 이때, 호이스팅의 규칙이 발생한다.

변수(name)는 선언부와 할당부로 나뉘어져서 선언부만을 끌어올린다.

반면 함수 선언(function)은 함수 전체를 끌어올리게 되는데 함수 선언에 대한 부분은 지금 예제코드에 없는 상태이다.

이 규칙을 통해 예제코드를 마저 살펴본다면, name이라는 변수에게 각각 "경훈정","경훈"이라는 값이 할당되었지만 선언부만을 끌어올린 것을 확인할 수 있다.

이때 두번째 줄에 선언된 변수 name 하나로 세번째, 네번째 줄에 있는 변수들은 이미 선언된 것으로 생각하면 된다.

여섯번째 줄에서 변수 name에게 "경훈정"을 할당하고 이는 일곱번째,여덟번째 줄 콘솔이 "경훈정"을 출력하도록 만든다.

아홉번째 줄에서 또 다시 name에게 "경훈"을 할당 하였고, 이는 열번째 줄 콘솔에게 "경훈"이라는 값이 출력되도록 한다.

(2) 함수가 선언이 되었을 때

첫번째, 원본코드
sayHello라는 함수를 만들어서 greetings라는 변수와 함수를 넣어주었다. 첫번째 콘솔에서는 greetings라는 함수가 출력이 되고, 두번째와 세번째 콘솔에서는 "hello"라는 값을 출력을 하였다.

두번째, 함수 선언 호이스팅 완료된 모습
위 원본코드의 값이 나오는 것에 대한 호이스팅 완료상태를 보여주는 코드이다.
위에서 작성했듯이, 변수는 선언부와 할당부 중에서 선언부만 끌어올려지며 함수 선언은 함수 전체를 끌어올린다.

그렇기 때문에 앞서 등장했던 변수 greetings가 선언부만 끌어올려졌고, 뒤에 등장한 함수 greetings가 뒤를 이었다.

두번째 줄의 변수 greetings는 현재 할당된 값이 없기 때문에 여섯번째 줄의 콘솔은 함수 greetings를 출력하게 되었고, 일곱번째 줄에서 greetings에 "hello"가 할당이 되면서 뒤에 오는 콘솔에는 "hello"가 찍히게 된다.

호이스팅에서 조금 더 알아야 할 내용이 있는데 이는 함수 선언에서 선언문과 표현식의 차이이다.

함수 선언문 : 정의부만 존재하고 별도의 할당명령이 없는 것 (함수명 필수)

function abcd() {
}

함수 표현식 : 별도의 변수에 할당하는 것(함수명 존재 ? 기명함수식 : 익명함수식)

익명함수식
var wow = function() {
}
wow() = 실행 가능

기명함수식
var amazing = function awsome() {
amazing() = 실행가능
awsome() = Error
}

함수 표현식에서 기명함수식은 함수 내부에서만 접근할 수 있다는 사실을 잊지 않도록 해야한다.

함수 선언문과 표현식의 차이

위 코드에서 확인할 수 있는 것은 함수 선언문은 함수 전체를 호이스팅 하였지만 함수 표현식은 변수 선언부만 호이스팅 되었다.

이때, 함수 선언문은 함수 전체를 호이스팅 했기 때문에 값을 출력하는데 문제가 없지만 함수 선언문은 변수 선언부만 호이스팅이 되었기 때문에 multiply에 값이 할당되어 있지 않아 에러메시지가 나오는 것을 확인할 수 있다.

하지만 이러한 특성 때문에 혼란을 일으키는 원인이 되기도 한다. 협업을 하는 과정에서 A가 만들어둔 sum함수에 B라는 사람이 또 다시 sum이라는 함수를 새로 선언하면 나중에 작성한 B가 선언한 함수가 실제로 호출되며 큰 혼란을 일으킬 수 있다.

그렇기 때문에 전역공간에 함수를 선언하거나 동명의 함수를 중복 선언하는 일은 막아야하며, 이때 함수 표현식을 이용하면 이러한 혼란을 방지할 수 있다고 한다.

발전하고 싶은 프론트엔드 개발자 입니다 :)