Algorithm Day(reduce, map, spread operator)

pr64061(doll_game).js (프로그래머스 64061문제 - 다른 풀이)

함수가 어떻게 실행되는지 이해하기 위해서 reduce, map 메서드, spread 연산자 학습.

const transpose = matrix =>
    matrix.reduce(
        (result, row) => row.map((_, i) => [...(result[i] || []), row[i]]),
        []
    );

 

📌 reduce()

1. 두 번째 매개변수인 initialValue를 통해서 반환 값을 자유롭게 지정할 수 있다. (여러 자료형 가능)
2. map, filter, find 함수로 구현할 수 있는 기능은 모두 reduce로도 가능하다.

✱ 매개변수

// initialValue는 optional
arr.reduce(callback() [, initialValue);

• callback : 배열의 각 요소에 대해 실행할 함수.

  • accumulator : 콜백의 반환값을 누적
  • currentValue : 현재 요소
  • currentIndex(opt) : 현재 요소의 인덱스
  • array(opt) : reduce호출 배열

• initialValue(opt) : 콜백의 최초 호출에서 첫 번째 인수로 제공하는 값. 생략하면 배열의 첫 번째 요소.(빈 배열에선 오류 발생)

✱ 반환값

• 누적 계산의 결과 값. 여러 자료형이 가능
• initialValue 매개변수로 빈 객체를 넣어 객체를 반환하게 함.

const fruit = ['apple', 'grape', 'banana', 'apple', 'orange', 'grape', 'apple', 'orange'];

const result = fruit.reduce((object, currentValue) => {
    if (!object[currentValue]) {
        object[currentValue] = 0;
    }
    object[currentValue]++;
    return object;
}, {});
// result = { apple: 3, grape: 2, banana: 1, orange: 2 }

const arr = ['a', 'b', 'c', 'c', 'd', 'b', 'a', 'c', 'a'];

const result = arr.reduce((acc, curr) => {
    acc[curr] = ++acc[curr] || 1;
    return acc;
}, {});
// result = { a: 3, b: 2, c: 3, d: 1 }

 

📌 map()

1. forEach, map - 배열 순회 후 원소 값을 가공해 로직 완성하는 메서드
2. 차이점은 수정된 배열을 리턴하는지 여부에 있다.
3. 가공 후 배열을 리턴 받을 때는 map, 기존 배열을 가공하여 평균, 합산 등을 구할 때는 forEach를 사용한다.

✱ 매개변수

arr.map(callback() [, thisArg);

• callback : 새로운 배열 요소를 생성하는 함수
  • currentValue : 현재 요소
  • index(opt) : 현재 요소 인덱스
  • array(opt) : 호출 배열
• thisArg(opt) : this로 사용되는 값

✱ 반환값

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

 

📌 srpead operator

spread operator vs rest parameter 비교 공부 더 필요

배열이나, 문자열 등의 iterable을 개별 요소로 분리한다.

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

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

const aArr = [1, 2, 3];
const bArr = [3, 4, 5];

console.log(aArr.concat(bArr)); // [1, 2, 3, 4, 5, 6]
console.log([...aArr...bArr]);  // [1, 2, 3, 4, 5, 6]

 

📌 rest parameter

// 반드시 마지막 파라미터에 ...을 붙여서 사용
const add = (a, b, ...rest) => {
    console.log(a);  // 5
    console.log(b);  // 3
    console.log(rest); // [9, 2, 1, 6]
}
add(5, 3, 9, 2, 1, 6);

// 파라미터 이름은 자유롭게 가능
const add2 = (one, two, ...args) => {
}

// 모든 파라미터 지정 가능
const add3 = (...allValues) => {
    console.log(allValues) // [1, 2, 3, 4, 5]
}
add3(1, 2, 3, 4, 5)