javascript 함수 체이닝
다음과 같은 객체 배열이 있다고 가정해 보자.
demoArr: [ {'대상':[1,3]}, {'테스트':[4,2]} ]
여기서 각 객체 안쪽에 있는 키 값중 값에 해당하는 배열들의 맨 마지막 숫자들만 꺼내어 객체 별로 모두 더해 값을 나타내고자 한다.
즉, 위 예시 중 3과 2를 더하고자 한다.
이를 위해 필요하게 된 함수는 map과 reduce 2가지 이다.
우선 각 객체 배열을 돌기 위하여 map을 적용 시켜보자.
demoArr.map(obj => Object.values(obj)[0])
여기서 Object.values()를 통해 ‘obj’의 값들을 배열로 반환 후 ‘[0]’을 통해 첫 번째 값을 추출한다.
이유는 배열로 반환 되었으며 항상 첫 번째 값이 원하는 배열이기 때문이다.
중간결과:
[ [1, 3], [4, 2] ]
다음 각 배열의 마지막 요소를 추출하고자 한다.
.map(arr => arr[arr.length - 1])
‘arr.length -1’은 배열의 마지막 인덱스를 의미 하므로 ‘arr’의 마지막 요소를 추출한다.
중간결과:
[ 3, 2 ]
마지막으로 ‘reduce’를 사용하여 마지막 요소들을 모두 더해보자.
.reduce((acc, curr) => acc + curr, 0)
‘acc’는 누적값이며 ‘curr’은 현재 요소다.
초기값은 ‘0’으로 하여 모든 마지막 요소들을 더한다.
최종결과:
5
최총코드:
let result = demoArr .map(obj => Object.values(obj)[0]) // 각 객체의 값을 배열로 추출 .map(arr => arr[arr.length - 1]) // 각 배열의 마지막 요소를 추출 .reduce((acc, curr) => acc + curr, 0); // 마지막 요소들을 모두 더함
주의사항
첫 번째 map실행시 키가 사라지는 이유!?
Object.values(obj)[0]
를 사용하면 객체의 값만을 추출하고, 해당 키는 유지되지 않는다.
Object.values
는 객체의 값들로 구성된 배열을 반환할 뿐, 키와 값을 쌍으로 반환하지 않기 때문이다.
이렇게 되면 키 ‘대상’과 ‘테스트’는 최종 결과에서 사라지게 됨.
결국 Object.values(obj)[0]
을 사용하면 원래 객체에서 값만 추출되고 키는 사라지게 됨.
따라서 중간 결과에서는 ‘대상’과 ‘테스트’ 키가 더 이상 보이지 않는다.