호이스팅

https://youtu.be/EWfujNzSUmw

이 동영상 참고했음

 

console.log(a) // undefined - 에러는 안남

var a = 1

console.log(a) // 1

에러 안나는 이유? 호이스팅 때문

호이스팅 - 선언문이 마치 최상단에 끌어올려진 듯한 현상

실제로 끌어올리는게 아니라 자바스크립트 엔진이 변수같은 선언문이 있는 코드라인을

실행컨텍스트 안에 미리 기록해놓기 때문임

이때 기록해놓는 곳이 Record(Environment Record) - 식별자와 식별자에 바인딩된 값을 기록

---

변수 호이스팅

 

코드가 실행되면 JS는 일단 전역 컨텍스트를 실행시켜서 이게 콜스택에 들어감

-이후 선언할게 있는지 찾아보고 있다면 먼저 선언해두고 record에 기록해둠

위의 코드에서 보면 a 라는 값을 선언한걸 보고 record에 {a : undefined}라고 저장해둠 ( undefined인 이유는 var니깐 )

 

이렇게 코드를 실행하기 전에 한번 싹 스캔해서 선언문만 실행해서 record에 기록하는 단계를 생성 단계(Creation Phase)

실행 context 생성 - 선언문 실행 - record에 기록

 

이후에 이제 나머지 코드를 위에서 밑으로 가면서 실행하고 콜스택에 넣고 뭐뭐 하는걸 실행 단계라고 하고

필요한 경우 생성 단계에서 레코드를 참조하거나 업뎃해줌

위의 코드에서 보면

console.log(a)를 실행 - a가 뭔지 record를 참조해서 undefined를 출력해주고 콜스택에서 빠지고

var a = 1 - a의 값을 1로 업뎃해주고

이후 이제 a의 값은 1이 되는거

var대신 const,let을 쓰면 ? 

아까 var는 a : undefined로 저장이 되었지만 const let은 a를 기록해두긴 하지만 값을 초기화하진 않음(값을 등록하진 않는단소리)

만약에 저 맨위 코드를 const,let으로 했다면 콘솔에는 오류가 찍힘

const let은 선언 이전에 식별자를 참조할 수 없음(뭔가 값이 들어가있지 않다는 소리)

 

여기서 용어를 조금 보면

선언 - 메모리 공간을 확보하고 메모리 주소를 식별자와 연결 {a          }

초기화 - 식별자에 암묵적으로 undefined 값 바인딩 {a : undefined}

var는 저 두개가 동시에 이루어졌기 때문에 선언한거 위에 코드에서도 a를 쓸 수는 있음

const,let은 선언만 해줌 - 값을 할당하기 전까지는 그냥 아무 값도 없는거임

이렇게 값을 할당하기 전까지의 코드를 일시적 사각지대라고 함

---

함수 호이스팅

 

A()

var A = () => {    } 

 

• JS에서는 함수를 변수에다 담을 수 있음
• 위에서 본것같이 처음 record에 {A : undefined}로 기록되고 이후 study()가 실행되면 에러가 남
• 왜 ? undefined를 실행할순 없으니깐 // type error
• const let도 오류나는건 똑같지만 reference error(참조오류)가 발생함
• 이렇게 변수에 함수를 담아서 선언하는걸 함수 표현식(Function Expression)이라고 하고 , 이것도 그냥 const a = 1처럼 1 대신 함수를 넣은것 뿐이기 때문에 변수랑 똑같이 작용함(호이스팅도 똑같이 된단 소리)
• function A(){    }로 선언하면 ? 맨 처음부터 record에 완벽하게 기록해줌 
• 이러한 방식을 함수 선언문(Function Declaration)이라 하고, 선언과 동시에 함수가 생성되어 선언 전 코드에서도 자유롭게 사용 가능함