너무 재미있는 예제로 알아보는 실행컨텍스트

 

function hello () {
    hi = 0
    console.log(hi)
}

hello() // 0
console.log(hi) //0

function hello () {
    hi = 0
    console.log(hi)
}

console.log(hi) // ReferenceError: hi is not defined
hello()

😎먼저 function execute context에서

var,let,const등의 키워드를 사용하지 않고 냅다 값을 할당해주는 경우
값을 할당받은 무언가는.. Glboal스코프를 가집니다.
즉 함수 스코프마저 초월한 무언가가 되어 전역 변수로 동작하게된다는 뜻입니다.

그것을 알고 다시 위 예제를 보겠습니다.
어째서 호출한 다음에 전역에서 console.log()를 찍어보면
정상적으로 값이 출력되고

호출보다 console.log()를 먼저하면 레퍼런스 에러가 발생하는 것일까요?
함수 선언보다 console.log()를 먼저한것도 아닌데 말이죠!

---

😎 실행컨텍스트의 관점에서 보자..

모던 자바스크립트 딥다이브를 보면
자바스크립트 파일이 엔진에 의해 평가되고 실행될 때는 다음과 같은 방식을 따릅니다.

1. 전역 코드 평가
이 때 소스코드 평가 과정에서 선언문만 먼저 실행됩니다.
따라서 전역 변수 선언문과, 함수 선언문이 실행되고 전역 변수,함수가 전역 스코프에 등록된다.
또한 이때 var 키워드로 선언된 전역 변수와 함수는 전역 객체의 프로퍼티와 메서드가 된다.

2. 전역 코드 실행
이 때 전역코드가 순차적으로 실행된다. 전역변수에 값이 할당되고 함수가 호출된다.
함수가 호출되면 전역 코드의 실행을 일시 중단하고
코드 실행 순서를 변경해 함수 내부로 진입합니다.

3. 함수 코드 평가
이때 함수 내부의 코드들을 평가하며
매개변수와 지역변수가 선언되고 지역 스코프에 등록됩니다.

4. 함수 코드 실행
이때 함수 코드가 순차적으로 실행됩니다.

---

😎여기서 알 수 있는 점은?

함수 내부의 코드들은 그 함수가 호출되어서 함수 코드가 평가되어야
비로소 동작한다는 것입니다.

만약 그렇지않고 함수 내부의 코드들을 모두 전역 평가 시점에
지역변수, 전역변수를 만들어둔다면...
호출없이 console.log()를 해도 값이 출력되어야했겠죠..?

물론 이게 이유가 아닐수도있습니다만
전 이렇게 생각하기로했습니다 그럼 20000

---