TIL 4. JS - filter() (조건 통과 -> 새로운 배열) (feat. map)

프로젝트의 마무리와 시연영상, 발표 준비를 하느라 많은 공부를 하지 못했다...
게다가 밤 늦게까지 시연영상 만들고 잘 작동하는지 확인하느라 TIL을 깜빡했다.
하지만! 그래도 올려야한다. 늦더라도 올려야한다. 5일을 공부했으면 TIL은 다섯개여야 하고, 2주를 공부했으면 14개여야 한다.

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

구문 :

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

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

• element
  처리할 현재 요소.

• index (옵션)
  처리할 현재 요소의 인덱스.
  

• array (옵션)
  filter를 호출한 배열.
  

• thisArg (옵션)
  callback을 실행할 때 this로 사용하는 값.

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"]
const words = ['1', '2', '3', '4', '5', '6'];

const result = words.filter(word => word > 4);

console.log(result);

// expected output: Array ["1", "2", "3"]

위의 예시처럼 사용할 수 있다.

filter랑 map랑 많이 비슷해 보이지만 각 함수는 리턴하는 기능이 다르다.

const testArray = [0,1,2];
 
testArray.filter(a => a == 1); // [1]
 
testArray.map(a => a == 1); // [false, true, false]
 
testArray.map(a => {
    if (a = 1)
        return a;
}) 
// [undefined, 1, undefined]

map의 콜백함수는 산술된 인자를 받아 배열을 만드는 역할을 한다.
그래서 만약 a == 1을 받으면 그 산술 결과인 불리언값을 리턴해 배열을 만든다.

filter의 콜백 함수는 리턴값의 불리언이 true인 값만 가지고 배열을 만드는 역할을 한다.
그래서 a == 1에서 a값에 따라 조건식이 true면, a를 그대로 저장하는 것이다.