728x90

콘솔을 비교해보며 해보세요

1. 기본값

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Array Cardio 💪</title>
  </head>
  <body>
    <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
    <script>
      // Get your shorts on - this is an array workout!
      // ## Array Cardio Day 1

      // 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 함수를 사용하여 inventors 배열 값들 중 1500년도에 태어난 사람만 받아오기 (years 가 1500이상 1600미만)

      // Array.prototype.map()
      // 2. map을 이용해서 inventors의 성과 이름 합치기 (띄어쓰기로 성과 이름 구분)

      // Array.prototype.sort()
      // 3. inventors가 태어난 년도 (years)를 기준으로 내림차순 정렬

      // Array.prototype.reduce()
      // 4. inventors들이 살았던 기간을 모두 합치기 (pass - year)

      // 5. inventors 각각 살아있었던 기간으로 내림차순 정렬

      // 6. sort Exercise
      // people 배열의 성(lastname)만 비교하여 정렬하기
      // => 성만 비교후 성이 같다면 원래 배열 순서로 정렬

      // 7. Reduce Exercise
      // 각 요소값들을 key, 요소의 갯수를 value로 하는 객체 만들기
      const data = [
        "car",
        "car",
        "truck",
        "truck",
        "bike",
        "walk",
        "car",
        "van",
        "bike",
        "walk",
        "car",
        "van",
        "car",
        "truck",
        "pogostick",
      ];
    </script>
  </body>
</html>

2. 결과

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Array Cardio 💪</title>
  </head>
  <body>
    <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
    <script>
      // Get your shorts on - this is an array workout!
      // ## Array Cardio Day 1

      // 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
      console.table(
        inventors.filter((el) => el.year >= 1500 && el.year < 1600)
      );
      // Array.prototype.map()
      // 2. Give us an array of the inventors first and last names
      console.log(inventors.map((el) => el.first + " " + el.last));
      // Array.prototype.sort()
      // 3. Sort the inventors by birthdate, oldest to youngest
      console.table(inventors.sort((a, b) => a.year - b.year));
      // Array.prototype.reduce()
      // 4. How many years did all the inventors live all together?
      console.log(
        inventors.reduce((pre, cur) => {
          pre = pre.passed - pre.year || pre;
          cur = cur.passed - cur.year;
          pre += cur;
          return pre;
        })
      );
      // 5. Sort the inventors by years lived
      console.table(
        inventors.sort((a, b) => b.passed - b.year - (a.passed - a.year))
      );
      // 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
      console.log(
        people.sort((a, b) => {
          let [aLast, aFirst] = a.split(", ");
          let [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",
      ];
      console.log(
        data.reduce((pre, cur) => {
          pre[cur] = pre.hasOwnProperty(cur) ? pre[cur] + 1 : (pre[cur] = 1);
          return pre;
        }, {})
      );
    </script>
  </body>
</html>

3. 리뷰

pre = pre.passed  - pre.year || pre 부분

|| 는 if문과 비슷하게 해석하면 된다. ||의 앞에있는 부분이 undefined, null 등 오류가 아니라면 앞의 값을 출력하고 뒤에 있는 부분이 오류가 아니라면 뒷부분을 출력한다. 둘다 오류가 아니라면 앞의 값을 출력한다.

 

sort함수 내에서 [aLast, aFirst] = a.split(", ") 부분

해당 부분은 구조분해 할당을 이용했다.

split으로 ", "를 기준으로 이름을 2개의 값을 가진 배열로 반환한다.

두개의 값이기 때문에 배열안에 2개의 변수를 넣어 그값들을 각각 aLast, aFirst에 넣어준다는 뜻이다.

 

aLast > bLast ? 1 : -1 부분

보통 sort로 숫자를 정렬할 때 a-b 를 많이 이용한다.

sort((a,b) => { a-b }) 의 뜻은 a가 b보다 크다면 양수값이 나오고 작다면 음수값이 나올것이다.

여기서 양수값이 나오면 b보다 뒤에 a를 놓고 음수값이 나오면 b보다 앞에 a를 놓는 뜻이다.

이를 풀어 써보면 a>b 일때 1을 넣어주어 b보다 뒤에 a를 배치하면 정렬이 된다.

 

728x90

'개발 > html, css, js' 카테고리의 다른 글

[30일 챌린지 Day-6] 검색, json 활용  (0) 2022.07.26
[30일 챌린지 Day-5] flex, classname 추가 활용  (0) 2022.07.25
[30일 챌린지 Day-3] input값 적용하기  (0) 2022.07.25
[30일 챌린지 Day-2] 시계 만들기  (0) 2022.07.25
[JavaScript] 농구게임 만들기  (0) 2022.06.21

티스토리툴바