[javascript] filter()와 map()

filter()

Array.prototype.filter()

• 메서드
• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
• map, filter, reduce는 순차적 접근

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"]

구문

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

• callback : 각 요소를 시험할 함수. true : 유지, false: 버림
• element : 처리할 현재 요소

반환값

• 테스트 통과한 요소로 이루어진 새로운 배열
• 테스트 통과한 요소가 없으면 빈 배열을 반환

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

사용법

1. 콜백 함수를 통해 boolean 값을 반환하는 함수 등록하기
   • 콜백 함수의 3개 인자
     1. element
     2. index
     3. array

   const numbers = [1]; numbers.filter((number, index, source) => { 
   // number: 요소값 
   // index: source에서 요소의 index 
   // source: 순회하는 대상 
   console.log(number); // 1 
   console.log(index); // 0 
   console.log(source); // [1] 
   return number > 3; 
   });
   

2. 원시적인 값 뿐 아니라 json과 같은 객체를 사용해 true 판별 가능

   const guys = [
     { name: "YD", money: 500000 },
     { name: "Bill", money: 400000 },
     { name: "Andy", money: 300000 },
     { name: "Roky", money: 200000 },
   ];
   const rich = guys.filter((man) => man.money > 300000);
   console.log(rich); // [{name: "YD", money: 500000}]
   

3. = 모든 값을 true/false로 분류해 원하는 조건을 만족하는 배열 반환
4. map, reduce 등 다른 함수와 조합 가능
5. const guys = [ { name: "YD", money: 500000 }, { name: "Bill", money: 400000 }, { name: "Andy", money: 300000 }, { name: "Roky", money: 200000 }, ]; const richNames = guys.filter((man) => man.money > 300000).map((man) => man.name); console.log(richNames); // ["YD", "Bill"]

주의사항

• filter 함수는 객체를 직접 사용하거나 변형시키지 않지만 callbackfn을 통해 수정할 수 있으며 이는 문제를 발생시키는 원인이 됩니다.
• callbackfn이 호출되는 범위는 callbackfn이 처음 호출되기 이전이며, filter는 순회하는 도중에 추가된 요소는 접근하지 않습니다. 반대로 순회하는 도중 수정이 일어나면 변경된 값이 callbackfn에 전달되고 삭제된 요소는 접근하지 않습니다.

map()

Array.prototype.map()

• 메서드
• 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열 반환
• const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32]

구문

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

반환 값

• 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열
• const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => number * number); console.log(numbers); // [1, 2, 3, 4, 5]; console.log(result); // [1, 4, 9, 16, 25]

사용법

• callbackfan을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록
• const numbers = [1]; numbers.map((number, index, source) => { // number: 요소값 // index: source에서 요소의 index // source: 순회하는 대상 console.log(number); // 1 console.log(index); // 0 console.log(source); // [1] return number * number; });
• 주로 number에 해당하는 요소 값을 많이 활용하지만 index와 array도 함께 사용 가능
• // 프로그래밍 이름 길이 구하기 const programingLanguages = ["javascript", "java", "c#", "c++", "c"]; const lengthOfProgramingLanguages = programingLanguages.map(language => language.length); console.log(lengthOfProgramingLanguages); // [10, 4, 2, 3, 1];

주의사항

• map 함수는 객체를 직접 사용하거나 변형시키지 않지만 callbackfn을 통해 수정할 수 있으며 이는 문제를 발생시키는 원인이 됩니다.
• callbackfn이 호출되는 범위는 callbackfn이 처음 호출되기 이전이며, map이 순회하는 도중에 추가된 요소는 접근하지 않습니다. 반대로 순회하는 도중 수정이 일어나면 변경된 값이 callbackfn에 전달되고 삭제된 요소는 접근하지 않습니다.
• // array 요소가 추가되는 경우 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => { numbers.push(number); return number * number; }); console.log(result); // [1, 4, 9, 16, 25]; // array 요소가 수정되는 경우 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => { numbers.pop(); return number * number; }); console.log(result); // [1, 4, 9, empty × 2];

 

 

참고:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://7942yongdae.tistory.com/49

https://7942yongdae.tistory.com/48

https://velog.io/@tjdud0123/javascript-map-filter-함수