❗️ map과 filter의 공통점은 기존배열은 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다는 것이고, 차이점은 map은 콜백함수가 적용된 새 요소, filter는 조건문을 만족한 요소들을 반환한다는 점입니다.

map()

Array.prototype.map()

🧚   배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴

creates a new array populated with the results of calling a provided function on every element in the calling array

let newArray = arr.map(callback(currentValue[, index[, array]]) {
  // return element for newArray, after executing something
}

안티패턴이지만 parameters를 확인하기 위해 코드를 적어봅시다

let numbers = [1, 4, 9]
let parameters = numbers.map((num, index, arr) =>
          	{console.log(num, index, arr)})
// 결과
1 0 [ 1, 4, 9 ]
4 1 [ 1, 4, 9 ]
9 2 [ 1, 4, 9 ]

💡 예시

let numbers = [1, 4, 9]
// 일반 함수
let roots = numbers.map(function(num) {
    return Math.sqrt(num)
})
// 화살표 함수
let roots = numbers.map((num) => Math.sqrt(num))
// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

💡 응용

/* 명시된 키와 함께 읽기 가능한 string 으로 유저 테이블 출력 – 비구조화 할당 */
users.map(({id, age, group}) => `\n${id} ${age} ${group}`).join('')

/* 객체 배열에서 id가 47이면 나이1 증가 */
let updatedUsers = users.map(p => p.id !== 47 ? p : {...p, age: p.age + 1});

💡 map을 쓰면 안티패턴인 경우

1) 새롭게 리턴한 배열을 사용하지 않는 경우

2) callback 함수로부터 새로운 값을 리턴하지 않는경우

filter()

Array.prototype.filter()

🧚   배열을 순회하며 요소마다 조건 확인 후 조건을 만족하는 원소들로 구성된 새로운 배열 리턴

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

let newArray = arr.filter(callback(currentValue[, index, [array]]) {
  // return element for newArray, if true
}[, thisArg]);

안티패턴이지만 parameters를 확인하기 위해 코드를 적어봅시다

let numbers = [1, 4, 9]
let parameters = numbers.filter((num, index, arr) =>
          	{console.log(num, index, arr)})
// 결과
1 0 [ 1, 4, 9 ]
4 1 [ 1, 4, 9 ]
9 2 [ 1, 4, 9 ]

💡 예시

const words = ['limit', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

💡 응용

/* 간단한 검색(case-sensitive) */
let users = [
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];
let res = users.filter(it => it.name.includes('oli'))

/* 간단한 검색(case-insensitive) */
let res = users.filter(it => new RegExp('oli', "i").test(it.name));

/* A와 B의 교집합 */
let arrA = [1, 4, 3, 2];
let arrB = [5, 2, 6, 7, 1];
arrA.filter(it => arrB.includes(it));