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

어떤 코드도 없이 자바스크립트가 실행되는 경우

자바스크립트는 어떤 코드가 없어도 3가지 변수를 초기화하게 된다.

• this 
• 변수들(Variavble Object)
• Scope chain 

this 경우는 코드가 실행되는 환경의 시점 

만약에 console.log(this)가 실행된다면 this는 window객체를 가리키고 나머지 값은 빈 값을 가리키게 된다.

정리 : 

• 자바스크립트 엔진은 코드가 없어도 실행환경(실행 컨텍스트 Execution Context)을 초기화한다.
• 스코프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()

1. 함수 myFunc가 존재한다.
2. 변수 a 의 값은 정수 10
3. 변수 b의 값은 정수 20 
4. 두 개의 변수(first, second)를 받는 함수 add가 존재한다
5. 두 개의 변수를 더한 값을 리턴한다.
7. myFunc가 변수 a, b 를 add에 넘기고 add에서 계산된 값을 리턴한다.
9. myFunc를 호출한다.

자바스크립트 엔진은 코드의 첫 번째 줄이 실행되기 전에 최상위 컨텍스트(global)

• this : window
• 변수들(Variable Object) : {myFunc : function(){...} }
• Scope chain : []

를 생성한다.

myFunc가 실행되게 되면 만들어지는 실행 컨텍스트는 다음과 같다.

• this : undefined(strict mode)
• 변수들(Variable Object) : { a: 10 b:20 add:function{...}}
• Scope chain : [global] 

함수 addd가 실행되면 만들어지는 실행 컨텍스트는 다음과 같다.

• this : undefied
• 변수들(Variable Object) : { first  :10 scond : 20 }
• Scope chain : {myFunc, global}

위 컨텍스트들은 myFunc 함수의 실행이 끝난다면 지워진다.

call stach -> 실행 컨텍스트가 쌓이면서 실해되는 구조 

정리:

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

---

객체가 있고 객체의 메소드를 호출하는 경우 

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

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

    myFunc()

01. o 라는 이름의 객체가 존재한다.
02~03. 객체 안에는 name과 method가 존재한다. 이 때, method는 이 객체의 함수이고 name은 객체의 필드이다.
04. nethod는 숫자(number)를 받아서 repeat(문자열 객체의 함수)이란 함수의 인자로 넘긴다.
[number가 3 이라면 DanielDanielDaniel나타낸다(문자열의 숫자만큼 반복해서 새로운 문자열을 나타냄]
10. 함수 myFunc에서 method를 호출한다. 이 때 넘겨주는 값은 10 이다. 
13.muFunc를 호출한다

첫 번째로 global 실행 콘텍스트가 만들어진다.

• this : window
• 변수들(Variable Object) : { o : {...}, myFunc : function(){...} }
• Scope chain : []

두 번째로 myFunc의 실행 콘텍스트가 만들어진다.

• this : undefined
• 변수들(Variable Object) : { n:10 }
• Scope chain : [global]

세 번째로 myFunc에서 호출한 o.method 실행 콘텍스트가 만들어진다.

• this : o
• 변수들(Variable Object) : { number : 10 }
• Scope chain : [global]

정리 :

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