wecode 사전스터디(8/5) 로그

개발한 것/배운 것

vanilla Javascript 30days 프로젝트 - 04. Array Cardio day 1 (자바스크립트 배열 관련 메소드 연습)

 

 

문제풀이에 주어진 배열

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

 

1. Array.filter()

// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
// filter 메소드 : 배열의 각 요소에 특정 함수를 수행하여 조건에 맞는 새로운 배열을 리턴함
      
      const fifteen = inventors.filter(
        (inventor) => inventor.year >= 1500 && inventor.year < 1600
      );
      console.table(fifteen);

.filter() 메소드는 배열에 각 요소에 함수를 실행하여 해당 함수의 조건에 맞는 요소만 추출한 새로운 배열을 반환

 

2. Array.map()

// Array.prototype.map()
// 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);

.map() 메소드는 배열의 요소별로 함수를 실행하고, 각 요소의 리턴값으로 구성된 '동일한 길이'의 새로운 배열을 반환

 

3. Array.sort()

      // Array.prototype.sort()
      // sort 메서드는 배열 안의 요소를 특정 기준대로 정렬한 배열을 리턴함
      // sort 메서드는 두 개의 요소를 받아와서 비교해야함
      // 3. Sort the inventors by birthdate, oldest to youngest
      /*
        방법 1:
        const ordered = inventors.sort(function(a,b) => {
            if (a.year < b.year) {
                return 1;
            } else {
                return -1;
            }
        })
        방법 2:
        const ordered = inventors.sort((a,b) => a.year - b.year ? 1 : -1);
      */

      const inventorsByOrder = inventors.sort(
        (inventorA, inventorB) => inventorA.year - inventorB.year
      );
      console.table(inventorsByOrder);

.sort() 메소드는 두 개의 인자를 받아와 비교할 수 있음

 

4. Array.reduce()

      // Array.prototype.reduce()
      // 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);
      // 위 코드의 경우, inventor의 전체 살아온날을 total 변수로 놓고, 각 inventor를 두번째 변수로 인자로 전달한다. 그 다음 total값에다가 각 inventor의 살아온날을 더해준다.

.reduce() 메소드는 배열의 첫 번째 요소부터 마지막 요소까지의 합성 곱(convolution) 처리를 할 수 있다. 합성 곱 처리란 배열 요소 하나를 함수로 처리한 후에 그 반환값을 다음 번 요소를 처리할 때의 함수의 입력 값으로 사용하는 처리 방법이다.

 

위 문제에서는 reduce에 total (전체 합계 값), inventor인자를 받아왔으며, inventor 하나하나의 살아온 기간을 함수가 실행될 때마다 total 값에 더하는 처리를 해주었다.

 

5. Array.sort() II

      // 5. Sort the inventors by years lived
      const ordered2 = inventors.sort((a, b) => {
        const lastGuy = a.passed - a.year;
        const nextGuy = b.passed - b.year;

        return lastGuy > nextGuy ? -1 : 1;
      });

      console.table(ordered2);

위 함수도 sort 메소드를 사용하였으며, a 와 b를 비교하여 순서를 정렬하였다.

      // 7. sort Exercise
      // Sort the people alphabetically by last name
      const peopleAlpha = people.sort(function (lastOne, nextOne) {
        const [alast, afirst] = lastOne.split(", ");
        const [blast, bfirst] = nextOne.split(", ");
        return alast > blast ? 1 : -1;
      });

      console.log(peopleAlpha);

위 함수도 sort 메소드를 사용하여 각각 요소의 lastname을 추출하여 알파벳 순서로 정렬하였다.

 

6. Array.reduce II

      // 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 dataReduce = data.reduce(function (obj, item) {
        if (!obj[item]) {
          obj[item] = 0;
        }
        obj[item]++;
        return obj;
      }, {});

      console.log(dataReduce);

reduce를 사용하여 해당 배열에 어떠한 키값이 중복되는지를 확인하는 함수이다. obj라는 최종 반환 빈 객체를 만들고, 해당 객체에 item이 없을 경우의 초기값 세팅과 있을 경우에 ++값을 주게 처리하였다.