[JavaScript] filter()

🎈 filter()

filter() 메서드는 주어진 조건을 통과하는 요소들을 모아 새로운 배열로 반환한다. 아무것도 통과하지 못했다면 빈 배열을 반환한다.

arr.filter(callback(element, index, array));

callback 함수를 통해 true면 요소 유지, false면 요소 제거
element는 처리할 현재 요소
index는 처리할 현재 요소의 인덱스
array는 filter를 호출한 해당 배열

element만 사용한 filter

배열의 길이가 5 이상인 요소들을 반환해보겠다.
element는 각 요소이므로 colors[0], colors[1]에 해당되는 값들을 의미한다.

const colors = ['red', 'orange', 'yellow', 'green'];

const result = colors.filter(color => color.length > 5);
console.log(result); // ['orange', 'yellow']

element, index를 사용한 filter

'red'가 2개인 배열에, 중복을 제거해볼 것이다.
true의 결과를 얻는 요소들만 배열에 담긴다.

const colors = ['red', 'red', 'orange'];
const result = colors.filter((col,idx) => col !== colors[idx+1]);
console.log(result); // ['red', 'orange']

function 생성

위와 같이 중복을 제거하는 filter 함수를 사용할 것이다.
Arrow function을 사용하지 않고 추가 function을 만들어 보겠다.

const colors = ['red', 'red', 'orange'];

function ColorCheck(col,idx){
    return col !== colors[idx+1];
}

const result = colors.filter(ColorCheck);
console.log(result); // ['red', 'orange']

filter에서 ColorCheck 함수를 호출할 때 인자를 쓰지 않아도 자동으로 적용된다.

cf)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://codechacha.com/ko/javascript-array-filter/