🐯 What is 'this' in JavaScript?

this란?

다른 대부분의 객체지향 언어에서의 this

• 클래스로 생성한 인스턴스 객체
  ⇒ 클래스에서만 사용

자바스크립트에서의 this

• 어디서든 사용할 수 있고, 상황에 따라 this가 바라보는 대상이 달라진다.
  ⇒ this의 작동 방식을 이해하지 못하면 문제가 발생했을 때 원인을 찾아 해결하기 어렵다.

• 자바스크립트에서는 함수와 객체(메서드)의 구분이 느슨하다.
  ⇒ this가 이 둘을 구분하는 유일한 기능

상황에 따라 달라지는 this

자바스크립트에서의 this는 실행 컨텍스트가 생성될 때 결정

• 함수를 호출하면?
  • 실행 컨텍스트가 생성된다.
  • this가 결정된다.

⇒ 함수를 어떤 방식으로 호출하느냐에 따라 this 값이 달라진다.

전역 공간에서의 this ⇒ 전역객체!

• 개념상 전역 컨텍스트를 생성하는 주체 === 전역객체
  • 브라우저 환경에서의 전역객체 : window
  • Node.js 환경에서의 전역객체 : global

예제 3-1, 3-2) 전역 공간에서의 this

// 브라우저 환경
console.log(this); // Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}
console.log(window); // Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}
console.log(this === window); // true

// Node.js 환경
console.log(this); // Object [global] {...}
console.log(global); // Object [global] {...}
console.log(this === window); // true

메서드로서 호출할 때 그 메서드 내부에서의 this

함수 실행하는 방법

• 함수로서 호출하는 경우
• 메서드로서 호출하는 경우

함수 vs 메서드

• 미리 정의한 동작을 수행하는 코드 뭉치
• 함수와 메서드를 구분하는 유일한 차이 ⇒ 독립성
• 함수 : 독립적인 기능을 수행
• 메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행

⇒ 자바스크립트는 상황별로 this 키워드에 다른 값을 부여하게 함으로써 이를 구현

"메서드는 객체의 프로퍼티에 할당된 함수일까요?"
= 반맞반틀!

• 함수를 객체의 프로퍼티에 할당한다고 해서 그 자체로서 무조건 메서드가 되는 것은 아니다.
• 객체의 메서드로서 호출하는 경우에는 메서드로 동작, 그렇지 않으면 함수로 동작한다.

예제 3-6) 함수로서 호출, 메서드로서 호출

// 변수 func에 익명함수 할당
var func = function (x) {
  console.log(this, x);
};

func(1); // Window { ... } 1 전역객체 출력

// 변수 obj에 객체 할당
var obj = {
  // 객체의 method 프로퍼티에 func 함수 할당
  method: func
};

obj.method(2); // {method: ƒ} 2

⇒ 변수에 담아 호출한 경우와 객체의 프로퍼티에 할당해서 호출한 경우 this가 달라진다.

'함수로서 호출'과 '메서드로서 호출'을 어떻게 구분할까?

• 함수 앞에 점(.)의 여부로 구분 : 점 표기법, 대괄호 표기법
• 함수를 호출할 때 그 함수 이름(프로퍼티명) 앞에 객체가 명시되어 있는 경우 = 메서드로 호출
• 그렇지 않은 모든 경우 = 함수로 호출

예제 3-7) 메서드로서 호출 - 점 표기법, 대괄호 표기법

var obj = {
    method: function (x) { console.log(this, x); }
};

obj.method(1); // {method: ƒ} 1
obj.['method'](2); // {method: ƒ} 2

메서드 내부에서의 this

this에는 호출한 주체에 대한 정보가 담긴다.

• 함수를 메서드로서 호출하는 경우 호출 주체 = 함수명(프로퍼티명) 앞의 객체
• 점 표기법의 경우 마지막 점 앞에 명시된 객체 = this

예제 3-8) 메서드 내부에서의 this

var obj = {
    methodA: function (x) { console.log(this); },
    inner: {
        methodB: function (x) { console.log(this); },
    }
};

obj.methodA(); // {inner: {…}, methodA: ƒ} ( === obj )
obj.inner.methodB(); // {methodB: ƒ} ( === obj.inner )

함수로서 호출할 때 그 함수 내부에서의 this

함수 내부에서의 this

• 함수를 함수로서 호출할 경우 this는 지정되지 않는다.
  • 함수로서 호출하는 것 = 호출 주체(객체지향 언어에서의 객체)를 명시하지 않고, 개발자가 코드에 직접 관여해서 실행한 것
  • 호출 주체의 정보를 알 수 없다.
• 실행 컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우, this는 전역 객체를 바라본다.
  ⇒ 함수에서의 this는 전역 객체를 바라본다.

메서드의 내부함수에서의 this

• 함수를 메서드로서 호출할 때와 함수로서 호출할 때 this가 무엇을 가리키는지 알고 있다.
  ⇒ 내부함수 또한 이를 메서드로서 호출했는지 메서드로서 호출했는지만 파악하면 this의 값을 알 수 있다.

예제 3-9) 내부함수에서의 this

// obj1 객체 생성
var obj1 = {
    // obj1 객체 내부의 outer 프로퍼티에 익명함수 연결
    outer: function () {
        console.log('outer', this); // obj1 객체 정보가 출력
        
        // innerFunc는 outer 스코프에서만 접근할 수 있는 지역변수
        var innerFunc = function() {
            console.log('innerFunc', this); // Window 객체 정보가 출력
        }
        
        // innerFunc 호출
        innerFunc();
        
        // obj2는 outer 스코프에서만 접근할 수 있는 지역변수
        // 다시 객체 할당
        var obj2 = {
            // obj2 객체 내부의 innerMethod 프로퍼티에 innerFunc와 연결된 익명함수 연결
            innerMethod: innerFunc
        };
        
        // obj2.innerMethod 호출
        obj2.innerMethod(); // obj2 객체 정보가 출력
    }
};

// obj1.outer 호출
obj1.outer();

• obj1.outer 호출

  • obj1.outer 함수의 실행 컨텍스트 생성, 호이스팅, 스코프 체인 정보 수집, this 바인딩
  • 이 함수는 호출할 때 함수명인 outer 앞에 점(.)이 있었으므로 메서드로서 호출한 것
  • 따라서, this에는 마지막 점 앞의 객체인 obj1이 바인딩

• innerFunc 호출

  • innerFunc 함수의 실행 컨텍스트 생성, 호이스팅, 스코프 체인 정보 수집, this 바인딩
  • 이 함수는 호출할 때 함수명 앞에 점(.)이 없으므로 함수로서 호출한 것
  • this가 지정되지 않았으므로 자동으로 스코프 체인상의 최상위 객체인 전역객체(window) 바인딩

• obj2.innerMethod 호출

  • obj2.innerMethod 함수의 실행 컨텍스트 생성
  • 이 함수는 호출할 때 함수명인 innerMethod 앞에 점(.)이 있었으므로 메서드로서 호출한 것
  • 따라서, this에는 마지막 점 앞의 객체인 obj2가 바인딩

• innerFunc 호출과 obj2.innerMethod 호출

  • 같은 함수임에도 바인딩되는 this의 대상이 서로 다르다.

⇒ this 바인딩은 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지 등)은 중요하지 않고, 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기의 여부가 중요

예제 3-9 출력 결과)

호출 주체가 없을 때는 자동으로 전역객체를 바인딩하지않고, 호출 당시 주변 환경의 this를 그대로 상속받아 사용할 수 있다면?

• 변수를 검색하면 우선 가장 가까운 스코프의 L.E를 찾고, 없다면 상위 스코프를 탐색한다.
• this도 현재 컨텍스트에 바인딩된 대상이 없으면 직전 컨텍스트의 this를 바라보도록 할 수 없을까?

⇒ ES5까지는 자체적으로 내부함수에 this를 상속할 방법은 없으나 우회하는 방법은 있다.

메서드의 내부 함수에서의 this를 우회하는 방법

예제 3-10) 내부함수에서의 this를 우회하는 방법 - 변수 활용

• 변수에 상위 스코프의this를 저장해서 내부함수에서 활용

var obj = {
    outer: function () {
        console.log('outer', this); // obj 객체 정보가 출력
        
        var innerFunc1 = function() {
            console.log('innerFunc1', this); // Window 객체 정보가 출력
        }
        
        innerFunc1();
        
        // outer 스코프에서 self라는 변수에 this를 저장
        var self = this;
        var innerFunc2 = function() {
            console.log('innerFunc2', self); // obj 객체 정보가 출력
        }
        
        innerFunc2();
    }
};

obj.outer();

예제 3-10 출력 결과)

this를 바인딩하지 않는 함수

• 함수 내부에서 this가 전역객체를 바라보는 문제를 보완하기 위해, ES6에서는 this를 바인딩하지 않는 화살표 함수를 도입
• 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정이 빠짐
  ⇒ 상위 스코프의 this를 그대로 활용 가능
• 내부함수를 화살표 함수로 바꾸면 변수를 활용한 this 우회법이 불필요하다.

  (ES5 환경에서는 화살표함수를 사용할 수 없음)

예제 3-11) this를 바인딩하지 않는 함수(화살표 함수)

var obj = {
    outer: function () {
        console.log(this); // {outer: ƒ}
        
        var innerFunc = () => {
            console.log(this); // {outer: ƒ}
        };
        
        innerFunc();
    }
};

obj.outer();

예제 3-11 출력 결과)

콜백 함수 호출 시 그 함수 내부에서의 this

• 콜백 함수 : 함수 A의 제어권을 다른 함수(또는 메서드) B에게 넘겨주는 경우, 함수 A를 콜백 함수라고 한다.
  ⇒ 함수 A는 함수 B의 내부 로직에 따라 실행
  ⇒ this 역시 함수 B 내부 로직에서 정한 규칙에 따라 값이 결정

콜백 함수도 함수이므로 기본적으로 this가 전역객체를 참조하지만, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우 그 대상을 참조

콜백 함수에서의 this의 예제는 콜백 함수: 제어권 - this 예제 4-6에 정리해 두었습니다.

• 콜백 함수의 제어권을 가지는 함수(메서드)가 콜백 함수에서의 this를 무엇으로 할지 결정
• 특별히 정의하지 않은 경우, 전역객체를 참조

생성자 함수 내부에서의 this

• 생성자 함수 : 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수
• 객체 지향 언어에서
  • 생성자 = 클래스(class)
  • 클래스를 통해 만든 객체 = 인스턴스(instance)
• 생성자는 구체적인 인스턴스를 만들기 위한 일종의 틀
  ⇒ 해당 클래스의 공통 속성들이 미리 준비되어 있고, 여기에 구체적인 인스턴스의 개성을 더해 개별 인스턴스를 만들 수 있다.
• 자바스크립트는 함수에 생성자로서의 역할을 함께 부여
• new 명령어로 함수를 호출
  ⇒ 해당 함수가 생성자로서 동작
  ⇒ 생성사 함수로서 호출 된 경우, 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이 된다.

예제 3-13) 생성자 함수

// 변수 Cat에 익명 함수 할당
var Cat = function (name, age) {
    // 함수 내부에서 this로 접근 
    // bark, name, age 프로퍼티에 각각 값을 대입
    this.bark = '야옹';
    this.name = name;
    this.age = age;
};

var choco = new Cat('초코', 7);
var nabi = new Cat('나비', 5);

console.log(choco, nabi); // 각각 Cat 클래스의 인스턴스 객체가 출력

예제 3-13 출력 결과)

명시적으로 this를 바인딩하는 방법

• 상황에 따라 this에 바인딩 되는 값의 규칙이 존재
  ⇒ 이러한 규칙을 깨고 this에 별도의 대상을 바인딩 하는 방법도 존재

call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

임의의 객체를 this로 지정 가능

• 메서드의 호출 주체인 함수를 즉시 실행
• 첫 번째 인자(=thisArg)를 this에 바인딩
• 이 후의 인자들(arg1, arg2, ...)은 호출할 함수의 매개변수

예제 3-14) call 메서드

// 함수.call 메서드
var func = function (a, b, c) {
    console.log('func: ', this, a, b, c)
}

func(1, 2, 3); // func: Window { ... } 1 2 3
func.call({ x:1 }, 4, 5, 6); // func: {x: 1} 4 5 6

// 객체의 메서드.call 메서드
// 메서드에 대해서도 임의의 객체를 this로 지정 가능
var obj = {
    a: 1,
    method: function (x, y) {
        console.log('obj.method: ', this.a, x, y);
    }
}

obj.method(2, 3); // obj.method: 1 2 3
obj.method.call({ a: 4 }, 5, 6); // obj.method: 4 5 6

예제 3-14 출력 결과)

apply 메서드

Function.prototype.apply(thisArg[, argsArray])

• call 메서드와 기능적으로 동일
• 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정

예제 3-16) apply 메서드

// 함수.apply 메서드
var func = function (a, b, c) {
    console.log('func: ', this, a, b, c)
}

func.apply({ x:1 }, [4, 5, 6]); // func: {x: 1} 4 5 6

// 객체의 메서드.apply 메서드
var obj = {
    a: 1,
    method: function (x, y) {
        console.log('obj.method: ', this.a, x, y);
    }
}

obj.method.apply({ a: 4 }, [5, 6]); // obj.method: 4 5 6

예제 3-16 출력 결과)

call / apply 메서드의 활용사례

유사배열객체(array-like object)에 배열 메서드를 적용

유사배열객체 : 키가 0 또는 양의 정수인 프로퍼티가 존재하고 length 프로퍼티의 값이 0 또는 양의 정수인 객체, 배열의 구조와 유사한 객체

• 객체에는 배열 메서드를 직접 적용할 수 없다.
• 유사배열객체의 경우 call / apply 메서드를 이용해 모든 배열 메서드 적용 가능
• ES6에서는 유사배열 객체 또는 순회 가능한 모든 종류의 데이터 타입을 배열로 전환하는 Array.from메서드를 도입

생성자 내부에서 다른 생성자를 호출

• 생성자 내부에 다른 생성자와 공통된 내용이 있을 경우, call / apply 메서드를 이용해 다른 생성자를 호출하여 반복을 줄일 수 있다.

여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 - apply 활용

• 여러 개의 인수를 받는 메서드에 하나의 배열로 인수를 전달할 때 apply 메서드 사용

예제 3-23) call / apply 메서드의 활용 - Math.max /Max.min 에 apply 적용

var numbers = [10, 20, 3, 16, 45];
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
console.log(max, min); // 45 3

⇒ call / apply 메서드는 명시적으로 별도의 this를 바인딩하면서 함수 또는 메서드를 실행하는 좋은 방법이지만 오히려 this를 예측하기 어려움
(ES5 이하의 환경에서는 다른 대안이 없으므로 실무에서 광범위하게 활용)

bind 메서드

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

• ES5에서 추가된 기능
• call과 비슷하지만 즉시 호출하지 않고, 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환
• 새로운 함수를 호출할 때 인수를 넘기면 그 인수들은 기존 bind 메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록된다.
• bind 메서드의 목적
  • 함수에 this를 미리 적용하는 것
  • 부분 적용 함수를 구현하는 것

예제 3-25) bind 메서드 - this 지정과 부분 적용 함수 구현

var func = function (a, b, c, d) {
    console.log(this, a, b, c, d);
};

func(1, 2, 3, 4); // Window{ ... } 1 2 3 4

// 변수 bindFunc1에 func에 this를 { x: 1 }로 지정한 새로운 함수를 선언
var bindFunc1 = func.bind({ x:1 });
bindFunc1(5, 6, 7, 8); // {x: 1} 5 6 7 8

// 변수 bindFunc2에 func에 this를 { x: 1 }로 지정 
// 앞에서부터 두 개의 인수로 각각 4, 5로 지정한 새로운 함수 선언
var bindFunc2 = func.bind({ x:1 }, 4, 5);
bindFunc2(6, 7); // {x: 1} 4 5 6 7
bindFunc2(8, 9); // {x: 1} 4 5 8 9

• bindFunc1의 bind: this만 지정
• bindFunc2의 bind: this 지정과 부분 적용 함수 구현

name 프로퍼티

• bind 메서드를 적용해서 새로 만든 함수는 name 프로퍼티에 'bound'라는 접두어가 붙음
• 원본 함수에 bind 메서드를 적용한 새로운 함수라는 의미이므로 call / apply보다 코드 추적이 쉬워진다.

예제 3-26) name 프로퍼티

var func = function (a, b, c, d) {
    console.log(this, a, b, c, d);
};

var bindFunc = func.bind({ x:1 }, 4, 5);

console.log(func.name); // func
console.log(bindFunc.name); // bound func

예제 3-26 출력 결과)

상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달하기

• 변수를 활용한 내부함수에서의 this를 우회하는 방법
  ⇒ call, apply, bind 메서드 이용하기

예제 3-27) 내부함수에 this 전달 - call, bind

// call 메서드
var obj = {
    outer: function () {
        console.log(this);
        
        var innerFunc = function () {
            console.log(this);
        };
        
        innerFunc.call(this);
    }
};

obj.outer();

// bind 메서드
var obj = {
    outer: function () {
        console.log(this);
        
        var innerFunc = function () {
            console.log(this);
        }.bind(this);
        
        innerFunc();
    }
};

obj.outer();

화살표 함수의 예외사항

화살표 함수

• ES6에서 새롭게 도입
• 실행 컨텍스트 생성 시 this를 바인딩하는 과정이 제외
  ⇒ 화살표 함수 내부에는 this가 없으며, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근

예제 3-29) 화살표 함수 내부에서의 this

• 예제 3-27의 내부함수를 화살표 함수로 변경
  ⇒ 별도의 변수로 this를 우회하거나 call, apply, bind를 적용할 필요가 없다.

var obj = {
    outer: function () {
        console.log(this);
        
        var innerFunc = () => {
            console.log(this);
        };
        
        innerFunc();
    }
};

obj.outer();

예제 3-29 출력 결과)

별도의 인자로 this를 받는 경우 (콜백 함수 내에서의 this)

• 콜백 함수를 인자로 받는 메서드 중 일부는 추가로 this로 지정할 객체(thisArg)를 인자로 지정할 수 있는 경우가 있다.
  ⇒ thisArg 값을 지정하면 콜백 함수 내부에서 this 값을 원하는 대로 변경 가능

예제 3-31) 콜백 함수와 함께 thisArg를 인자로 받는 메서드

Array.prototype.forEach(callback[, thisArg])
Array.prototype.map(callback[, thisArg])
Array.prototype.filter(callback[, thisArg])
Array.prototype.some(callback[, thisArg])
Array.prototype.every(callback[, thisArg])
Array.prototype.find(callback[, thisArg])
Array.prototype.findIndex(callback[, thisArg])
Array.prototype.flatMap(callback[, thisArg])
Array.prototype.from(arrayLike[, callback[, thisArg]])
Set.prototype.forEach(callback[, thisArg])
Map.prototype.forEach(callback[, thisArg])

정리

명시적 바인딩이 없는 경우

• 전역공간에서의 this는 전역객체를 참조
• 함수를 메서드로서 호출한 경우, this는 메서드 호출 주체(메서드 명 앞의 객체)를 참조
• 함수를 함수로서 호출한 경우, this는 전역객체 참조 (메서드의 내부함수에서도 동일)
• 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우 전역객체 참조
• 생성자 함수에서의 this는 생성될 인스턴스를 참조

명시적 this 바인딩

• call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출
• bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듦
• 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.

참고

• 코어 자바스크립트 - 03_this

---

마무리

• 이 전에 콜백 함수에 대해 정리한 글을 올린 후, 스터디 팀원의 this에 대한 발표를 듣게 되었다.
• 팀원의 발표가 너무 좋았다. 이해 쏙쏙-
  ⇒ 나는 발표할 때 버벅거리고 발표 중간에 진행이 끊기기도 했었는데 나와 다르게 스무스한 진행 너무 멋져~
• 콜백 함수와 연결된 내용들이 많아 this에 대해 먼저 글을 올려야겠다 하고 내용 정리를 시작했는데 생각보다 내용이 많아서 시간이 오래걸렸다.
  ⇒ 정리 완료하니까 뿌!듯!