자바스크립트 실행컨텍스트의 역할(렉시컬환경-평가,실행,스코프 등록)

렉시컬환경과 실행컨텍스트 스택으로 관리하는 실행컨텍스트는

전역코드를 평가하고->전역코드를 실행하고-> 함수 코드를 평가하고->함수 코드를 실행하는 순서로 진행된다.

const numberTen = 10;
const numberFive = 5;

function addNumber(parameter) {
    const numberTen = 10;
    const numberFive = 5;

    console.log(parameter + numberTen + numberFive);
}

addNumber(100);

console.log(numberTen + numberFive);

1. 전역 코드 평가

전역 소스코드에 평가 과정을 거치면서 numberTen,numberFive, 그리고 addNumber의 선언문만 먼저 평가한다. 그리고 생성된 전역 변수numberTen,numberFive 그리고 addNumber가 실행컨텍스트가 관리하는 전역 스코프에 등록된다. var 키워드로 선언된 전역변수, 함수 선언문으로 정의된 함수는 전역 객체의 프로퍼티와 메서드가 된다.

const numberTen
const numberFive

function addNumber(parameter) {


}

2. 전역 코드 실행

전역 코드 평가과정이 끝나면 런타임이 시작되서 코드가 순차적으로 실행된다. 선언된 전역변수 numberTen에 숫자 10을 할당하고, numberFIve에는 숫자 5를 할당한다. addNumber 함수 호출문을 만나면 전역 코드의 실행을 일시 중단하고 함수 안으로 진입한다.

const numberTen = 10;
const numberFive = 5;

function addNumber(parameter) {

}

addNumber(100);

console.log(numberTen + numberFive);

3. 함수 코드 평가

함수가 호출되면 순차적으로 읽어내려가던 실행 순서를 바꿔서 호출된 함수 내부로 이동한다.

그리고 함수 스코프 내에 선언된 식별자들을 평가한다.

지역변수 선언문이 실행되고, 지역 변수는 지역스코프에 등록된다. 그리고 함수 선언문으로 선언된 함수 내부에는 arguments 객체가 생성되서 지역스코프에 등록되고, this 바인딩도 결정된다.

const numberTen = 10;
const numberFive = 5;

function addNumber(parameter) {
    //함수 선언문은 유사배열객체 arguments가 숨겨져있음 console.log로 찍어보면 나옴
    const numberTen
    const numberFive

    console.log(parameter + numberTen + numberFive);
}

addNumber(100);

console.log(numberTen + numberFive);

4. 함수 코드 실행

평가가 끝나면, 마찬가지로 지역 변수 numberTen에 숫자 10이 할당되고, numberFive에 숫자 5가 할당된다.

그리고 console.log메서드가 호출된다

console.log를 호출하려면 식별자 console을 해당 스코프 내에 있는지부터 찾는다. 지역 스코프 안에 console은 없지만, 전역 객체에 프로퍼티로 존재한다. 그래서 전역(window or global)에서 console을 검색하고 log프로퍼티를 console 객체의 프로토타입 체인을 통해 검색한다. 그리고 인자에 전달되는 표현식 parameter+numberTen+numberFive가 평가된다. 이 식별자들은 스코프 체인으로 검색한다. 같은 스코프내에 있으면 그 식별자를 참조하고 상위 스코프로 또 찾으러 가지 않는다. 메서드 실행이 종료되면 함수를 탈출하고 전역코드를 계속 실행한다.

또 console이 나오면 이번엔 전역스코프에 전역객체에서 console을 찾아 log 프로퍼티를 프로토타입 체인으로 검색한다. 그리고 numberTen+numberFive 표현식을 평가하는데, 이때는 같은 스코프상에 있는 전역변수 numberTen과 numberFive를 참조한다.

const numberTen = 10;
const numberFive = 5;

function addNumber(parameter) {
    const numberTen = 10;
    const numberFive = 5;

    console.log(parameter + numberTen + numberFive);
}

addNumber(100);

console.log(numberTen + numberFive);

1. 전역 코드 평가(전역 스코프 등록)

2. 전역 코드 실행(변수에 할당)

3. 함수 코드 평가(지역 스코프에 등록)

4. 함수 코드 실행(지역 변수에 할당)

 

변수 선언한다고 바로 할당되는게 아닌,

평가와 실행단계를 거쳐서 선언, 할당이 나눠서 진행된다. 그 사이에 어떤 스코프에서 관리할지 스코프에 따라 등록된다는게 중요!