JavaScript - reduce, map

reduce

reduce 함수 는 배열의 각 요소에 대해 주어진 reducer 함수 를 callbk 함수 로 실행하고 하나의 결과값을 반환함

arr.reduce(callbk(sum[, value[, index[, array]]][, intVal])

callbk
: 배열의 각 요소에 실행할 reducer 함수

reducer 함수가 갖는 4개의 인자값
  - sum : 누적값 (누산기)
  - value : 현재 요소값
  - index : 현재 요소값의 index
  - array : reduce()를 호출한 배열 

intVal
: reducer 함수에 첫번째 누적값으로 제공할 초기 값
( 없으면 배열의 첫번째 요소가 초기값)

return

누적 계산의 결과값

예시

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

//		초기값 없음    	//
arr.reduce((total, now, nowIdx, arr) => {
    console.log("total :", total);
    console.log("now :", now);
    console.log("nowIdx :", nowIdx);
    console.log("arr :", arr);
    console.log("\n");
    return total + now;
});

// 		결과값	   //
total : 1							total : 3
now : 2								now : 3						...
nowIdx : 1							nowIdx : 2
arr : [ 1, 2, 3, 4, 5 ]				arr : [ 1, 2, 3, 4, 5 ]


//		초기값 있음    	//
arr.reduce((total, now, nowIdx, arr) => {
    console.log("total :", total);
    console.log("now :", now);
    console.log("nowIdx :", nowIdx);
    console.log("arr :", arr);
    console.log("\n");
    return total += now;
}, 10);

// 		결과값	   //
total : 10						 total : 11
now : 1							 now : 2						...
nowIdx : 0						 nowIdx : 1
arr : [ 1, 2, 3, 4, 5 ]			 arr : [ 1, 2, 3, 4, 5 ]

const nums = [1, 2, 3]

result = nums.reduce((total, number) => {
  total.push(number % 2 ? '홀수' : '짝수');
  return total;
}, []);

console.log(result);					// ['홀수', '짝수', '홀수']

map

map 함수 는 주어진 배열의 값들을 오름차순으로 접근해 callbk 함수 를 통해 새로운 값으로 정의하고, 신규 배열 을 만들어 반환

arr.map(callbk(value[, index[, array]])[, thisArg])

callbk
: 새로운 배열 요소를 생성하는 함수

callbk 가 갖는 3개의 인자값
  - value : 현재 요소값
  - index : 현재 요소값의 index
  - array : map()을 호출한 배열 

thisArg
: callback 함수를 실행할 때 this 로 사용되는 값

return

배열의 각 요소에 대해 실행한 callbk 의 결과를 모든 새로운 배열

예시

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => number * number);

console.log(numbers);				// [1, 2, 3, 4, 5]

console.log(result);				// [1, 4, 9, 16, 25]

const nums = [1, 2, 3]

result = nums.map((number) => {
  if (number % 2) {
    return '홀수';
  }
  return '짝수';
});

console.log(result); 				// ['홀수', '짝수', '홀수']

// array 요소가 추가되는 경우
const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(number => {
    numbers.push(number);
    return number * number;
});

console.log(result);				// [1, 4, 9, 16, 25];

// array 요소가 수정되는 경우
const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(number => {
    numbers.pop();
    return number * number;
});

console.log(result);				// [1, 4, 9, empty, empty]