Reduce 함수의활용
앞서 살펴본 것처럼 Reduce함수의 기본적인 이용(내가 느끼기에는 단순히 수를 곱하고 더하고 빼고등의 산술적인 계산..)은 매우 쉽다.
하지만, 이를 내가 원하는대로 배열을 바꾸는데 사용할때에는 어려움을 많이 겪어, 이에 대해 자세히 다뤄보려고 한다.
string 값을 가지고 있는 배열에 적용
let arr = ['적게 ', '일하고 ', '많이 ', '돈벌자']
let result = arr.reduce((a, c) => a+c));
를 하게 되면 '적게 일하고 많이 돈벌자'라는 string이 생기게 된다.
역시 별로 어렵지 않다.
하지만, 이걸 객체를 value로 가진 array에 적용하게 된다면 생각이 좀 더 필요하게 된다.
잠시 아래의 예제를 보고 넘어가자.
let list = [
[
['age', 30],
['name', 'Mark'],
['gender', 'male'],
],
[
['age', 25],
['name', 'Olivia'],
['gender', 'female'],
],
[
['age', 23],
['name', 'gun'],
['gender', 'male']
]
]
라는 배열이 있다고 하자. 각배열의 0번째 인덱스를 키, 1번째 인덱스를 값으로 가지는 객체로 정리를 하고 싶다면,
아래와 같은 함수를 실행시키면 되게 된다.
let result =[];
const organize = function(arr) {
arr.map(function(el){ // 각 한명의 배열정보를 el로 받아 map으로 돌린다.
let obj = {}; // 빈 객체 선언 (즉, 객체 초기화, 객체는 주소값을 가지기 때문에 초기화필요))
el.reduce((a, c)=> obj[c[0]] = c[1], 0), // 각 배열의 첫번째 인덱스는 키로, 두번째 오는 값은 값으로 받도록 obj 설정.
result.push(obj) // 해당 obj를 result로 넣기.
})
}
여기에서 자세히 보아야 할 부분은 reduce나 map을 일반적으로 사용하는 것이 아니라, 그 작동방식이 각 element들을 뽑아 for문을 돌리는 것과 비슷하다는 점을 이해하고, 그를 통해 각 요소들을 새로운 객체의 키와 값으로 재배정 했다는 것이다.
또한 obj의 초기화가 매우 중요하다.
예를 들어, let obj = {}문구가 map 위쪽에 선언되게 되면, 초기화가 되지 않고, 그 주소값이 계속 유지가 되기 때문에, 새로운 객체와 값들이 차곡차곡 쌓이는 것이 아니라, 같은 키와값을 가진 3가지 pair가 result에 쌓여 있게 된다.
'FRONTEND > JavaScript' 카테고리의 다른 글
forEach()의 사용 그리고 map()과의 차이 (0) | 2021.05.19 |
---|---|
parseInt() (0) | 2021.05.19 |
고차함수(map, filter, reduce) (0) | 2021.05.07 |
spread 문법과 rest문법 (0) | 2021.04.25 |
클로저(Closure) (0) | 2021.04.25 |