JS 반복 map(), filter(), reduce()

map()

배열.map(value, index, array => 리턴값);
value는 필수값, index와 array는 선택값
배열의 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환한다!

    const nums = [1,2,3,4,5];
    let numMap = nums.map(val => val * 2);
    console.log(numMap);

nums 배열의 각 요소에 모두 2를 곱한 후 그 배열을 반환한다.

결과 : [2,4,6,8,10]

numMap = nums.map((val, idx, arr) => {
        console.log("value = ", val, "index = ", idx, "array = ", arr);
        console.log(val * 3);
    });

nums를 길이만큼 반복하기 때문에 각 요소, 인덱스, 원 배열을 확인하는 것도 가능

    value =  1 index =  0 array =  Array(5)
    3
    value =  2 index =  1 array =  Array(5)
    6
    value =  3 index =  2 array =  Array(5)
    9
    value =  4 index =  3 array =  Array(5)
    12
    value =  5 index =  4 array =  Array(5)

 

filter()

배열.filter((value, index, array) => 리턴값);
value는 필수값, index와 array는 선택값
배열의 각 요소에 대해 주어진 함수의 결과가 true인 요소만 모아 새로운 배열을 반환한다!
map은 무조건 반환이지만 filter는 boolean 체크를 해서 true인 값만 배열에 담아 반환하는 차이점이 있다.

const nums = [1,2,3,4,5];
let numFilter = nums.filter(val => val > 2);
console.log(numFilter);

화살표 옆의 조건을 true로 통과한 val값만 새로운 배열에 저장된다.

val이 2보다 큰 값만 조건을 통과하기 때문에 1과 2는 새 배열에 담길 수 없다.

따라서 결과는 [3,4,5]가 된다.

   const lit = ['apple', 'banana', 'cat', 'dog', 'eleven', 'five'];
   litFilter = lit.filter(val => val.length > 4);
   console.log(litFilter);

lit 배열엔 총 6개의 값이 있지만 

filter에서 값의 길이가 4보다 커야만 조건을 통과해 새 배열에 담길 수 있기 때문에 

litFilter에는 ['apple', 'banana', 'eleven']만 담길 수 있다.

 

reduce()

배열.reduce((accumulator, currentValue, currentIndex, array) => {},초기값);

reduce는 배열의 길이만큼 반복을 하면서 값을 리턴해 그것을 accumulator에 더할 수 있다.

최종적으로는 모든 값이 더해진 accumulator를 리턴한다.

accumulator, currentValue는 필수값, currentIndex, array는 선택값

초기값은 입력하게 되면 초기값부터 계산이 시작되고, 생략 시 배열의 첫 번째 요소부터 계산이 된다.

    const nums = [1,2,3,4,5,6,7,8,9,10];
    let numFilter = nums.reduce((acc, val) => acc + val);
    console.log(numFilter);

숫자가 담긴 배열 nums를 길이만큼 반복하면서 acc에 acc+val를 계속 담는다.

마치 acc += acc + val인 모습과도 같다.

초기값을 생략했기 때문에 1부터 더해져 결과적으로 55를 리턴한다.

    const nums = [1,2,3,4,5,6,7,8,9,10];
    let numFilter = nums.reduce((acc, val) => acc + val, 10);
    console.log(numFilter);

만약에 acc의 초기값으로 10을 주게 되면 acc에 이미 10이 할당된 상태로 값이 계속 누적되기 때문에

65를 리턴하게 된다.

    const nums = [1,2,3,4,5,6,7,8,9,10];
    let numFilter = nums.reduce((acc, val) => val);
    console.log(numFilter);

만약에 acc+val로 쓰지 않고 그냥 val만 쓰게 된다면 

nums[0] 때 acc = 1이 되고 nums[1] 때 acc = 2가 되는 식으로 값이 누적되지 않는다.

따라서 제일 마지막 밸류 값인 10을 리턴하게 된다.

filter() 사용
    numFilter = nums.filter(val => val % 2 == 0)
    console.log(numFilter); // [2, 4, 6, 8, 10]

=============================================================================================
reduce() 사용
	numFilter = nums.reduce((acc, val) => {
        if(val % 2 == 0){
            acc.push(val);
        }
        return acc;
    },[]);
    console.log(numFilter); // [2, 4, 6, 8, 10]

reduce는 map이나 filter처럼 사용할 수도 있다.

위의 코드는 reduce를 filter처럼 사용한 코드다.

nums의 요소가 2의 배수일 경우에만 acc에 push를 한 것인데, acc의 초기값을 배열로 선언해야 가능하다.

주의할 점은 acc에 push를 하고 acc를 꼭 리턴해줘야 한다!