this keyword - 3탄

this에 관하여 내용을 계속 진행하기 전에 JS의 함수에 관하여 한 가지 사실을 알아보자

 

JavaScript 함수(Function)는 함수이기 이전에 Object(객체)이다. 그러기에 자신 고유의 method를 가지고 있다.

 

Function 자체의 proto를 가다 보면 결과적으로 Object가 나온다는 것을 확인 할 수 있다.

 

MDN 웹사이트에서 Javascript Object method를 찾아보면 아래 그림과 같이 수 많은 method들이 있다는 사실을 볼 수 있다.

출처: developer.mozilla.org/en-US/

이렇듯 객체에는 많은 내장 method가 있다. 물론 우리가 상황에 맞게 prototype에 접근하여 우리만의 method를 만드는것 또한 가능하다.

 

자 그러면 이제 다시 this의 세계로 돌아가자!

세 번째로 소개할 방식은 Explicit Binding이라고도 부르는 .call .apply .bind 메소드이다

 

1. Function.prototype.call

 

call 메소드는 단어 그대로 call이 사용된 함수를 실행한다는 뜻이다. 그러기에 통상적으로 위 코드와 같이 call을 생략하고 사용한다.

그렇다면 call은 굳이 몰라도 되는 함수일까? 그것은 아니다!

 

 

출력 결과

 

위 코드를 보면 알 수 있듯이, 하나의 함수를 두 개의 서로 다른 인스턴스가 함께 사용하고 있다. 그리고 각각의 인스턴스의 age를 출력한다. 그리고 각각의 this는 parameter로 주어지는 인스턴스이다. 이와 같이 우리가 코드를 작성하는데 기본적으로 지켜야하는 원칙인 DRY(Don't Repeat Your Code")를 위해서는 call이 아주 유용하게 쓰인다. 여기서 가장 중요한 것은 parameter로 주어지는 값은 바로 this가 될 대상이다! 

 

call 메소드는 한 개의 인자를 받는다

- this의 대상

 

여기서 잠깐!

많은 사람들이 객체(Object)와 인스턴스(Instance)를 혼용하여 사용한다. 용어가 다른 것에는 그 이유가 있다!

 

Object란 말 그대로 하나의 틀을 말한다.

 

출력값

위 코드를 보면 알 수 있듯이 객체는 말 그대로 하나의 틀이다. 인스턴스는 그 객체에 특정 변수가 할당된 것을 말한다. 말이 좀 이상할 수 있다. 쉽게 생각하면 객체는 공장에서 물건을 찍어 내기 위한 하나의 틀, 인스턴스는 그 틀을 통해서 만들어진 각각의 물품이라고 생각하면 된다.  객체가 인스턴스의 개념을 포함하는 격이다.

코드의 마지막 두 줄을 확인하면 알 수 있듯이 human1 과 human2는 Human이라는 객체의 인스턴스이다.

 

2. Function.prototype.apply

 

출력값

위 코드를 보면 알 수 있듯이 printPeopleAge에서 this가 가리키는 대상은 me 이다. 그리고 printPeopleAge.apply의 두 번째 Argument로 하나의 배열을 주었다. 그리고 두 번째 출력은 각 배열 인자의 합이 주어진다.

apply 메소드는 2개의 인자를 받는다

- this 의 대상

- 배열로 이루어진 함수 인자

 

 

3. Function.prototype.bind

지금 까지 call과 apply에 관하여 공부하였다. 이제 마지막으로 bind에 관하여 공부해보자!

위 call과 apply를 자세히 보면 우리는 선언만 하였지 직접적으로 실행을 한 적이 없다. 하지만 모두 자동으로 실행되어 있다. 이것이 bind와 call/apply과의 가장 큰 차이점이다.

 

1.

 

출력값

2.

출력값

위 코드들을 보면 알 수 있듯이 bind는 함수를 실행하지 않고 반환만 해준다. 이것이 call/apply과의 가장 큰 차이이다

bind 또한 this를 첫번째 인자로 받는다!

 

출력값

 

또한 bind는 this 이외에 추가적으로 인자를 받을 수 있다. 하지만 apply와 다르게 배열로 인자를 받지 않고 일반적인 값들로 받는다. 쉽게 생각하면 인자의 갯수에 제한이 없는 것이다.

 

출력값

또한 아래와 같이 Closure를 사용할 수 도 있다

 

 

출력값