4. 배열 트레이닝 💪

목표

Array의 메소드 filter, map, sort, reduce를 연습해 보자.
이번 과제는 웹페이지를 만드는 것이 아니라 정적인 배열을 이용해서 8가지의 문제를 푸는 것이다.

filter

배열의 원소에 차례대로 접근해서 조건을 만족하는 원소로만 구성된 새로운 배열을 반환한다.

Array.prototype.filter()

const filteredArray = array.filter((item) => {
	if item matches the condition {
    	return true;
    } else {
        return false;
    }
});

filter는 현재 원소를 변수로 갖는 콜백함수 하나를 받는데, 이 함수가 true를 반환하면 결과에 포함하고, false를 반환하면 결과에서 제외된다.
예제에서 1500년대에 태어난 사람만 선택하기 위해 다음과 같이 사용했다.

const filterAnswer = inventors.filter(
	(inventor) => inventor.year >= 1500 && inventor.year < 1600
);

map

배열의 원소에 차례대로 접근해서 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

Array.prototype.map()

const mappedArray = array.filter((item) => {
	return mappedItem(item);
});

예제에서 발명가의 이름을 형식에 맞춰 정리하기 위해 다음과 같이 사용했다.

const mapAnswer = inventors.map(
	(inventor) => `${inventor.last}, ${inventor.first}`
);

sort

배열을 조건에 따라 정렬한다. 원래 배열을 mutate 시킨다! 원래 배열을 보존하고 새로운 배열을 얻으려면 같은 방식으로 작동하는 toSorted()를 사용하면 된다.

Array.prototype.sort() / .toSorted()

const sortingFunction = (a,b) => {
    if a precedes b {
    	return 1;
    }
    if b precedes a {
        return -1;
    }
    return 0;    // a and b have same order
};

array.sort(sortingFunction);
const sortedArray = array.toSorted(sortingFunction);

예제에서 태어난 연도에 따라 정렬하기 위해 다음과 같이 사용했다.

const sortAnswer = inventors.toSorted(
	(a, b) => a.year - b.year
);

reduce

배열의 원소에 차례대로 접근해서 함수를 누적으로 실행한 결과를 반환한다. 예를 들어 배열 전체를 더한 값을 구할 때, 원소를 종류별로 셀 때 사용할 수 있다.

Array.prototype.reduce()

const reducedResult = array.reduce((prevResult, curItem) => {
	const newResult = reducer(prevResult, curItem);
    return newResult;
}, initialResult);

initialResult를 지정하지 않으면 배열의 첫번째 원소를 사용하고 다음 원소에 대해 reducer를 실행한다. 단순히 합을 구하는 것처럼 간단한 경우가 아니라면 오류가 발생할 가능성이 높다.
예제에서 살아온 기간의 합을 구하기 위해 다음과 같이 사용했다.

const reduceAnswer = inventors.reduce((previous, current) =>
	previous + current.passed - current.year
,0);

정리

array의 메소드인 filter, map, sort(toSorted), reduce를 사용해 보았다. filter, map은 많이 사용해 봤고 sort도 가끔 사용해 봤지만 reduce는 이번에 처음 알게 됐다. 또한 sort 함수 역시 객체를 정렬할 때 사용해 보지는 않아서 이번 기회에 정확한 작동 방식을 공부해 볼 수 있었다. 추가로 sort의 대안으로 2023년 새롭게 표준에 추가되었다는 toSorted 역시 전에 유튜브에서 보아 어렴풋이 알고는 있었지만 직접 써본 것은 처음이었다. sort와 reduce의 작동 원리를 정확히 이해하는 게 조금 어려웠지만 제대로 익히고 나면 쓰임새가 많을 것 같았다.

여담으로 이 강의를 듣기 전까지 제목인 Array Cardio가 대체 무슨 뜻인지 궁금했었는데, 아마 배열 몸풀기? 트레이닝? 이라는 뜻으로 쓴 것 아닐까...

소스 코드

Visit Github Repository