[2주차] 함수에서 this를 사용한다면, 함수의 컨텍스트를 동적으로 지정할 수 있다.

[hoongding]

주제

this를 사용해서 함수의 컨텍스트를 동적으로 지정하고, 확장성을 높일 수 있다.

선정 이유

클로저의 개념과 this의 개념이 합쳐진다면, 함수의 컨텍스트를 동적으로 결정할 수 있고, 이를 통해 함수를 재사용 할 수 있다.
스코프와 실행 컨텍스트, 그리고 this에 대한 정확한 이해가 없다면 이를 이해할 수 없을 것이다.
다시 한 번 리뷰하면 좋을 것 같다!!

책 내용 (p92~94)

[hoongding]

함수는 this 키워드를 통해 실행 컨텍스트에 접근한다.

function classroom(teacher) {
	// study 함수는 외부 스코프에 있는 teacher 변수로 에워싸여져 있다.
    return function study() {
        console.log(
            `${ teacher } says to study ${ this.topic }`
        );
    };
}
var assignment = classroom("Kyle");

assignment();
// Kyle says to study undefined  -- Oops :(

var homework = {
    topic: "JS",
    assignment: assignment
};

homework.assignment();
// Kyle says to study JS
// 이런식으로 assignment 함수를 호출하면 this가 homework 객체가 된다.

var otherHomework = {
    topic: "Math"
};

assignment.call(otherHomework);
// Kyle says to study Math
// call() : 함수를 호출할때 this가 참조하는 객체를 결정하는 메서드

• 위 예시에서, assignment 함수는 this의 참조를 위해 실행 할때 컨텍스트를 필수로 파악해야한다.
• 함수에서 this를 사용하면, 컨텍스트를 동적으로 지정가능하고, 다른 객체에도 해당 함수를 재사용할 수 있기에 매우 유용하다.
• 함수에서 this 를 사용한다면, 함수의 컨텍스트를 동적으로 지정할 수 있다.

[ 스코프 vs 실행 컨텍스트 ]

스코프: 정적(Static)

• 변수가 어떤 것을 참조하는지를 결정하는 규칙 모음 객체(Object)
• 스코프는 JS 엔진 내부에 숨겨져 있음
• 함수를 정의하는 순간, 함수의 스코프에서 사용할 수 있는 한정된 변수 집합을 포함

실행 컨텍스트: 동적(Dynamic)

• 함수가 실행되는 동안 함수에서 사용할 수 있는 프로퍼티를 가진 객체(Object)
• 함수를 정의한 위치나 함수를 호출하는 위치와 상관없이
• 함수를 어떻게 호출하느냐에 따라 실행컨텍스트가 결정된다.