[JavaScript] 자바스크립트 map, filter의 차이

자바스크립트 map, filter의 차이

 

 

1. map()

map() 메서드는 배열의 모든 요소 각각에 callback 함수를 순서대로 불러내 그 함수의 반환값으로 새로운 배열을 만들어낸다.

* 기존 배열과 배열의 길이가 달라질 수 없음

array.map(callback(currentValue[, index[, array]])[. thisArg])

- callback 함수는 array의 모든 요소를 호출한다.

- currentValue(현재값)에는 array안에서 처리될 현재 요소를 넣는다.

- index(Optional)에는 처리할 현재 요소의 인덱스를 넣는다.

- array(Optional)에는 map()을 호출한 배열을 넣는다.

- thisArg(Optional)에는 callback을 실행할 때 this로 사용할 값을 넣는다.

 

< map() 사용예시 >

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let map_result = array.map((v, i) => {
  return v * v;
});

console.log(map_result)
// [1, 4, 9, 16, 25, 36, 49, 64, 81]

 

2. filter()

filter() 메서드는 주어진 callback함수 조건에 부합한 요소들을 새로운 배열로 반환한다.

* 기존 배열과 배열의 길이가 달라질 수 있음

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

- callback 함수는 각 요소들이 조건에 부합한지 판별하고, true이면 요소를 유지하고 false이면 요소를 버린다.

- element는 처리할 현재요소

- index(Optional)에는 처리할 현재 요소의 인덱스를 넣는다.

- array(Optional)에는 filter()를 호출한 배열을 넣는다.

- thisArg(Optional)에는 callback을 실행할 때 this로 사용할 값을 넣는다.

 

< filter() 사용예시 >

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var filter_result = array.filter((v, i) => {
  if (v % 2 == 0) return v;
});

console.log(filter_result)
// [2, 4, 6, 8]

 

3. map()과 filter()의 주요한 차이점

1) 배열의 길이가 다르다

map 메서드는 기존 array의 길이와 반환하는 새로운 array의 길이가 같다.

하지만 filter 메서드는 기존 array의 길이와 새로운 array의 길이가 다를 수 있다.

// map()
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let map_result = array.map((v, i) => {
  if (v % 2 == 0) return v;
});

console.log("map_result", map_result);
// [undefined, 2, undefined, 4, undefined, 6, undefined, 8, undefined]


// filter()
let filter_result = array.filter((v, i) => {
  if (v % 2 == 0) return v;
});

console.log("filter_result", filter_result);
      
//[2, 4, 6, 8]

2) 반환값의 차이

// map()

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let map_result = array.map((v, i) => {
  return v * v;
});

console.log("map_result", map_result);
// [1, 4, 9, 16, 25, 36, 49, 64, 81]

// filter()

let filter_result = array.filter((v, i) => {
  return v * v;
});

console.log("filter_result", filter_result);
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

return 값으로 현재요소*현재요소 값을 반환해주는데 왜 filter 메서드는 현재요소값을 반환하는걸까?

-> filter() 콜백 함수는 리턴값의 불리언이 true인 값만 가지고 배열을 만들기 때문

그래서 v % 2 == 0에서 v값에 따라 조건이 true면 v를 그대로 저장한다.

즉, map은 v * v 자체를 '산술'로 보지만 filter는 '논리'로 본다. v * v 값은 무엇을 하든(0 제외) 참이다.