실무에서 자주 쓰는 함수 1. map 함수, filter 함수

출처

[js] 자바스크립트 map 함수, filter 함수

 

map() 메서드

map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다.

 

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

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

 

---

filter() 메서드

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

즉 return값이 true일경우, 그 요소를 반환하고 false일경우, 반환하지 않는다.

 

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

 

String.prototype.toLowerCase() 

: 호출 문자열을 소문자로 변환해 반환합니다

String.prototype.includes()

: 문자열 내에 찾고자 하는 다른 문자열이 있는지 확인할 수 있습니다

 

 

 

---

두 경우의 반환값이 다르다.

filter적용

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(v) {
  return v % 2 == 0;
});
// 2, 4

map적용

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function(v) {
  return v % 2 == 0;
});
// [false,true,false,true,false]