thisArg 에 대한 이해 (feat. filter 메소드)

목차

• 개요
• filter 메소드 설명
• 뭐가 궁금해?
• 마무리
• 출처

개요

'thisArg 가 뭐가 그렇게 중요해? 몰라도 filter 메서드 그냥 쓸 수 있는데' 라고 할 수 있다. 나도 그렇게 가볍게 생각했었다..공부를 하다보니 한 개념에 대해 깊게, 제대로 알고 있는 것이 중요하다는 것을 느꼈고 react와 vue의 차이점에 대해서 찾아보다가 예시로 filter 함수가 나왔는데 filter 기능에 대해 알아보다 모르는 개념들을 기록하고 정리하고 싶어 현재 글을 작성하였다.

 

filter 메소드 설명

filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

 

매개변수

• callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
  • element [Optional] : 처리할 현재 요소
  • index [Optional] : 처리할 현재 요소의 인덱스
  • array [Optional] : filter를 호출한 배열
• thisArg [Optional] : callback을 실행할 때 this로 사용하는 값.

반환값

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

 

뭐가 궁금해?

구문에서 왜 [,thisArg] 로 표시되는지, 그리고 thisArg 가 무엇을 의미하는지 궁금하였다. 구글링하면서 stackoverflow에 나와 똑같은 궁금증을 가진 사람이 글을 올린 게 있었고, 답을 알 수 있었다.

 

Q) 왜 [,thisArg] 로 표시되는거야?

A) The MDN site by convention uses the [, thisArg] notation to mean that the parameter is optional.

-> MDN 사이트에서 [parameter] 와 같이 대괄호로 값이 감싸져있는 것은 해당 parameter(인자) 가 optional (선택값) 이라는 의미한다. (의역)

 

Q) 그럼 thisArg 가 뭐야?

A) callback을 실행할 때 this로 사용하는 값.

 

The thisArg parameter is optional. If you pass it, then when the runtime invokes your callback, it'll set this to whatever that value is.

=> 'thisArg 는 Optional 인자로, thisArg를 인자로 넘기면 runtime이 callback을 호출할 때 이를 this로 설정한다' 로 정리할 수 있다.

 

조금 아리쏭해서 thisArg 인자를 안 줬을 때와 직접 줬을 때를 비교해보았다.

 

thisArg 안 줬을 때

코드 실행 결과

callback 함수 내에서 this를 console로 찍으면 window 객체를 반환하는 것을 알 수 있다. 넘겨준 thisArg 가 없으니 브라우저 컨텍스트 그 자체인 window 객체를 보여주는 것이 아닐까? 라고 추측한다. 만약 thisArg 값을 임의로 넣어서 실행한다면 어떻게 될까? 그리고 어떻게 넘겨줄까?

 

thisArg 줬을 때

thisArg 를 넘겨주는 방법은 구문에서 [, thisArg] 로 표시된 것처럼 callback 함수 다음에 Comma(,) 를 찍고 값을 대입하면 된다.

그리고 넘겨준 thisArg 를 callback 함수내에서 사용하고 싶다면 this 를 쓰면 된다.

 

그리고 결과도 잘 나온다. 이 때의 this 결과는 100 이라는 숫자 원시값을 객체로 wrapping 한 Number 객체를 보여진다. 

 

마무리

간단한 내용임에도 정리하는데 시간이 소요되었다. 그리고 깊게 들어갈 내용들이 있는데 가볍게 얘기한 것 같아 조심스럽다..구문에서 [, thisArg] 의 의미와 filter 메소드에서 thisArg를 사용하는 방법, thisArg 는 실제 어떤 값인지 살펴보면서 javascript와 좀 더 친해질 수 있었다. javascript를 사용하면서 this 개념을 잘 알고 있는 것이 이 언어가 어떻게 동작하는지 전체 흐름을 파악할 수 있는데 도움이 많이 될 것 같다. 그래서 저기서 왜 window 객체가 반환되는지도 알 수 있을 것이다. ( 추 후 수정할 것임..)

 

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://stackoverflow.com/questions/35142983/understanding-arr-filtercallback-thisarg-syntax