forEach, map, reduce, filter

forEach

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

원본을 변경 시킨다.

 

 

구문

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

매개변수

callback	각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받습니다.
currentValue	처리할 현재 요소.
index	처리할 현재 요소의 인덱스.
array	forEach()를 호출한 배열.
thisArg	callback을 실행할 때 this로 사용할 값.
반환값	undefined

 

const arr = ['apple', 'kiwi', 'grape', 'orange'];

arr.forEach((item, index) => {
  console.log("index: " + index + ", item: " + item);
});

//? output
// index: 0, item: apple
// index: 1, item: kiwi
// index: 2, item: grape
// index: 3, item: orange

 

const myArr = [1, 2, 3, 4, 5];

myArr.forEach((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(array);
});

 

map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

구문

    arr.map(callback(currentValue[, index[, array]])[, thisArg])

callback	새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
currentValue	처리할 현재 요소.
index	처리할 현재 요소의 인덱스.
array	map()를 호출한 배열.
thisArg	callback을 실행할 때 this로 사용할 값.
반환값	배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

 

const arr = [1,3,5,7,9]

arr.map(
    function(num){
        return num + 1;
    }
).forEach(
    function(num){
        console.log(num) // 2,4,6,8,10
    }
)

 

filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

 

구문

    arr.filter(callback(element[, index[, array]])[, thisArg])

callback	각 요소를 시험할 함수.  true를 반환하면 요소를 유지하고,  false를 반환하면 버립니다.
currentValue	처리할 현재 요소.
index	처리할 현재 요소의 인덱스.
array	filter를 호출한 배열.
thisArg	callback을 실행할 때 this로 사용할 값.
반환값	테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

const arr = [ 1, 2, 3, 4, 5]

arr.filter(
    function(num) {
        return num % 2 == 0;	//[2, 4]
    }
);

* filter + forEach

const arr = [ 1, 2, 3, 4, 5]

arr.filter(
    function(x) {
        return x % 2 == 0; // [2, 4]
    }
).forEach ( 
    function(x) {
        console.log(x);	 // 2, 4
    }
);

const arr = [ 1, 2, 3, 4, 5]

arr.filter(
    function(x) {
        return x % 2 == 0; // [2, 4]
    }
).map(
    function(x) {
        return x * 2;  //[4, 8]
    }
).forEach ( 
    function(x) {
        console.log(x);	// 4, 8
    }
);

 

 

reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력할 때 용이하다.

가장 기본적인 예제로는 모든 배열의 합을 구하는 경우

 

리듀서 함수는 네 개의 인자를 가집니다.

1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

구문

    arr.reduce(callback[, initialValue])

callback	배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.
accumulator	누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
currentValue	처리할 현재 요소
currentIndex	처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
array	reduce()를 호출한 배열.
initialValue	callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

 

let arr = [1,2,3,4,5];

let answer = arr.reduce(function(acc, value, index){
	return acc+value;
}, 0);
console.log(answer);   // 15

const arr = [1, 2, 3, 4];

function func(accumulator, currentValue, currentIndex, array) {
  console.log("acc: " + accumulator + ", cur: " + currentValue
    + ", curIndex: " + currentIndex + ", array: " + array);
  return accumulator + currentValue;
}

const sumWithInitial = arr.reduce(func);

// 1 + 2 + 3 + 4
console.log(sumWithInitial);

 

응용)

filter + map 

[ 1, "안녕", "감사", 3].filter(
    function ( x ) {
       return typeof x == "string";
    }
).map(
    function ( x ) {
       return x + "하세요";   //2) ['안녕하세요', '감사하세요']
    }
);

reduce

[ 1, "안녕", "감사", 3].reduce(
    function ( ac, current, index, array ) {
       if ( typeof current == "string" ) {
           ac.push(current + "하세요");
       }
       return ac;  //2) ['안녕하세요', '감사하세요']
    }
, []);

결과는 동일하지만,

• filter+map은 결과를 내기 위해 배열의 loop를 두 번 돌아야 하고,  item을 6번 가지고 와야 합니다. (filter에서 4번, map에서 2번)
• reduce는 배열을 한번의 loop를 돌면서 결과를 만들 수 있습니다. 정확하게는 item을 4번만 가지고 오면 됩니다.

---

요약

• forEach : 한개씩 돌면서 무언가 하기, return value는 없음.
• filter : 조건에 맞는것만 새로운 배열로. return value는 새 배열.
• map : 한개씩 돌면서 연산한 결과를 새로운 배열로. return value는 새 배열
• reduce : 한개씩 돌면서 이전 연산한 결과를 조합하여 사용하기. return value는 reuce 함수안에서 설정한 대로.

 

 

 

참고

https://codechacha.com/ko/javascript-array-reduce/

https://velog.io/@qwe8851/forEach-filter-map-reduce