map 함수 와 filter 함수, 뭐가 다른걸까?

공통점)

• 배열에서 요소를 변환하거나, 추출하는 함수
• 원래의 배열을 변경하지 않고 새로운 배열을 반환함
  
  

차이점)

❖ map

배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 각 요소를 새로운 값으로 변환한 후, 이 값들을 포함하는 새로운 배열을 반환.

const 변수명 = 배열.map( 배열에서 받아오는 값의 변수명 ⇒ 받아온값을 사용한 반환,결과값 );

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number * 2);

console.log(numbers);
// [1, 2, 3, 4, 5];

console.log(result);
// [2, 4, 6, 8, 10]

❖ filter

배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 콜백 함수의 결과가 ‘true’인 요소만 반환하여 새로운 배열을 반환.

const 변수명 = 배열.filter( 배열에서 받아오는 값의 변수명 ⇒ 값을 걸러서 받아오기 위한 필터링 조건);

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

console.log(numbers);
// [1, 2, 3, 4, 5];

console.log(result);
// [4, 5]

+다중 매개변수를 사용한 filter함수

const newArray = arr.filter(callbackFunction(element, index, array), thisArg)

• filter 함수의 매개변수는 callbackFunction과 thisArg입니다.
• callbackFunction에서 사용한 매개변수
  - element : 요소값
  - index : 요소의 인덱스
  - array : 사용되는 배열객체
  
  

결론!

map 함수는 각 요소를 새로운 값으로 변환하고 새로운 배열을 생성하고자 할때 사용하고, filter 함수는 배열에서 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 반환하고 싶을 경우 사용하자!