자주 사용하는 배열 메소드 -map,forEach,reduce,filter

반복 메서드는 배열의 모든 요소를 순회하면서 특정한 작업을 수행하거나,

특정 조건을 만족하는 요소를 가져올 때 사용한다.

★배열.map(function( 처리할 현재 요소, 현재 요소의 인덱스, 원본 배열){ /* 배열 요소 하나 하나에 실행할 로직 */ });

배열 내의 모든 요소 각각에 대하여 주어진 함수 로직을 실행한 후, 그 결과를 모아 새로운 배열을 반환합니다. (map 메서드의 인수로 넘기는 함수는 무조건 결과를 반환해야 함 => return 문이 들어가야 함)

callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받는데, 현재 요소 인덱스와 원본 배열은 옵션이다.

let array1 = [1, 4, 9, 16];
 
//array1배열 요소 하나하나에 곱하기 2를 하는 로직이고 그 결과들을 모아서
const mapResult = array1.map(x => x * 2);
 
console.log(mapResult);
 
// expected output: Array [2, 8, 18, 32]

 let candidate = Array(45).fill().map(function(elem,idx){
        return idx+1;
    });

 

---

배열.forEach(callback)

배열안의 요소 하나하나에 대해 함수 내용을 실행하여 원본 배열에 반영한다.

map과 다른 점은 연산만 하고 그 값으로 새로운 배열을 생성하지 않는 다는 점이다.

const a = [1,2,3,4,5];
let b = a.forEach( function(v, i){ console.log(v); return v*2;}); // 1,2,3,4,5출력
let c = a.map( function(v, i){ console.log(v); return v*2;});
 
//result
/*
console.log(b) ->undefined
console.log(c) ->[2,4,6,8,10]
*/ 

---

★★★배열.reduce(callback(이전 연산 결과prev, 현재value, 현재idx, 원본array), initial)

배열 안의 모든 요소를 합성 곱 처리한다. 즉 하나의 요소에 함수 로직에 대한 수행을 하고 그 결과를 ,

그 다음 요소를 처리할 함수의 인자로 넘긴다. 그리고 마지막 요소를 처리한 함수가 최종 값을 return을 한다.

callback 인수로 idx랑 array는 생략가능하고, reduce의 두번째 인자인 initial값도 생략가능.

initial값을 준 경우 prev는 initial의 값, value는 배열의 첫 요소 ,index는 0

initial값을 안 준 경우 prev는 배열의 첫 요소 값, value는 배열의 두번째 요소값 ,index는 1

let a = [1,2,3,4,5];
a.reduce((prev, value) => { return prev+ value;}, 2); //결과 17
a.reduce((prev, value) => { return prev+ value;}, 0); //결과 15
a.reduce((prev, value) => { return prev+ value;}); //결과 15
 
//초기값을 안 준경우와, 초기값을 0으로 준 경우의 결과 값이 같으므로
//초기값을 생략하면 initial 값이 0이 된다고 보면 됨.
 

initial값을 2로 지정한 경우

회차	prev	value	index	return
1회차	0	1	0	3
2회차	3	2	1	5
3회차	5	3	2	8
4회차	8	4	3	12
5회차	12	5	4	최종 반환값 17

 

initial값을 지정하지 않은 경우( === initial:0 )

회차	prev	value	index	return
1회차	1	2	1	3
2회차	3	3	2	6
3회차	6	4	3	10
4회차	10	5	4	최종 반환값 15

 

예시2) reduce를 사용해 특정 키의 빈도를 포함하는 객체를 만들기 (예제 복습 필수 ㅜㅜ 어렵)

animals객체 안의 동물들의 나이 분포 구하기.

let animals= [
    {name:'volt', breed:'Bostonterrier', age:'3', host:'person1-Kim', types:'dog'},
    {name:'ddorri', breed:'Maltese', age:'8', host:'person-Park', types:'dog'},
    {name:'yangsuni', breed:'Poodle', age:'9', host:'person-Ryu', types:'dog'},
    {name:'darong', breed:'Shitzu ', age:'3', host:'person2-Kim', types:'dog'},
    {name:'boss', breed:'Bostonterrier', age:'4', host:'person-Gill', types:'dog'},
    {name:'bbona', breed:'Poodle', age:'5', host:'person3-Kim', types:'dog'},
    {name:'runa', breed:'Persian', age:'1', host:'person-Yang', types:'cat'},
    {name:'ggosun', breed:'Koshort', age:'5', host:'person2-Park', types:'cat'},
];
 
let keyAge = animals.reduce((prev,val) => ({...prev, [val.age]:( prev[val.age] || 0 )+1}),{});

회차	prev	value	index	return
1회차	{}	3:0+1 =  3:1	0	{3:1}
2회차	{3:1}	8:0+1 =8:1	1	{3:1, 8:1}
3회차	{3:1, 8:1}	9:0+1 = 9:1	2	{3:1, 8:1, 9:1}
4회차	{3:1, 8:1, 9:1}	3:1+1 = 3:2	3	{3:2 ,8:1, 9:1}
5회차	{3:2, 8:1, 9:1}	4:0+1 = 4:1	4	{3:2, 4:1, 8:1, 9:1}
6회차	{3:2, 8:1, 9:1, 4:1}	5:0+1 = 5:1	5	{3:2, 4:1, 5:1, 8:1, 9:1}
7회차	{3:2, 8:1, 9:1, 4:1, 5:1}	1:0+1 = 1:1	6	{1:1, 3:2, 4:1, 5:1, 8:1, 9:1}
8회차	{3:2, 8:1, 9:1, 4:1, 5:1, 1:1}	5:1+1 = 5:2	7	최종 반환 {1:1, 3:2, 4:1, 5:2, 8:1, 9:1 }

 

아래의 예제를 복습하기 위해 작성함

https://medium.com/@Dongmin_Jang/javascript-15%EA%B0%80%EC%A7%80-%EC%9C%A0%EC%9A%A9%ED%95%9C-map-reduce-filter-bfbc74f0debd

[Javascript] 15가지 유용한 map, reduce, filter

---

배열.filter(callback())

filter는 callback함수에 의해 걸리진 값을 새로운 배열을 반환한다.

let clients = [
    {name:'volt', breed:'Bostonterrier', age:'3', host:'person1-Kim'},
    {name:'ddorri', breed:'Maltese', age:'8', host:'person-Park'},
    {name:'yangsuni', breed:'Poodle', age:'9', host:'person-Ryu'},
    {name:'darong', breed:'Shitzu ', age:'3', host:'person2-Kim'},
];
 
let res = clients .filter(dog => dog.age.match('3'));
console.log(res); //volt, darong객체 출력됨