함수의 암시적 파라미터 - this #3

함수의 암시적 파라미터는 4편으로 이루어져 있습니다.

1. arguments
2. this-1
3. this-2
4. this-3

들어가며

이번 포스팅에서는 이전장에 이어서 call 및 apply를 통한 호출을 알아보겠습니다.

1. 함수로서 호출
2. 메서드로서 호출
3. 생성자로서 호출
4. call 및 apply를 통한 호출

함수 컨텍스트

지금까지 살펴본 함수 호출 방법들의 주요 차이점은 실행 중인 함수에 전달된 암시적 파라미터인 this에 의해 참조되는 함수 컨텍스트가 다르다는 것입니다.

우리가 원하는 대로 함수 컨텍스트를 만들고 싶다면 어떻게 해야 할까요?

왜 우리가 원하는 대로 함수 컨텍스트를 만들고 싶어 하는지 아래 예제를 통해 확인해 봅시다.

function junggle() {
  const numbers = [...arguments]
  const result = numbers.reduce((acc, current) => acc + current)
  this.result = result
  console.log(this)
}
junggle([1, 2, 3])

위 코드는 글로벌 스코프에서 함수를 호출했기 때문에 this는 window 객체가 됩니다.

만약에 이 juggle 함수의 result라는 속성을 내가 원하는 객체의 속성으로 할당하려면 어떻게 해야 할까요?

apply, call

자바스크립트는 함수를 호출하고 함수 컨텍스트로 원하는 객체를 명시적으로 지정할 수 있는 수단을 제공합니다.

모든 함수에 대해 존재하는 두 가지 방법인 apply 및 call 중 하나를 사용하여 이를 수행합니다.

apply 메서드를 사용하여 함수를 호출하려면 apply에 두 개의 파라미터를 전달해야 합니다.

1. 함수 컨텍스트로 사용할 객체
2. 호출 인수로 사용할 값의 배열입니다.

call 메서드를 사용하여 함수를 호출하려면 apply와 마찬가지로 두 개의 파라미터를 전달합니다.

1. 함수 컨텍스트로 사용할 객체
2. 호출 인수로 사용할 값의 목록입니다.

1번은 똑같고 2번의 차이인데요 아래 예제 코드로 살펴봅시다.

function junggle() {
  const numbers = [...arguments]
  const result = numbers.reduce((acc, current) => acc + current)
  this.result = result
}

const ninja1 = {}
const ninja2 = {}

junggle.apply(ninja1, [1,2,3,4]); // 값의 배열
junggle.call(ninja2, 5,6,7,8); // 값의 목록

console.log(ninja1.result) // 10
console.log(ninja2.result) // 26

junggle이라는 함수에서 this.result에 arguments들의 합을 저장합니다.

그런 다음 함수 컨텍스트로 사용할 두 개의 객체 ninja1, ninja2를 설정합니다.

ninja1에는 값 배열을 넘기고 ninja2에는 값 목록을 넘깁니다.

함수의 컨텍스트와 인수를 제공한 후 값을 확인하면 ninja1, ninja2에 result라는 속성과 값이 잘 할당되었습니다.

결과는 jsfiddle에서 확인해 주세요!

마치며

이번장을 마지막으로 함수의 암시적 파라미터인 arguments와 this가 마무리되었습니다.

다음 편에는 실무에서 자주 실수하고 알게 모르게 넘어가는 예제 하나를 설명해 드릴려고 합니다.

다음 편도 기대해 주세요.

감사합니다.

참고문서

• Secrets of the JavaScript Ninja(second edition)
• 모질라 apply
• 모질라 call