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

자바스크립트 코드의 실행

// 어떤 코드도 없는 경우

어떤 코드가 없어도, 세 가지 변수를 만들게 된다.

이 때 this의 경우는 코드가 실행되는 시점의 환경이 가리키는 객체,

즉 window 객체를 가리키게 된다.

 

어떤 변수도 선언되지 않았기 때문에 빈 객체이며,

scope chain은 현재가 최상위의 스코프이므로 연결된 스코프가 없기 때문에 빈 객체이다.

정리

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

 

예시

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

myFunc()

add의 실행컨텍스트이다.

myFunc가 add의 바로 바깥쪽 scope임을 알 수 있다.

 

myFunc가 끝나면, 위의 실행컨텍스트는 제거가 된다.

 

모든 코드가 끝나면, 위의 실행컨텍스트(global)는 제거가 된다.

 

이렇게 실행컨텍스트가 쌓여있는 형태를, Call Stack이라고 말한다.

 

 

정리

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

 

 

예시2

let o = {
    name: 'Daniel',
    method: function(number) {
        return this.name.repeat(number) // 만약 number가 2이면, DanielDaniel 문자열 반환
    }
}

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

myFunc()

myFunc에서 o.method(n) 를 호출하면, 이 때 this는 o가 된다.

scope chain은 myFunc, global이 들어간다.

위 : myFunc 실행 컨텍스트

아래 : global 실행 컨텍스트

 

 

정리

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