Javascript / 함수 / call, apply의 활용 ( .map.call(.filter.call), Math-apply)

 

call, apply, bind의 기본 개념은 이전 글에서 확인할 수 있다.

Javascript / 함수 / call, apply, bind

Javascript / 함수 / call, apply, bind

 

이번에는 call, apply를 적용하는 사례들을 알아보자.

call, apply는 어떤 객체에 포함되어 있는 method를 간접적으로 활용하기 위해서도 사용된다. 아래 두 가지 예시를 보자.

 

 

 

---

 

1. Math method에 apply 함수 적용

 

기초 과정에서 배울 수 있는 Math method는 보통 아래와 같은 문법으로 사용된다.

 

Math.max(...인자들)

 

여기서 ...인자들(Arguments)은 숫자들을 나열한 형태가 되어야만 한다. 그렇지 않고 우리가 익숙한 배열을 입력하게 되면 원하는 결과를 출력할 수 없게 된다. 이것은 Math method가 인자들을 받아오는 형식이 정해져있기 때문이다.

 

Math.max(12,345,6789)
6789
 
let nums = [12, 345, 6789]
Math.max(nums)  // 결과 : NaN
 

 

이 문제는 우리가 배운 apply를 적용하여 다음과 같이 해결할 수 있다.

 

Math.max(12,345,6789)
6789
 
let nums = [12, 345, 6789]
Math.max.apply(null, nums) // 결과 : 6789

 

여기서, null 자리에는 원래 this가 들어가도록 되어 있는데, null이 아니라 어떤 것( ex. {a : 1}) 이 들어가도 결과는 똑같이 출력된다.

이것은 Math 함수 내에 this가 없기 때문이며, 다시 말해서, Math가 Class 처럼 constructor 형태로 적용되지 않아서 execution context가 없기 때문이다.

 

다만, spread operator를 사용할 수도 있다. spread operator는 배열 안의 요소들을 하나씩 꺼내와주므로, 다음과 같이 작성해도 같은 결과가 출력된다.

Math.max(...[12, 345, 6789])

spread operator 내용 :

JavaScript / Rest Parameter, Spread Operator

---

 

 

2. .map.call (Array method에 .call 적용)

 

map method도 위의 Math처럼 적용할 수 있는 범위가 Array로 한정되어 있다.

map method 자체가 Javascript에서 정의하는 Array 객체의 prototype에 있는 요소이기 때문인데, 여기에 대한 상세한 내용은 다른 글에서 살펴보도록 하자. (후술)

 

요점은 .call을 사용하면 array가 아닌 array-like 인자에도 .map을 적용할 수 있다는 것이다.

 

HTML 문서에서 특정 tag를 인자로 하는 요소들을 조회하면 다음과 같이 나타난다.

document.querySelectorAll('div')로 'div' tag를 모두 조회하였고, 그것을 'arr' 이라는 변수에 담았다.

 

대괄호 '[' 로 시작되어 있으므로 마치 배열이라고 착각할 수 있으나, 화살표를 눌러 각 요소의 상세 내용을 살펴보면 

0 : div#root, 1: div.sc-bdVaJa.cntACw와 같이 object 형태로 구성되어 있음을 알 수 있다.

ex) [0: 'apple', 1: 'banana' ...]

 

따라서 여기에는 .map method를 사용할 수 없다.

각 요소에 'is good' 이라는 string을 붙여주는 함수를 작성하고, arr에 적용해보자.

 

let addingString = function(string) {
    return string + 'is good'
}

TypeError가 발생하게 된다.

 

 

 

 

그럼 Array.prototype에 있는 .map method를 빌려오는 개념으로 적용하면 어떤 결과가 나오게 될까?

Array.prototype.map.call(arr, addingString)

각 요소에 'is good' 이라는 string이 추가된 것을 확인할 수 있다.

 

Array.prototype에 정의되어 있는 'this'를 call을 이용해서 arr로 적용시켜줌으로써 위와 같은 결과가 도출되게 된다.

좀 더 상세한 이해를 위해서는 javascript에 정의된 Object와 inheritance의 관계와 구성을 이해할 필요가 있다.

 

다음 글에서 확인해보자.

 

Javascript / 객체 / Inheritance (상속)