JavaScript ES6 정리 - forEach, map, reduce
이번 포스팅에서는 자주 쓰이는 메소드 forEach, map, reduce에 대해 알아보자!
forEach, map, reduce 모두 ES6에서 등장한 메소드들은 아니다.
하지만 JS로 코드를 작성할 때 많이 쓰이는 메소드들이며 Arrow Function과 함께 많이 쓰여서 정리하기로 했다!
- forEach : for문을 돌리는 것과 같은 개념
- map : for문을 돌려서 새로운 배열을 만드는 것이 목적
- reduce : for문을 돌려서 최종적으로 다른 무언가를 만드는 것이 목적
forEach
Array.prototype.forEach(callback[, thisArg])
- callback: function (currentValue[, index[, originalArray]])
- currentValue: 현재 값
- index: 현재 값의 인덱스
- originalArray: 원본 배열
- thisArg: this에 할당할 대상. 생략 시 global객체
※ […] 안에 들어간 부분 생략가능
const a = [0, 1, 2];
a.forEach(
function (value, index, arr) {
console.log(value, index, arr, this);
},
[10, 11, 12]
);
/* Arrow Function */
a.forEach(
(v, i, arr) => {
console.log(v, i, arr, this);
},
[10, 11, 12]
);
/*
Result
0 0 [ 0, 1, 2 ] [ 10, 11, 12 ]
1 1 [ 0, 1, 2 ] [ 10, 11, 12 ]
2 2 [ 0, 1, 2 ] [ 10, 11, 12 ]
Arrow Function Result
0 0 [ 0, 1, 2 ] {}
1 1 [ 0, 1, 2 ] {}
2 2 [ 0, 1, 2 ] {}
*/forEach 메소드의 활용법은 위와 같다. 다른 언어에서는 index, value.. 순인 경우가 있는데 나는 via (value, index, arr)로 외웠다.
위 메소드를 Arrow Function으로 대부분 작성하여 활용하겠지만, Arrow Function은 this를 바인딩하지 않는다.
따라서 위 예시를 Arrow Function으로 바꾸어 출력하면 this는 출력되지 않는다는 것을 확인하자!
map
Array.prototype.map(callback[, thisArg])
- callback: function (currentValue[, index[, originalArray]])
- currentValue: 현재값
- index: 현재 값의 인덱스
- originalArray: 원본 배열
- thisArg: this에 할당할 대상. 생략 시 global객체
※ […] 안에 들어간 부분 생략가능
const a = [1, 2, 3];
const b = a.map(
function (v, i, arr) {
console.log(v, i, arr, this);
return this[0] + v;
},
[10]
);
console.log(b);
/* Arrow Function */
const c = a.map((v, i, arr) => 10 + v);
console.log(c);
/*
Result
1 0 [ 1, 2, 3 ] [ 10 ]
2 1 [ 1, 2, 3 ] [ 10 ]
3 2 [ 1, 2, 3 ] [ 10 ]
[ 11, 12, 13 ]
Arrow Function Result
[ 11, 12, 13 ]
*/map은 특정한 배열로 새로운 배열을 만드는 것이 목적이기 때문에 다른 변수에 반환되는 배열을 할당한다.
또한, forEach와 마찬가지로 Arrow Function은 this를 바인딩하지 않는다는 점을 확인하자!
reduce
Array.prototype.reduce(callback[, initialValue])
- initialValue: 초깃값. 생략 시 첫 번째 인자가 자동 지정되며, 이 경우 currentValue는 두 번째 인자부터 배정된다.
- callback: function (accumulator, currentValue[, currentIndex[, originalArray]])
- accumulator: 누적된 계산값
- currentValue: 현재값
- currentIndex: 현재 값의 인덱스
- originalArray: 원본 배열
※ […] 안에 들어간 부분 생략가능
const arr1 = [10, 20, 30, 40, 50];
const res = arr1.reduce(function (
accumulator,
currentValue,
currentIndex,
arr
) {
console.log(accumulator, currentValue, currentIndex, arr);
return accumulator + currentValue;
},
10);
console.log(res);
/* Arrow Function */
const arr2 = [10, 20, 30, 40, 50];
const res2 = arr2.reduce((a, c) => a + c, 10);
console.log(res2);
/*
Result
10 10 0 [ 10, 20, 30, 40, 50 ]
20 20 1 [ 10, 20, 30, 40, 50 ]
40 30 2 [ 10, 20, 30, 40, 50 ]
70 40 3 [ 10, 20, 30, 40, 50 ]
110 50 4 [ 10, 20, 30, 40, 50 ]
160
Arrow Function Result
160
*/for문을 돌려서 최종적으로 다른 무언가를 만드는 것이 목적인 reduce는 숫자의 합, 문자 배열을 하나의 String으로 만드는 등 개발자의 입맛대로 다양한 결과를 얻을 수 있다.
마무리
21년 1월 1일의 포스팅이다 !
새해가 되면서 작년의 나는 어땠나 생각해보았다.
나에게는 고민이 많은 해였던거 같다…
내가 하고 싶은 일은 무엇인가? 하고 싶은 일을 하기 위해 지금 내가 해야 할 일은 무엇인가?
많이 고민하고 선택한 일들도 있지만 크게 후회할 만한 선택을 하지 않은 것 같다!
또, 나는 어떤 성장을 했나.. 생각해봤지만 내가 만족할 만큼의 성장은 하지 못했다.
하지만 좋은 사람들을 많이 만나 인연을 이어갈 수 있는 뜻깊은 한 해였다.
21년, 올해는 바로 내일부터 개발 동아리도 시작하고 여러 프로젝트가 벌써 기다리고 있다!
홧팅 !!! 🤩🤩🤩
원래 Parameter도 정리하려고 했으나 너무 길어 짜르고 다음 편에 작성해야겠다.
안뇽 ~ 😛😛
본 포스팅은 인프런 강의 Javascript ES6+ 제대로 알아보기를 공부하며 정리한 포스팅입니다!