배열 연산2 (filter, reduce)

GoGoDev·2022년 1월 27일
0

JS & TS

목록 보기
10/11

데이터

type Book = {
    title: string;
    copyright?: string;
    author?: string;
}

const books: string[] = [
    "신",
    "뇌",
    "개미",
    "파피용",
    "제 3인류"
]

filter

const bookTitleToBookObject = (book: string) => ({ title: book });
const makeAuthor = (name: string) => (book: Book) => ({
    ...book,
    author: name,
})

const bernardTwoBooks: Book[] = books
    .map(bookTitleToBookObject)
    .map(makeAuthor("Bernard Werber"));

const ant: Book[] = bernardTwoBooks.filter((book: Book) =>
    book.title.includes('개미')
)

console.log(ant); // [ { title: '개미', author: 'Bernard Werber' } ]

map 함수는 인자로 제공한 함수가 리턴한 값을 모두 모아서 리턴해준다. 즉 입력 갯수와 출력 갯수가 갔다.
filter 함수는 입력한 값중 true인 경우만 모아서 리턴해 주기 때문에 입력 갯수와 출력 갯수가 다르다.

reduce

const numbers: number[] = [10, 5, 3, 14, 56];

const sumNumber = numbers.reduce((a: number, b: number) => a + b, 0);

console.log(sumNumber);

reduce 함수가 실행되면 reduce함수의 초깃값인 2번째 인자 0이 1번째 인자인 함수에 들어있는 a라는 값으로 들어간다. 1번째 인자인 함수에 2번째 인자인 b는 numbers의 첫번째 10이 들어간다.
reduce함수가 한번 순회하면 a에는 a+b값이 들어가고 b에는 numbers 배열에서 다음 값이 들어간다. 즉 a에는 10이 들어가고 b에는 5가 들어간다.

reduce 심화

type someObject = {
    [key: string]: string | number;
};

const someObjects: someObject[] = [
    { border: "none" },
    { fontSize: 24 },
    { className: "box sm-box" }
];

const sumObject: someObject = someObjects.reduce(
    (a: someObject, b: someObject) => ({ ...a, ...b }),
    {}
);

console.log(sumObject); // { border: 'none', fontSize: 24, className: 'box sm-box' }

someObjects는 someObject 타입을 가진 배열이다. sumObject는 객체들을 합치는 함수이다.
someObjects는 객체로 이루어진 배열이기 때문에 a와 b에는 객체가 들어온다.

reduce는 배열 안에 있는 데이터를 누적해서 숫자합산 or 객체 merge하는 등 동작하는 구조를 제공하는 함수

profile
🐣차근차근 무럭무럭🐣

0개의 댓글