[js] 자바스크립트 map(), filter() 사용법(ft. 배열)

맵함수, 필터함수

 

배열에 사용되는 함수,
map()과 filter() 에 대하여 알아보겠습니다.

 

map() 메서드

• map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. 
• 결과를 "return  ..."  리턴 값으로 추출합니다.
• 단, 실행문이 한 개만 반환될 경우, return 키워드와 {} 를 생략할 수 있습니다. 

예시

cosnt a = numbers.map(number => {
  return number < 3
})
//아래로 리팩토링(간결한 코드) 
const a = numbers.map(number => number < 3)

 

map 함수 구문

array.map(callbackFunction(current value, index, array), thisArg)

 

• currentValue : 배열 내 현재 값
• index : 배열 내 현재 값의 인덱스
• array : 현재 배열
• thisArg : callbackFunction 내에서 this로 사용될 값

 

map() 예제: string

let arr1 = [ "월요일", "화요일", "수요일", "목요일", "금요일" ]
let map1 = arr1.map( item => '출근하는 '+ item );

console.log(map1);
결과: (5) ["출근하는 월요일", "출근하는 화요일", "출근하는 수요일", "출근하는 목요일", "출근하는 금요일"]

 

map() 예제: number

let arr2 = [ 1,3,5,7,9 ]
let map2 = arr2.map( item => item * 2 );

console.log(map2);
결과: (5) [2, 6, 10, 14, 18]

 

map 함수를 이용하여 원하는 객체 값 추출

let fruit = [
{color: "yellow", name:"banana"},
{color: "red", name:"tomato"},
{color: "orange", name:"orange"},
{color: "green", name:"grape"},
{color: "red", name:"apple"}
]
let fruitColor = fruit.map((item) => item.color);
console.log(fruitColor);
결과: (5) ["yellow", "red", "orange", "green", "red"]

-> 내가 원하는 과일의 컬러만 추출하여 새로운 배열을 리턴하였습니다.

 

map 함수를 이용하여 객체 데이터 추출

map을 이용하여 배열 데이터를 가지고, 객체 데이터로 새롭게 만들 수 있습니다. 

const colors = ["yellow", "red", "orange", "green", "red"]
const a = colors.map((color, index) => {
  return {
    id: index,
    name: color
  }
})

console.log(a);
//결과: 
(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: 0, name: "yellow"}
1: {id: 1, name: "red"}
2: {id: 2, name: "orange"}
3: {id: 3, name: "green"}
4: {id: 4, name: "red"}

 

화살표 함수 형식

특정한 실행문이 한 개만 반환될 경우, return 키워드와 {} 를 생략할 수 있습니다.
소가로()로 한번 중가로{}를 감싸 주어야 객체 데이터가 화살표 문법에 의해서 반환됩니다. 

const colors = ["yellow", "red", "orange", "green", "red"]
const a = colors.map((color, index) => ({
    id: index,
    name: color
  })

---

filter() 메서드

filter() 메서드는 배열 내의 모든 요소를 돌면서
주어진 함수의 조건에 맞는 요소만을 모아 새로운 배열을 리턴합니다.

 

filter 함수 구문

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

 

filter() 예제1

let fruits = ['kiwi', 'banana', 'apple', 'peach', 'pineapple', 'strawberry', 'watermelon'];
let result = fruits.filter( item => item.length>6);
console.log(result);
결과:(3) ["pineapple", "strawberry", "watermelon"]

 

실무에서 자주 사용하는 filter 함수를 이용하여 검색 조건에 따른 필터링하기

let fruits = ['kiwi', 'banana', 'apple', 'peach', 'pineapple', 'strawberry', 'watermelon'];
let search = (query) => {
	return fruits.filter((item)=> 
		item.toLowerCase().includes(query.toLowerCase()));
}


console.log(search('ea'));
결과: (2) ["peach", "pineapple"]