TIL - Declaration & Hoisting

호이스팅에 대해서 알아보자

우선 호이스팅에 대해서 알기위해서는 자바스크립트 파일의 코드가 어떤과정으로 실행되는지 알아야한다

1. 코드가 실행되면 우선 선언된 변수와 함수들을 모아 객체로 만든다
2. 메모리상에서는 선언된 변수와 함수가 할당되고 이름이 포인터가 된다
3. 해당 이름으로 함수가 호출되면 함수가 실행된다

함수 선언식

[0] sayHi() // hi가 로그로 찍힌다

[1] fucntion sayHi() {
	console.log('hi')
    }

[2] console.log(name) // undefined
[3] let name = 'Peter'
[4] console.log(name) // Peter이 로그로 찍힌다

1. 선언된 모든 변수와 함수를 모아서 객체로 만든다.
2. 메모리상에 key를 포인터로 한 value가 할당된다.
3. [0]에서 sayHi라는 포인터로 메모리상에 할당된 함수를 호출해서 사용한다

여기서 [3]에서의 name이라는 변수는 name이라는 변수 그 자체만 메모리상에 할당되고 'Peter'이라는 값의 주소를 가진다 그래서 [2]에서 name을 호출(?)했을 때 메모리상에 'undefined'된 name을 가져온 것이다. 왜냐하면 2. 에서 메모리상에 선언된 것만 할당하기 때문이다.
[3]에서는 정의 된 값인 Peter의 주소를 name을 호출해서 가져왔다

함수 표현식

sayHi() // TypeError: b is not a function

sayHi = () => console.log(hi)

메모리상에 저장된 익명 함수를 sayHi라는 선언된 변수(또다른 메모리에 있는)에 주소를 참조하도록 하는 것이다.

그래서 sayHi라는 변수는 자바스크립트 파일이 실행되면 제일먼저 객체가 되고 메모리상에 올라간다. 하지만 그 안에 있는 주소는 올라가지 않기 때문에 선언식 함수(함수 자체를 value로 가지는 이름이 있는 함수)와 익명함수가 대입되고 난 후에 사용할 수 있다.