[JS30] JavaScript30 Day 4

서론

오늘은 HTML이나 CSS 건드는 것은 하나도 없다. 오직 JS Array를 어떻게 다루는지에 관해서 공부한다.

구현

링크

Array Cardio Day 1

Task

1. filter()
2. map()
3. sort()
4. reduce()

1. filter()

Array.prototype.filter()

filter 라는 이름 그대로, filter() 메소드는 조건에 충족하는 요소들을 모아 새로운 배열로 반환한다.

여기 inventors 라는 객체가 있다. 이 객는 first, last, year와 passed라는 속성을 가지고 있다.

이 객체의 배열 중에서 year >= 1500 && year < 1600 조건을 만족하는 객체를 찾고 싶다. 이럴 때 filter()를 사용하는 것이다.

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

for (let i = 0; i < 5; i++) {
   let inventor = inventors[i];
   if (inventor.year >= 1500 && inventor.year < 1600)...
}

inventors라는 배열을 inventor라는 변수에 담아, inventor.year가 조건을 만족하는 객체들을 모아서 배열로 return하는 것이다.

2. map()

Array.prototype.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여, 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

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

inventor라는 변수에 객체를 넣은 뒤 화살표 뒤의 함수를 실행한 뒤, 그 결과들을 모아 새로운 배열은 반환한다.

3. sort()

Array.prototype.sort()

sort()는 이름 그대로 정렬을 해주는 함수이다. sort()는 내부에서 실행한 함수의 반환 값에 따라서 정렬해준다.

우선 a, b라는 변수에 각각 객체를 넣은 뒤, a-b를 하였을 때 반환 값 < 0 이면 a가 b보다 앞에 있어야 한다, 반환 값 = 0이면 순서 변화 없음, 반환 값 > 0이면 b가 a보다 앞에 있어야 한다라는 해석 결과에 따라 a와 b의 순서를 변경한다. sort() 원리

4. reduce()

Array.prototype.reduce()

배열의 각 요소에 대해 callback을 실행하며 최종 결과는 하나의 값이 된다.

callback 함수가 돌아가는 동안 네 가지 인수를 받는다. accumulator는 콜백의 반환 값을 누적한다. currentValue는 처리할 현재 요소이다. 이 두 개는 필수 요소이다.

callback함수가 돌아가면서 total에 inventor.passed - inventor.year)의 값을 저장하는 것이다. 그런 다음에 최종적으로 누적 계산의 결과 값, 즉 total을 반환하는 것이다.

TLD

sort와 map은 이전부터 사용하고 있었지만 어떻게 돌아가는지 잘 모르고 사용하고 있었다.

나머지 함수들은 처음 보는 건데 이참에 모두 공부해서 좋았다.

최종 코드

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

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

const birthdate = inventors.sort((a, b) => {
  return a.year - b.year;
});

const lifeTime = inventors.reduce((total, inventor) => {
  return total + (inventor.passed - inventor.year);
}, 0);

const yearsLived = inventors.sort((a, b) => {
  return (b.passed - b.year) - (a.passed - a.year);
});