[JavaScript30] 4. Array Cardio Practice (1)

📃 요구사항

주어진 data들을 가지고, 조건에 맞는 결괏값을 console 창에 띄운다.

 

💻 소스코드

먼저, 주어진 data는 다음과 같다.

// Some data we can work with
const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];

const people = [
  'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
  'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
  'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
  'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
  'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
];

🙄 내가 작성한 코드

// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
const result1 = inventors.filter(
  (inventor) => inventor.year >= 1500 && inventor.year < 1600
);
console.log(result1);

// Array.prototype.map()
// 2. Give us an array of the inventors first and last names
const result2 = inventors.map((inventor) => ({
  first: inventor.first,
  last: inventor.last,
}));
console.log(result2);

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
const result3 = inventors.sort((a, b) => {
  return a["year"] - b["year"] ? 1 : -1;
});
console.log(result3);

// Array.prototype.reduce()
// 4. How many years did all the inventors live all together?
const result4 = inventors.reduce(
  (acc, cur) => acc + (cur.passed - cur.year),
  0
);
console.log(result4);

// 5. Sort the inventors by years lived
const result5 = inventors.sort((a, b) => {
  return a.passed - a.year > b.passed - b.year ? 1 : -1;
});
console.log(result5);

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

// 7. sort Exercise
// Sort the people alphabetically by last name
const result7 = people.sort((a, b) =>
  a.split(",")[1] > b.split(",")[1] ? 1 : -1
);
console.log(result7);

// 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",
];
const result8 = {};

data.forEach((x) => {
  result8[x] = (result8[x] || 0) + 1;
});

console.log(result8);

6번은 어떻게 푸는 것인지 몰라서 패스했다..🤔

 

🤗 개선된 강의 코드

// 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(function (a, b) {
//   if (a.year > b.year) {
//     return 1;
//   } else {
//     return -1;
//   }
// });
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(function (a, b) {
  const lastGuy = a.passed - a.year;
  const nextGuy = b.passed - b.year;

  return lastGuy > nextGuy ? -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 links = [...category.querySelectorAll("a")];
const de = links
  .map((link) => link.textContent)
  .filter((streetName) => streetName.includes("de"));

// 7. sort Exercise
// Sort the people alphabetically by last name
const alpha = people.sort((lastOne, nextOne) => {
  const [aLast, aFirst] = lastOne.split(", ");
  const [bLast, bFirst] = nextOne.split(", ");
  return aLast > bLast ? 1 : -1;
});
console.log(alpha);

// 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",
];

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

 

📖 TIL

console.table()

console.table() 메서드는 data를 표 형식으로 표시한다. 매개 변수는 배열 또는 객체가 될 수 있고, 이것을 시각화하여 보다 명확하게 결괏값을 확인할 수 있다.

console.table()을 이용해서 출력한 1번 문제의 결과값

map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 반복문을 돌면서 배열 안의 요소들을 1대 1로 짝지어 주는 것이다. 어떻게 짝지어줄 것인지 정의한 함수를 메서드의 인자로 넣어주면 된다.

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

const arr = [1, 4, 9, 16];

const map = arr.map(x => x * 2);

console.log(map); // [2, 8, 18, 32]

 

reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환한다.

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

const arr = [1, 2, 3, 4];
const reducer = (prev, curr) => prev + curr;

console.log(arr.reduce(reducer)); // 10
console.log(arr.reduce(reducer, 5)); // 15

 

sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.

🍮 inventors 배열을 passed 기준으로 오름차순 정렬

const sortByPassed = inventors.sort((a, b) => {
  return a.passed > b.passed ? 1 : -1;
});
console.table(sortByPassed);

🍮 inventors 배열을 passed 기준으로 내림차순 정렬

const sortByPassed = inventors.sort((a, b) => {
  return a.passed > b.passed ? -1 : 1;
});
console.table(sortByPassed);

sort()의 결과를 반환할 때, 삼항 연산자(조건식 ? 반환값1 : 반환값2)를 활용하면 효율적으로 할 수 있다.

 

자바스크립트 배열의 내장 함수는 볼수록 어려운 것 같다.. 자주 써보면서 익숙해지는 수밖에 없는 것 같다😕

 

 

 

👀 참고

youtube Wes Bos

https://www.youtube.com/watch?v=HB1ZC7czKRs&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=4 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d