Wesbos - Array Cardio_1

---

✅ 모든 언어에서 필수적으로 다뤄야 하는,
그리고 굉장히 중요한 영역인 배열을 다루는 챕터였다.

---

기본 사항

이번 챕터에서 다룬 주요 배열 함수들은 순서대로
filter(), map(), sort(), reduce()다.

Javascript에서 배열 = [] 객체={}로 표현한다.
객체는 {key : value}가 기본 형태 🙂

console.log 외에도 console.table(), console.dir() 등을 활용해볼 수도 있다.

table()은 표 형태로 콘솔창에 출력되고,
dir()은 해당 객체의 property들이 출력된다.

// 주어진 배열
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',
];

---

filter()

🔥 array.filter()를 통해 기존 배열을 조건에 맞게 새로운 배열로 반환할 수 있다.

실행결과

//filter를 활용하여 inventors 배열 내에서 "1500년도에 태어난 inventor만"을 새 배열로 추출해보시오.
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year =< 1599));
console.table(fifteen);

---

map()

🔥 array.map()를 통해 배열 내의 데이터를 **”콜백함수”**에 맞게 새로운 배열로 반환!

---

filter와 map의 차이점?

filter는 조건!
map은 콜백(CallBack)함수!

⇒ 이처럼, filter는 콜백함수에 반응하지 앉고 map()만 콜백함수가 조건으로써 적용될 수 있다.
쉽게 생각하면, filter()는 if가 사용되는 배열함수라고 생각하면 될 것 같다.

실행결과

//map() 함수를 사용해서 invertor들의 성과 이름을 통해 Full Name이 담긴 새 배열을 만들어보시오.

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

---

sort()

sort()의 기본형은 글자순으로 자동정렬 or 숫자(앞자리 기준) 기준으로 자동정렬이다.

하지만, 우리가 이번 챕터에서 사용하는 sort()함수는 Compare Function.

즉, 비교 함수로써의 sort()다.

---

Compare Function으로써의 sort()

🔥 array.sort(a,b)를 통해 a와 b를 비교해 “오름차순 또는 내림차순” 정렬 방식을 정하여 반환

array.sort((a, b) => (a.value > b.value ? 1 : -1));
// 즉, a값이 b보다 크면 아래로 내리고, 그 반대라면 작은 것을 위로 올리겠다는 뜻 !
// 0 또한 지정해줄 수 있는데, 이는 a와 b가 같은 값일 때를 의미한다.

실행결과

// sort()를 활용하여 inventors를 나이에 대한 내림차순으로 정렬해보시오.

const orderByBirth = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));
// True라면 1이 부여되어 비교대상보다 위로 올라간다. (모든항 비교해 점수매기기라고 생각해도 될듯)

console.table(orderByBirth);

---

reduce()

🔥 array.reduce(리듀서 함수, 현재값) ⇒ 리듀서 함수를 실행하여 하나의 결과값을 반환한다.

array.reduce((total, currentValue) => {
  return total + currentValue;
}, 0);
// total의 초기값은 0, 이후 currentValue에 부여한 수식이 루프되어 총합이 계산된다.

실행결과

// reduce()를 활용하여 inventors의 나이를 모두 합한 결과값을 반환하시오.

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

//여기서 0은 initialValue를 의미하는데, 가장 처음 루프 때 sum의 값이라고 생각하면 된다.

---