Day 4 - Array Cardio Day 1

완성 코드 - script part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's

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

console.table(fifteen);

// Array.prototype.map()
// 2. Give us an array of the inventors first and last names

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

console.log(fullNames);

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest

const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));

console.table(ordered);

// Array.prototype.reduce()
// 4. How many years did all the inventors live all together?

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

console.log(totalYears);

// 5. Sort the inventors by years lived

const oldest = inventors.sort((a, b) =>
  a.passed - a.year > b.passed - b.year ? -1 : 1
);

console.table(oldest);

// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

// const category = document.querySelector(".mw-category");
// const links = Array.from(category.querySelectorAll("a"));
// const de = links
//   .map((link) => link.textContent)
//   .filter((streetName) => streetName.includes("de"));
// console.log(de);

// 7. sort Exercise
// Sort the people alphabetically by last name

const alpha = people.sort((a, b) => {
  const [aLast, aFirst] = a.split(", ");
  const [bLast, bFirst] = b.split(", ");
  return aLast > bLast ? 1 : -1;
});

// 8. Reduce Exercise
// Sum up the instances of each of these
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];

const transportation = data.reduce((obj, item) => {
  if (!obj[item]) obj[item] = 0;
  obj[item]++;
  return obj;
}, {});

console.log(transportation);

Map, Reduce, Filter, Sort in JS

이번 Day 4의 과제는 명과제였다. 역시 기본이 제일 중요하고, 기본에 가장 충실해야 한다. 의미없는 for loop를 사용해서 가독성을 떨어뜨리지 않고, Map, Reduce, Filter, Sort 사용으로 효율적인 데이터 연산을 할 수 있다.

Map

Map Method의 기본 형식이다.

1
2
3
배열.map((요소, 인덱스,배열)=>{
    return 요소
});

기본 원리는 간단하다. 반복문을 돌며 배열 안의 요소들은 1:1로 짝지어 준다. 그래서 매핑한다 고 표현한다.

이번 과제에서 Map을 사용한 방법이다.

1
2
3
const fullNames = inventors.map(
        (inventor) => `${inventor.first} ${inventor.last}`
      );

inventors 객체에 map 연산으로 요소 inventor의 first, last 데이터를 합쳐서 return한다. Arrow Function의 인자로 inventor가 들어갔는데 i로 해도 되고 아무렇게나 해도 상관없다. (하지만 클린 코드 를 지향하자)

Reduce

Reduce Method의 기본적인 형식이다.

1
2
3
배열.reduce((누적값, 현재값, 인덱스, 요소) => {
    return 결과
}, 초기값);

누적값으로 연산하기에 흔히 덧셈으로 예시를 들곤 하지만, 덧셈 함수는 아니다.

이번 과제에서 Reduce를 사용한 방법이다.

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

inventor 요소의 passed, year 값의 차를 total에 누적해서 더한다. total이 어디서 초기화되었냐면, }, 0);에서 0으로 누적값을 선언함과 동시에 초기화할 수 있다.

Filter

Filter는 이름 그대로 요소들을 걸러내는 것이 목적이다. filter에서 작성한 함수에서 나오는 리턴 값이 true이냐 false이냐를 기준으로 true의 값만 걸러내어 새로운 배열을 만들어낸다.

이번 과제에서 Filter를 사용한 방법이다.

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

inventors에서 year 값이 1500~1599인 요소만 fifteen 배열에 다시 넣는다. return true, return false의 표현이 저기서 없는 이유는 inventor.year >= 1500 && inventor.year < 1600 표현 자체가 조건문이라서 boolean형 데이터를 반환하기 때문에 굳이 if ~ 표현이 필요없다.

Sort

Sort Method는 정렬할 함수를 임의로 작성해도 되고, 그냥 Array.sort()로 사용해도 된다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

이번 과제에서는 임의의 정렬 함수를 작성하여 사용하였다.

1
const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));

inventors의 year순으로 정렬하기 위해 positive, negative의 값을 기준으로 sort한다.