Developer_hong

map, reduce, reduceRight 본문

프로그래밍/Java.Script

map, reduce, reduceRight

Developer_hong 2022. 11. 4. 02:47
반응형

map

 

반복문을 돌면서 배열 안의 요소를 1대1로 매핑한다고 이해하면 됩니다

어떻게 매핑할것인지를 함수 내부에 정의하면 된다

참고사항으로 map은 배열을 매핑해줄 뿐 기존 객체를 수정하지 않는다

 

배열.map( (요소, 인덱스, 배열) => { return 요소 }) ;

 

// 기본 사용 방법

const numbs = [1, 2, 3];

let result = numbs.map( (n) => {

   console.log(n);

   return n;

});

 

-> 결과 :  1, 2, 3 (result 에는 [ 1, 2, 3 ] 저장됨)

 

 

// 각 요소의 짝수, 홀수 여부

const numbs = [1, 2, 3];

result = numbs.map(n) => {

    if ( n % 2) {

        return "홀수";

     }

     return "짝수";

});

 

-> 결과 : result에는 [ '홀수', '짝수', '홀수' ] 저장됨

 

 

 

 

reduce

덧셈 함수로 잘못들 알고 있는 경우가 많은데, 대부분 예시로 덧셈을 들어서 그렇다

누적 값을 사용한다고 이해하면 된다

참고사항으로 초기값을 적어주지 않는 경우에는 0번째 인덱스의 값이 초기값이 된다

 

배열.reduce( (누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초기값 );

 

// 숫자의 합 (초기값 0 )

const numbs = [1, 2, 3];

result = numbs.reduce( (acc, cur, i) => {

    console.log ( acc, cur, i );

    return acc + cur;

}, 0 );

 

-> 결과 : ( result에는 6이 저장됨 )

0 1 0

1 2 1

3 3 2

 

// 숫자의 합 (초기값 0 )

const numbs = [2, 3, 4];

result = numbs.reduce( (acc, cur, i) => {

    console.log ( acc, cur, i );

    return acc + cur;

});

 

-> 결과 : ( result에는 9가 저장됨 ), 초기값이 없어서 0번째 인덱스에 해당하는 1이 초기값이 되고, 인덱스는 1부터 시작한다

2 3 1

5 4 2

 

 

 

reduceRight

reduceRight와 reduce의 동작은 같다

하지만 요소 순회를 오른쪽에서부터 왼쪽으로 한다는 점이 다르다

 

// 숫자의 합 (초기값 0 )

const numbs = [1, 2, 3];

result = numbs.reduce( (acc, cur, i) => {

    console.log ( acc, cur, i );

    return acc + cur;

}, 0 );

 

-> 결과 : ( result에는 6이 저장됨 )

0 3 2

3 2 1

5 1 0

 

반응형