본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

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

어떤 코드도 없는 경우

1. this, 변수들, scope chain 초기화(global context)
   • this : window
   • 변수들 : {}
   • Scope chain : []

• 코드가 없어도 실행 환경(실행 컨텍스트)을 초기화한다.

코드가 있는 경우

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

1. this, 변수들, scope chain 초기화(global context)

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

2. myFunc 함수 초기화

• this : undefined(strict mode)
• 변수들 : {a: 10 b: 20 add: function {...}}
• Scope chain : [global]
• Scope chain의 [global]은 다른 변수를 찾아야할 때 global을 찾아간다는 뜻
• 초기화 전 global context는 사라지는게 아니라 그 위에 쌓이는 거다
• 함수가 끝나면 초기화한 값이 제거되고, 모든 코드가 끝나면 global context도 제거된다.

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

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

1. this, 변수들, scope chain 초기화(global context)

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

2. myFunc 함수 초기화

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

3. 객체 o 초기화

• this : o
• 변수들 : {number: 10}
• Scope chain : [global]
• 객체의 메소드는 해당 객체를 가리킨다.(환경에 따라 변할 수 있다.)

실행 컨텍스트

실행 컨텍스트란?

• 자바스크립트 코드가 실행되는 환경
• 코드에서 참조하는 변수, 객체(함수포함), this 등에 대한 레퍼런스가 있다.
• 전역에서 시작해, 함수가 호출될 때 스택에 쌓이게 된다.

실행 컨텍스트 스택

let a = 10
function f1() {
    let b = 20
    function print(v) { console.log(v) }
    function f2() {
        let c = 30
        print(a + b + c)
    }
    f2()
}
f1()

[사진 첨부 예정]

전역 실행 컨텍스트, 함수 실행 컨텍스트

• 자바스크립트가 실행될 때 전역 실행 컨텍스트(Global Execution Context)가 만들어진다.
• 함수가 실행될 때 함수 실행 컨텍스트(Function Execution Context)가 만들어진다.

this가 가리키는 것

dynamic binding

함수 호출 방법

• 직접 호출 myFunc()
• 메소드 호출 o.method()
• 생성자 호출 function myFunc() {...} const p = new myFunc('elice')
• 간접 호출 setTimeout(p.printName.bind(p), 1000)
• 콜백 함수

this를 조작하는 경우

• bind, call, apply 등의 함수로 this를 조작한다.
• setTimeout은 함수호출과는 다른 콜백호출이다.

화살표함수와 일반함수의 this

화살표함수 vs 일반함수

• 화살표함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
• 일반함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

화살표함수의 dynamic binding

• 화살표함수의 this는 정해지면 바꿀 수 없다.
• setTimeout 등 this가 바뀌는 상황에서 유용하다.

자바스크립트 Closure

클로저

• 함수의 일급객체 성질을 이용
• 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다.
• 함수와 함수가 사용하는 변수들을 저장한 공간을 클로저(Closure)라고 한다.

const Counter() => {
    let count = 0;
    function getcount() {
        return count;
    }
    function increase() { count += 1 }
    return { getcount, increase }
}

ES6 Rest, Spread Operator

Rest Operator

• 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다.
• 함수의 인자 중 나머지를 가리킨다.
• 배열의 나머지 인자를 가리킨다.
• 객체의 나머지 필드를 가리킨다.
• ...을 사용하면 인자들을 배열로 묶는다.(객체는 객체로 묶인다. {})

Spread Operator

• 묶인 배열 또는 객체를 각각의 필드로 변환한다.
• 객체는 또 다른 객체로의 Spread를 지원한다.
• 배열은 또 다른 배열의 인자, 함수의 인자로의 Spread를 지원한다.

let o2 = {...o, name: "Tom", age: 24}    # name과 age가 바뀐다.
let o3 = {name: "Tom", age: 24, ...o}    # ...o로 덮어 씌워진다.

• 순서가 중요하다.