배열 map과 reduce를 알아두면 다양한 곳에서 코딩할 때 활용할 수 있다. 오늘은 이 둘에 대해 공부해보자!
Map 함수
map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.
배열.map((요소, 인덱스, 배열)=>{return 요소 });
기본 원리는 간단하다. 반복문을 돌며 배열안의 요소들을 1대1로 짝지어주는 것! 매핑한다고 표현한다
fileter, forEach와 같은 구문이다
예시를 통해 Map 함수를 배워보자
1. 배열의 값에 x5를 한 배열을 생성해보자.
let arr = [6,4,2,8];
let result = arr.map(item=>item*5)
.sort((a,b)=>a-b);
console.log(result);
///[10, 20, 30, 40]여기서 item 은 요소가 되고, 요소에서 5를 곱한 값이 그대로 새로운 배열에 저장된다.
map 함수는 기존의 배열을 callbackFunction에 의해 새 배열을 만드는 함수이다.
그러니 기존의 배열이 변하지는 않는다.
2. map 함수는 filter함수와 같이 객체타입도 컨트롤 할 수 있다.
var students = [
{id:1, name:"james"},
{id:2, name:"tim"},
{id:3, name:"john"},
{id:4, name:"brian"}
];
var names = students.map(student =>student.name);
console.log(names);
///['james', 'tim', 'john', 'brian']3. 이번에는 Array를 reverse함수를 사용하여 reverse 해보자
var numbers = [1,2,3,4,5,6];
var numbersReverse = numbers.map(number => number *2).reverse();
console.log(numbersReverse);
//[ 12, 10, 8, 6, 4, 2 ]4. Array 안에 Array가 있는 경우를 보자.
var numbers = [[1,2,3],[4,5,6],[7,8,9]]; //array안에 array가 있는 경우
var newNumbers = numbers.map(array => array.map(number => number *2));
console.log(newNumbers);
///[ [ 2, 4, 6 ], [ 8, 10, 12 ], [ 14, 16, 18 ] ]
Reduce 함수
reduce함수를 많은 사람들이 덧셈으로 알고 있는데, 예시를 덧셈으로 많이 들고 있기 때문이다. reduce는 여러 코드에서 활용할 수 있다. 이번에는 Reduce를 알아보자.
배열.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초기값);
reduce는 이전 값이 아니라 누적 값이다. 초기값은 설정이 되어있지 않으면, 0을 기본값으로 주어진다.
먼저, 흔한 덧셈 예시로 알아보자.
const oneTwoThree = [1, 2, 3];
let result = oneTwoThree.reduce((acc, cur, i) => {
console.log(acc, cur, i);
return acc + cur;
}, 0);
console.log(result);
//0 1 0 - 누적값, 현재값, 인덱스
//1 2 1
//3 3 2
//6 총합이번에는 초기값을 배열로 만들고, 배열에 값을 push하여 map과 같은 역할을 하는 함수 코드를 만들어보자.
let result = oneTwoThree.reduce((acc, cur) => {
acc.push(cur % 2 ? '홀수' : '짝수');
return acc;
}, []);
console.log(result); // ['홀수', '짝수', '홀수']Reduce는 반복되는 모든 것의 누적값을 사용할 때, 활용하면 유용하다.
map과 reduce외에도 배열의 매서드인 sort, filter, every, some, find, findIndex, includes 정도 알아두면 좋다!
물론 reduce가 강력하여 reduce만 있어도 다른 매서드를 구현할 수 있다. 여러 매서드를 배우고 활용하여 좋은 코드를 구현하자!