02. filter

📌 2-1 filter란?

✔ 배열.filter(콜백함수(배열의 값, 배열의 인덱스, 배열), thisArg)
✔ 배열의 콜백함수의 return값이 true인 경우에만 그 인자들을 모아서 반환한다.
✔ 콜백함수를 따로 불러오지 않고 사용하는 경우에는 ES6 화살표 함수나 함수선언식으로 넣는다.
✔ 배열.filter((배열의 값, 배열의 인덱스, 배열)=>{...실행문 return ...}, thisArg)
✔ 콜백함수를 인자로 받는 것을 고차함수라고 한다.
✔ return값이 true인 인자들을 모아 새로운 배열을 반환하기 때문에 원본배열은 변경되지 않는다.

📌 2-2 filter 작동예제

filter메서드는 배열의 모든 값들을 순회한다.

const arr = [1,2,3,4,5];
const filter = arr.filter((value, index, array) => {
    console.log(value, index, array);
})
console.log(filter);
// 1번실행 1 0 [ 1, 2, 3, 4, 5 ]
// 2번실행 2 1 [ 1, 2, 3, 4, 5 ]
// 3번실행 3 2 [ 1, 2, 3, 4, 5 ]
// 4번실행 4 3 [ 1, 2, 3, 4, 5 ]
// 5번실행 5 4 [ 1, 2, 3, 4, 5 ]

💡 이와 같이 모든 값들을 순회한다. 쉽게 생각해 보면 arr의 0번 인덱스부터 arr.length - 1의 인덱스까지 for문이 돌고 있다고 생각하면 쉽다.

📌 2-3 filter 사용예제

filter메서드는 배열의 모든 값들을 순회하면서 return값이 true인 값들을 모아서 반환한다.

const arr = [1,2,3,4,5];
const filter = arr.filter((value) => {
    return value > 3; // value가 3보다 큰 값들을 모아서 새로운 배열로 반환한다.
})
console.log(filter); // [4,5] 출력

📌 2-4 filter 알고리즘 사용예제 1.

indexOf를 사용하여 중복제거를 할 수 있다.

const arr = [1,1,1,2,2,2,3,3,3];
/* arr.indexOf(value)에서 value값이 들어간 index의 첫 자리가 반환된다. 
그러므로 filter의 index가 indexOf(value)인 값과 일치하면 반환하게 되면 중복값제거가 완료된다.
*/
const filter = arr.filter((value, index) => arr.indexOf(value) === index);
console.log(filter); // [1,2,3] 출력

📌 2-5 filter 알고리즘 사용예제 2.

includes를 사용하여 가지고 원하는 값만 추출할 수 있다.

const arr = [1,3,5,6,9,10,12,15,18,20];
const compare = [3,6,9,12,15,18]; // 3의 배수로 추출할 배열을 생성
// includes메서드는 해당 배열에 그 값이 있으면 true를 반환한다.
const filter = arr.filter((value) => compare.includes(value));
console.log(filter); // [3,6,9,12,15,18] 출력

💡 문자열을 split()메서드로 나누고 그 문자열안에 특수문자 추출도 가능하다.

📌 2-6 thisArg

filter메서드 뒤에 thisArg라는 것이 무엇인지 알아보면 정의는 callback을 실행할 때 this로 사용하는 값이라는 뜻이다. 한번 알아보자.

const filter = [1].filter(function () {
    console.log(this);
})
console.log(filter); // 출력값 window객체 출력

window객체가 출력된다. (웹 페이지에서 실행시) node.js로 실행시키면 global객체가 출력된다.

// 생성자 함수 생성
function compare() {
    this.num = 3;
}
// 인스턴스 생성
const newCompare = new compare();
const arr = [1,3,5,6,9,10,12,15,18,20];
const filter = arr.filter(function(value) {
    console.log(this); // 출력값 compare 출력
    return this.num < value;
}, newCompare)
console.log(filter); // [5,6,9,10,12,15,18,20] 출력

여기서 확인해보면 this가 compare를 가리키게 되어 compare에 있는 this.num을 호출 할수 있게 된것이다.

function compare() {
    this.num = 3;
}
const newCompare = new compare();
const arr = [1,3,5,6,9,10,12,15,18,20];
const filter = arr.filter((value) => {
    console.log(this); // 출력값 window객체 출력
    return this.num < value; // this.num === undefined
}, newCompare)
console.log(filter); // [] 출력

이와 같이 ES6문법을 사용하면 window객체가 출력된다.

📌 2-7 thisArg 정리

✔ ES6 화살표 문법은 this를 바인딩 하지 않기 때문에 생기는 문제점이다.
✔ 인스턴트의 this는 생성자함수를 가리킨다.
✔ thisArg의 개념을 이해 할려면 this를 이해가 필요하다.
✔ 그러므로 thisArg를 사용하려면 array.filter(function() {}, thisArg)로 사용해야 한다.
✔ function() {} 자리에는 함수를 정의해서 사용해도 되지만 ES6형식으로 사용하면 안된다.
✔ 나중에 this에 대해서 자세히 업데이트 할 예정이다.

출저
MDN = Array.prototype.filter()