TIL : JavaScript filter()

구문

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

매개변수: 함수를 정의할 때 사용되는 변수 (인수는 함수가 호출될 때 매개변수에 담기는 실제 값)

매개변수 = 인자 = parameter

인수 = arguement

callback

각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세가지 매개변수를 받는다.

element : 처리할 현재 요소

index: 처리할 현재 요소의 인덱스

array: filter를 호출한 배열

thisArg: callback 실행시 this로 사용하는 값

 

반환 값

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

 

설명

filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성한다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출된다. 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않는다. callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않는다.

 

callback은 다음 세 인수와 함께 호출된다.

 

1.요소값 

2. 요소 인덱스

3. 순회되는 배열객체 

 

thisArg 매개변수가 filter에 제공된 경우, 호출될 때 그 값은 callback의 this값으로 전달된다. 그 이외에, undefined값도 callback의 this값으로 쓰기 위해 전달된다. 결국 callback에 의해 관찰될 수 있는 this값은 this를 결정하는 함수의 평소 규칙에 따라 결정.

 

filter()는 호출되는 배열을 변화시키지 않는다.

 

filter()에 의해 처리되는 요소의 범위는 callback의 첫 호출전에 설정된다. filter() 호출 시작 이후로 배열에 추가된 요소는 callback에 의해 방문되지 않는다. 배열의 기존 요소가 변경 또는 삭제된 경우, callback에 전달된 그 값은 filter()가 그 요소를 방문한 시점에 값이 된다. 삭제된 요소는 반영되지 않는다.

 

배열 요소의 index와 map함수를 호출한 배열을 확인

순차적으로 배열의 요소를 순회하는 것을 확인할 수 있다.

var arr = [1, 2, 3, 4];

arr.map(function(data, index, array) {
  console.log(`*****${index}번째 index*****`);
  console.log(`index ${index}번째 배열 요소의 data : ${data}`);
  console.log(`아래는 map 함수를 호출한 배열`);
  console.log(array);
})

실행결과

this 사용 방법

배열 요소에서 5의 배수인 요소만 반환 코드를 this를 사용하여 응용하였다. this에 value라는 속성을 추가하고 숫자 5를 설정한다.

var arr = [1, 5, 8, 10, 12, 15, 16, 20];

var newArr = arr.filter(function(data) {
  return data % this.value == 0 ? true : false;
}, {value : 5})

console.log(newArr);

실행결과

 

 

 

 

 

 

callback 함수를 화살표 함수로 사용

filter 함수의 callback 함수를 화살 함수로 사용할 경우 this로 사용되는 값을 설정할 수 없다.

화살표 함수 내부에서 this를 호출하면, 전역 객체인 Window 객체가 호출된다.

arr.filter((currentValue, index, array) => {
  //...
})

아래 코드는 배열요소에서 5의 배수인 요소만 반환 코드를 화살표 함수를 사용하였다. this를 설정할 수 없어서 숫자 5는 변수로 설정.

var globalValue = 5;
var arr = [1, 5, 8, 10, 12, 15, 16, 20];

var newArr = arr.filter((data) => {
  return data % globalValue == 0 ? true : false;
})

console.log(newArr);

실행결과

화살표 함수에서 this를 호출

window 객체가 출력되었다.

var arr = [1, 5];

var newArr = arr.filter((data) => {
  console.log(this)
})

실행결과