프론트 하다 보면 자주 쓰는 함수가 있는 map 함수 이다.
map 함수는 기존에 forEach 함수랑 비슷 하다고 생각 하면 된다.
배열.map((요소, 인덱스 , 배열) => { return 요소});
const arr = [1,2,3,4,5,6];
let mapArr = arr.map((v) => {return v});
결과값 : [1, 2, 3, 4, 5, 6]
reduce 함수는 가끔 볼수 잇는 함수 인데 이해를 잘 못하고 사용 하는 경우가 많았던 함수 같다.
이번 기회에 알고 넘어가 보자는 생각으로 찾아 보고 이해를 하기 시작 했다.
먼저 reduce 줄이다 라는 의미를 가지고 있고 배열을 순회 하면서 인덱스 데이터를 줄여가며 어떤한 기능을 수행 할수 있다 라고 하지만 의미를 봐서 도통 이해가 가질 않는데 직접 코드를 돌리면서 이해가 필요한 부분인것 같아서 예시 코드를 가지고왔다.
ex1)
const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const initValue = 0;
const totalResult = numberList.reduce((initialValue, currentValue, currentIndex, array) => {
console.log('initialValue',initialValue);
console.log('currentValue',currentValue);
return initialValue + currentValue;
}, initValue);
결과값 :
initialValue 0,currentValue 1
initialValue 1,currentValue 2
initialValue 3,currentValue 3
initialValue 6,currentValue 4
initialValue 10,currentValue 5
initialValue 15,currentValue 6
initialValue 21,currentValue 7
initialValue 28,currentValue 8
initialValue 36,currentValue 9
initialValue 45,currentValue 10
reduce(initialValue, currentValue, currentIndex, array) 에서
initialValue : initValue => 0
currentValue : 값은 numberList 배열 값들이 순차적으로 들어간다.
currentIndex : 배열 인덱스 값
생각 하면 됩니다. 여기서 덧셈을 해주는 코드 인데 initialValue값은 초기에 0으로 시작 하지면 뎃셈값이 계속 들어가면서 증가 하는걸 알수 있다. 이렇게 누적으로 덧셈값을 더해서 값을 출력 할때 유용하게 쓰이고 있다.
ex2)
const fruit = ['apple', 'grape', 'banana', 'apple', 'orange', 'grape', 'apple', 'orange'];
const result = fruit.reduce((object, currentValue) => {
console.log('object',object);
console.log('object[currentValue]',object[currentValue]);
if (!object[currentValue]) {
object[currentValue] = 0;
console.log('currentValue',currentValue)
console.log('count',object[currentValue]);
}
object[currentValue]++;
return object;
}, {});
console.debug(result);
결과 값
object {}
object[currentValue] undefined
currentValue apple
count 0
object {apple: 1}
object[currentValue] undefined
currentValue grape
count 0
object {apple: 1, grape: 1}
object[currentValue] undefined
currentValue banana
count 0
object {apple: 1, grape: 1, banana: 1}
object[currentValue] 1
object {apple: 2, grape: 1, banana: 1}
object[currentValue] undefined
currentValue orange
count 0
object {apple: 2, grape: 1, banana: 1, orange: 1}
object[currentValue] 1
object {apple: 2, grape: 2, banana: 1, orange: 1}
object[currentValue] 2
object {apple: 3, grape: 2, banana: 1, orange: 1}
object[currentValue] 1
result 값 :
{apple: 3, grape: 2, banana: 1, orange: 2}
또한 이렇게 사용도 가능 하다. 배열값 중에서 해당 배열 갯수를 알수도 있다. 덧셈,뺄셈,곱하기,나머지 계산 등등 조건을 다르게 해서 사용 할수 있다.
예시를 봐도 이해가 잘 되지 않는다면 예시 코드를 콘솔창에 넣고 값을 바꿔 가면서 확인 하면 좀더 이해가 쉬울것이다
필자도 이해가 안가서 값을 다 찍고 변경 하면서 이해를 했다.
그래도 이햬가 안간다면
참고 자료를 보고 다시 한번 보는걸 추천 한다.
참고 자료
https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d
https://youngban.tistory.com/47
