21. map

map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

callback함수

Calls a defined callback function on each element of an array, and returns an array that contains the results.

(배열의 각 요소에 대해 정의 된 Callback 함수를 호출하고 결과를 포함하는 배열을 반환합니다.)

@param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

(@param callbackfn 최대 3 개의 인수를 허용하는 함수입니다. map 메소드는 배열의 각 요소에 대해 callbackfn 함수를 한 번 호출합니다.)

@param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.

(@param thisArg이 키워드가 callbackfn 함수에서 참조 할 수 있는 개체입니다. thisArg를 생략하면 undefined가 이 값으로 사용됩니다.)

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

// -------------------

var obj = [{keyY: 1, name: 'A'}, 
            {keyY: 2, name:'B'},
            {keyY: 10, name: 'C'}];

var mapFunc = obj.map((val) => {
    var robj = {};
        
    robj[val.keyY] = val.name;  // robj[1] = 'A' / robj[2] = 'B' / robj[10] = 'C'
    console.log(val.keyY);      // 1 / 2 / 10
    console.log(robj[val.keyY]);// 'A' / 'B' / 'C'
    console.log(robj);          // {1: "A"} / {2: "B"} / {10: "C"}
    return robj;
});
console.log(mapFunc); // [{1: "A"}, {2: "B"}, {10: "C"}]

22. reduce

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;

reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;

→ 반환값 : 누적 계산의 결과 값.

→ reduce( ( 누적 계산값, 현재값 ) ⇒ { return 계산값 }, [초기값] );

[ callback함수 ]

Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.

(배열의 모든 요소에 대해 지정된 callback 함수를 호출합니다. callback 함수의 반환 값은 누적 된 결과이며 callback 함수에 대한 다음 호출에서 인수로 제공됩니다.)

@param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.

(@param callbackfn 최대 4 개의 인수를 허용하는 함수입니다. reduce 메소드는 배열의 각 요소에 대해 callbackfn 함수를 한 번 호출합니다.)

previous : 누산기 (callback 의 반환값을 누적합니다.)

currentValue : 현재 값 (처리 할 현재 요소)

currentIndex : 현재 인덱스 (처리 할 현재 요소의 인덱스)

array : reduce()를 호출한 배열

※ reduce((prev, curr) ⇒ prev + curr, 1) 처리 순서

초기값이 존재하면 prev 에 넣고 curr 에 배열의 요소를 할당 ⇒ return 값을 prev에 넣고 배열의 요소를 curr에 할당 ⇒ 반복..

초기값이 없으면 prev 에 배열의 요소를 할당, curr 에 배열의 다음 요소를 할당 ⇒ return 값을 prev에 넣고 배열의 요소를 curr 에 할당 ⇒ 반복..

@param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.

(@param initialValue는 initialValue가 지정된 경우 누적을 시작하기 위한 초기 값으로 사용됩니다. callbackfn 함수에 대한 첫 번째 호출은 이 값을 배열 값 대신 인수로 제공합니다.)

[ initialValue ] : 시작 초기값

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => {
    console.log(accumulator + ' - ' + currentValue);
    return accumulator + currentValue;
}

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // -> 초기값 지정(*initialValue)* : 5
// expected output: 15

// ---------------------

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// initialValue 없이 reduce()
var rA1 = [ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
var rA2 = [ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
var rA3 = [                      ].reduce( maxCallback ); // TypeError
console.log(rA1);
console.log(rA2);

// map/reduce로 개선 - 비었거나 더 큰 배열에서도 동작함
var result = [ { x: 22 }, { x: 42 } ]
						 .map( el => el.x )
             .reduce( maxCallback2, -Infinity ); // -> 초기값 지정(*initialValue)* : -Infinity
console.log(result); // 42

• 배열의 모든 수 합치기

  방법들 : for / for of / forEach / reduce

  reduce 의 초기값 미지정시 맨 처음 prev 는 배열의 첫 번째 요소

  reduce 의 초기값 지정시 맨 처음 prev 는 초기값

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 20 },
  { name: "Lon", age: 10 },
  { name: "Eili", age: 8 },
];

// 초기값 => []
const result = userList.reduce((prev, cur) => {
  if (cur.age >= 20) {
    prev.push(cur);
  }
  return prev;
}, []);

console.log(result);

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 20 },
  { name: "Lon", age: 10 },
  { name: "Eili", age: 8 },
];

// 초기값 => 0
const result = userList.reduce((prev, cur) => {
  console.log(`${cur.age}`);
  if (cur.age >= 20) {
    prev += cur.age;
  }
  return prev;
}, 0);

console.log(result);