[JS] map, filter, reduce 정리

• map() 
  • map은 배열 내의 모든요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴하는 메서드 이다.
  • 결과를 return값으로 추출한다.

let arr = ["one", "two", "three", "four", "five", "six", "seven"]
let map = arr.map(v => v + 'TEST');

console.log(map);
["oneTEST", "twoTEST", "threeTEST", "fourTEST", "fiveTEST", "sixTEST", "sevenTEST"]
------------------------------------------------------------------------------------

let food = [
	{color: "red", name: "apple"},
    {color: "yellow", name: "banana"},
    {color: "brown", name: "coffee"},
]
let result = food.map((item)=> item.name);
console.log(result)
["apple", "banana", "coffee"]

------------------------------------------------------------------------------------
let arr2 = data.map(v => {
    return{
        one : v.one,
        two : v.two,
        three : '',
}});

 

 

 

 

•  filter()
  • 배열 각 요소에 대하여 주어진 함수의 결과값이  true인 요소를 모아 새로운 배열을 반환하는 메서드 이다.

let color = ['red', 'yellow', 'green', 'blue'];
let result = color.filter(item => item.length > 5);
console.log(result);
["yellow", "green"]

------------------------------------------------------------------------------------

let color = ['red', 'yellow', 'green', 'blue'];
let search = (query) => {
	return color.filter((item)=>
    	item.toLowerCase().includes(query.toLowerCase()));
}	
console.log(search('re'));
["red", "green"]

------------------------------------------------------------------------------------

let temp = [];
let result = [];

temp = data.response;
result = temp.filter(obj => {return obj.data === '안녕'})

 

 

 

 

 

• reduce()
  
  • 배열 각 요소에 대하여 reducer함수를 실행하고, map과 filter와 달리 배열이 아닌 하나의 결과값을 리턴한다
  • 배열의 왼쪽부터 콜백함수를 실행 후 누산한다.
• array.reduce(callback(accumulator, currentValue[, index[, array]] )[, initialValue])

1. 누산기 accumulator
2. 현재 값 cur
3. 현재 인덱스 idx
4. 원본배열 src
5. initialValue( optional : 사용해도되고 안해도됨 ) 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

const numbers = [1, 2, 3, 4]; 

// 일반 for문 
let result = 0; 
for (i = 0; i < numbers.length; i++) { 
	result += numbers[i]; 
} 
console.log(result); // 20;


----------------------------------------------------------------------------------------

const result = numbers.reduce((number1, number2) => number1 + number2); 
/* 
1,2 => 3 배열값 1번째, 2번째 부터 시작 
3,3 => 6 
6,4 => 10 
*/ console.log(result); // 10; (1 + 2 + 3 + 4)

----------------------------------------------------------------------------------------

const result = numbers.reduce((number1, number2) => number1 + number2, 10); 
/* 
10,1 => 11 initialValue값, 배열값 1번째 부터 시작 
11,2 => 13 
13,3 => 16 
16,4 => 20 
*/ 
console.log(result); // 20; (10 + 1 + 2 + 3 + 4)

 

• 주어진 값들을 reduce를 통해 합산하는 방법이다
• 물론 for문을 사용해서도 이와 같은 작업을 할 수는 있지만 권장하지는 않는다
• map, filter, reduce와 같은 함수는 기본적으로 순차적으로 값을 접근한다는 개념을 가지기 때문에 for문을 사용할 때 작성해야 하는 반복문을 작성하지 않고도 사용할 수 있다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처: https://inpa.tistory.com/entry/JS-📚-배열-고차함수-reduce [👨‍💻 Dev Scroll]