JavaScript : Array.(forEach, map, filter, reduce)

Array를 처리하는 기능들

 

1. forEach : Array.forEach((value, index, array) => { 수행 코드 });

  - value : 요소 값

  - index : index 값

  - array : Array 원본

testList = [1, 2, 3, 4, 5];

testList.forEach((num, idx) => {
  console.log(num, idx);
});

// 실행 결과
1 0
2 1
3 2
4 3
5 4

 

2. map : Array.map((value, index, array) => { 수행 코드 });

  - value : 요소 값

  - index : index 값

  - array : Array 원본

 

forEach와 다른 점은 map은 새로운 Array를 return

testList = [1, 2, 3, 4, 5];

const returnList = testList.map((num) => {
    return num * 2;
});

console.log(returnList);

//실행 결과
[2, 4, 6, 8, 10]

 

3. filter : Array.filter((value, index, array) => { 수행 코드 });

  - value : 요소 값

  - index : index 값

  - array : Array 원본

 

배열 각 요소에 대하여 주어진 함수의 결과가 true인 요소를 모아 새로운 배열을 반환

testList = [1, 2, 3, 4, 5];

let returnList = testList.filter((num) =>{
    return num % 2 == 0;
})

console.log(returnList);

//실행 결과
[2, 4]

 

4. reduce : Array.reduce((accumulator, currentValue, currentIndex, array) => { 수행 코드 }, initialValue)

  - accumulator : callback의 return 값을 누적

  - currentValue : 현재 요소 값

  - currentIndex : 현재 index 값

  - array : Array 원본

  - initialValue : reduce 초기 값

 

배열의 각 요소에 대하여 reduce 함수를 실행하고 하나의 결과 값을 return

모든 Array value가 reduce 함수를 실행하게 하려면 반드시 initialValue 값을 줘야 한다.

 

 - initialValue를 주지 않았을 경우

testList = [1, 2, 3, 4, 5];

let valueSum = testList.reduce((sum, num) => {
    console.log(num);
    return sum += num;
});

console.log(valueSum);

//실행 결과
2
3
4
5
15

initialValue를 주지 않는 경우 accumulator 값이 배열 index 0번째 값이 들어가면서 그 다음 index를 실행하기 때문에 총 4번 호출 된다.

 

- initialValue를 준 경우

testList = [1, 2, 3, 4, 5];

let valueSum = testList.reduce((sum, num) => {
    console.log(num);
    return sum += num;
}, 0);

console.log(valueSum);

//실행 결과
1
2
3
4
5
15

initialValue를 준 경우에는 accumulator 값에 initialValue이 들어간 상태로 실행하기 때문에 index 0번부터 실행하여 총 5번 호출 된다. 그렇기 때문에 모든 value에 대해서 reduce 함수를 실행하고 싶다면 반드시 initialValue에 값을 넣자.