Javascript : 호이스팅(Hoisting)

1. 호이스팅이란?

짤에서 세대 드러난다..
동년배 여러분들.. 호이 호이 둘리는~~ ?
내가 이런 헛소리를 하는 이유는 '호이스팅'이라는 단어에 겁먹지 않도록 하기 위함이다!
일단, hoist라는 영단어의 뜻을 알아보자.

hoist 미국∙영국 [hɔɪst] : (흔히 밧줄이나 장비를 이용하여) 들어(끌어)올리다
그렇다. 끌어 올린다.
무엇을?
바로 자바스크립트에서의 선언을!

2. 변수 선언 : var / let / const

먼저 변수를 선언하는 세 가지 방식에 대해 알아보자.
변수 재선언과 재할당이 가능한 'var'는 변수를 보호하지 못하고 중복 선언이 이뤄지는 문제가 있다.
이러한 var의 문제점으로 let과 const가 등장하게 된 것이므로 var의 사용은 지양하는 것이 좋다.

그럼 let과 const의 차이는 무엇일까?
일단 둘 다 재선언이 불가능하지만, let의 경우 값의 재할당이 가능하다.

let a = 5;
let a = 6;
console.log(a) // 변수 재선언 불가. SyntaxError: Identifier 'a' has already been declared
a = 6;
console.log(a) // 값 재할당 가능. 6

const b = 5;
const b = 6;
console.log(b) // 재선언 불가. SyntaxError: Identifier 'a' has already been declared
b = 6;
console.log(b) // 값 재할당 불가. TypeError: Assignment to constant variable.

이 때문에 사실 const는 변수가 아니라 상수로 구분하는 것이 맞다.
뜻 조차 상수를 의미하는 constant 지만, 많은 곳에서 변수로 혼용하여 쓰곤 하는..

3. 변수 호이스팅

선언 방식 차이에 대해 공부했으니 어떻게 선언을 호이스팅하는 건지, 호이스팅 그게 뭣이 중헌지 알아보자.

console.log(hoistVar)
var hoistVar = "호이스팅이"
//undefined

console.log(hoistLet)
let hoistLet = "호이스팅이 뭣이"
//ReferenceError: Cannot access 'hoistLet' before initialization

console.log(hoistConst)
const hoistConst = "호이스팅이 뭣이 중헌디"
//ReferenceError: Cannot access 'hoistConst' before initialization

아니 JS는 한 줄씩 순서대로 실행한다고 들었는데 콘솔을 먼저 찍어도 되는건가요?!
네. 이것은 모두.. 호이스팅의 개념을 알아보기 위한 큰그림이었습니다..

JS 엔진은 컴파일 과정에서 미리 변수를 스캔하여 실행 컨텍스트에 변수 객체를 저장한다.
(실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체.)
즉, 미리 선언된 변수를 수집하여 마치 스코프 최상단에 변수가'끌어올려진'것 같은 느낌이 된거다.

이것은 마치.. 수능 영어 독해 전에 접속사에는 세모, 동사에는 동그라미, 주어는 네모.. 하던 고런 너낌..
우린 JS엔진처럼 미리 문장 구조를 스캔해 독해용 실행 컨텍스트를 만들었던 경험이 있는거다!

그런데 잠시만, error가 떴는데 호이스팅이 된게 맞냐구?
변수 생성은 세 단계를 거친다. 1. 선언 2. 초기화 3. 할당

1. 선언이 되면 변수가 실행 컨텍스트의 변수 객체에 등록이 된다.
2. 초기화는 등록된 변수를 위한 공간을 메모리에 마련하는 undefined의 상태다.
3. 할당은 undifined로 초기화된 변수에 실제 값을 할당하는 단계다.

var는 선언과 동시에 초기화가 이루어지지만, let은 선언시 초기화가 이루어지지 않으며
일시적 사각지대(TDZ, 스코프의 시작 지점부터 초기화 시작 지점까지의 구간)에 갇힌다.
따라서 var의 호이스팅 결과는 undefined가, let과 const의 호이스팅 결과는
'참조 오류 : 초기화 전에는 해당 변수에 접근할 수 없다'가 뜨는 것이다.

4. 함수 호이스팅

함수 호이스팅의 경우, 가장 먼저 발생되는 호이스팅이다.
하지만, 여기서 주의할 점은 익명함수의 경우 함수를 선언한게 아닌 변수에 담아 '표현'한 것이라 보므로
변수 호이스팅 규칙을 따른다.

console.log(namedFunction())
function namedFunction(){return "함수 선언"}
//함수 선언

console.log(anonymous)
const anonymous = function () {return "함수 표현식"}
//ReferenceError: Cannot access 'anonymous' before initialization