[javascript] map,filter,every 함수

❗️map과 filter함수의 공통점은 기존배열을 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다는 뜻이고,

차이점을 map은 콜백함수가 적용된 새 요소, filter는 조건문을 만족한 요소들을 반환한다는 점이다.

 

map()

Array.prototype.map()

 

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

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 ]

응용

/* 명시된 키와 함께 읽기 가능한 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함수를 쓰면 안티패턴인 경우

• 새롭게 리턴할 배열을 사용하지 않는 경우
• callback 함수로부터 새로운 값을 리턴하지 않을 경우

filter()

Array.prototype.filter()

 

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

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));

 

 

참고 자료

[ javascript ] map, filter 함수