[JavaScript] 자바스크립트 함수가 실행되는 과정

🎯 자바스크립트 함수가 실행되는 과정

• 스코프 : 코드가 현재 실행되는 환경, 맥락
• 실행 컨텍스트 : 스코프 체인, this 포인터, variable objects

 

📝 자바스크립트 코드의 실행 1

• 자바스크립트 엔진은 코드가 없어도 실행 환경(실행 컨텍스트, Execution Context)을 초기화한다.
• 스코프(scope)는 코드가 현재 실행되는 환경, 맥락(context)을 의미한다.
• this 포인터, 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다.
• this 포인터 경우, 글로벌 스코프에서는 window를 가리킨다.

// 어떤 코드도 없는 경우

• 자바스크립트 엔진은 어떠한 코드가 없어도 변수 3개를 초기화한다.
  • this
  • 변수들(Variable Object)
  • Scope chain
• this는 코드가 실행되는 시점의 환경이 가리키는 객체를 의미
  • 아무것도 없으면 window 객체를 가리킨다.
  • window객체는 브라우저에서 최상위 스코프에 존재하는 객체이다.

 

📝 자바스크립트 코드의 실행 2

• 함수가 실행되면, 함수 스코프에 따라 환경이 만들어진다.
• this, 함수 스코프의 변수들, 그리고 스코프 체인이 형성된다.
• 스코프 체인을 따라 글로벌 환경에 도달한다.

function myFunc() {
    let a = 10;
    let b = 20;
    function add(first, second) {
        return first + second;        
    }
    return add(a, b)
}

myFunc();

코드가 없을 때

 

myFunc 함수가 실행되었을 때

• variable object에 myFunc의 변수가 들어간다.
• 실행 컨텍스트가 새롭게 만들어지면 기존 실행 컨텍스트(global)는 남아있다.
• myFunc 실행이 끝나면 맨 위의 실행 컨텍스트는 제거되고, 모든 코드가 끝나면 global 컨텍스트도 제거된다.
• 실행 컨텍스트가 쌓이는 로직은 스택 구조로 구성되어 있다.
• call stack : 실행 컨텍스트가 쌓이면서 구성되는 것
• scope chain은 이전 실행 컨텍스트를 가리켜서 만약 다른 변수를 찾아야 할 때 scope chain을 따라서 변수를 검색하거나 접근한다.
• 따라서 myFunc 함수가 모두 끝나면 global scope로 돌아간다.

 

add 함수 함수가 실행되었을 때

• 인자로 넘긴 a, b가 first, second

 

📝 자바스크립트 코드의 실행 3

• 객체의 메서드의 경우, 메서드 환경의 this는 해당 객체를 가리키게 된다.
• 하지만 this가 가리키는 것은 환경에 따라 변할 수 있다.

let o = {
    name: 'Daniel',
    method: function (number) {
        return this.name.repeat(number);
    }
}

function myFunc() {
    let n = 10;
    return o.method(n);
}

myFunc()

global 실행 컨텍스트 - 처음

 

myFunc가 실행되어서 만들어진 실행 컨텍스트

 

myFunc에서 o.method가 호출되었을 때