js filter 함수

정의

Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다.

사용이유

특정조건을 만족하는 배열을 뽑아낼때 사용한다

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 1);
console.log(words)
console.log(result)
console.log(result === words);

//결과
[ 'spray', 'limit', 'elite', 'exuberant', 'destruction', 'present' ]
[ 'spray', 'limit', 'elite', 'exuberant', 'destruction', 'present' ]
false

필러팅된 함수는 기존함수랑 인자가 같아도 같은함수가 아니다→깊은복사가 될 수 있다.

callbackFn 배열의 각 요소에 대해 실행할 함수입니다. 결과 배열에 요소를 유지하려면 참 값을 반환하고 그렇지 않으면 거짓 값을 반환해야 합니다.
참이면 해당 element가 배열에 추가된다.

이 함수는 다음 인수를 사용하여 호출됩니다.

• element : 배열에서 처리 중인 현재 요소.
• index : 배열에서 처리 중인 현재 요소의 인덱스.
• array : filter()가 호출된 배열.

// solv1
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length < 6);
console.log(result) //[ 'spray', 'limit', 'elite' ]

// solv2
function lessthanSix(value)
{
    return value.length < 6
}
const result2 = words.filter(lessthanSix);
console.log(result2); //[ 'spray', 'limit', 'elite' ]

solv1

조건식이 간단하면 filter괄호안에 직접 작성하는게 좋아보인다.

solv2

조건식이 복잡하면 외부에 콜백함수에 만들어 callback하게 하는게 가독성이 좋아보인다

📌 Callback이란?
다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 를 말한다. 그리고, 함수를 만들때, parameter 를 함수로 받아서 쓸 수 있는데 그 함수는 callback이다
어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수!

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://velog.io/@haleyjun/JavaScript-filter-사용법