[Javascript 30] 4. JS Array Cardio Practice Day1

tino-kim·2022년 3월 15일
0
post-thumbnail

💗 [Javascript 30] 4. JS Array Cardio Practice Day1

💙 모던 자바스크립트에서 해당 내용 공부하기.

✔ Array.from

유사배열 객체, 이터러블 객체 -> (콜백함수 : 값을 만들면서 요소를 채울 수 있다.) -> 배열로 만들어준다.

  • 유사배열 객체 : 인덱스를 통해 요소에 접근할 수 있는 객체
  • 이터러블 객체 : 문자열로 이루어진 모든 객체

(ex) node를 array로 변경하고 싶은 경우에 Array.from 메소드를 이용한다.

✔ sort

요소를 내림차순 또는 오름차순으로 배열하는 것이고, 원본 데이터가 변경된다.

💙 아래에 있는 메소드의 공통점

  1. 모든 요소를 순회한다. (반복문 느낌이 난다.)
  2. 콜백 함수를 반복 호출한다.
  3. 원본 데이터들이 변경되지 않는다.

✔ forEach

  1. 반복문을 대체해준다.
  2. for문 대신에 forEach를 자주 사용하자.

✔ map

  1. 가지고 있는 배열을 새로운 배열으로 바꿀 때 이용한다.
  2. 길이는 동일하다.

✔ filter

  1. 가지고 있는 배열을 새로운 배열로 바꾼다. 허나 true인 경우만 가지고 온다.
  2. 그래서 길이는 동일하거나, 더 짧아진다.
  3. 내가 가지고 오고 싶은 배열의 요소만 가져오고 싶을 때 많이 이용한다.

✔ reduce

  1. 하나의 결과값을 도출하고 싶은 경우에 쓴다. (ex. 평균값, 최대값, 중복 횟수 세기 등등)
  2. 조건부 삼항 연산자와 같이 자주 쓰인다.
  3. reduce로 위에 있는 map, filter 모두 구현할 수 있다.

💙 본격적인 [Javascript 30] 내용 정리하기.

인덱스로 접근할 수 있는 유사배열 객체와 문자열로 이루어진 이터러블 객체이다.

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 = [
        // LastName, FirstName
        // 이터러블객체
        "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",
      ];

✔ 1. Filter the list of inventors for those who were born in the 1500's.

filter : inventors가 array이고 조건이 참인 경우에만 가져와서 새로운 array를 만들 예정 -> filter 이용하기.
filter 처리를 한 변수를 만들어내기. ➕ 화살표 함수 이용하기.

const fifteen = inventors.filter( // 변수 생성하기.
        (inventor) => inventor.year >= 1500 && inventor.year < 1600 // 화살표 함수 이용하기. 둘 다 만족해야 하기 때문에, and 조건 이용하기.
      );
      console.log(fifteen);
      console.table(fifteen); // table 형태로 출력하기.
// 1-1. 죽은 연도가 1900년 이후인 사람들을 가져오기.
      const upNineteen = inventors.filter(
        (inventor) => inventor.passed >= 1900
      );
      console.log(upNineteen);
      console.table(upNineteen);

이처럼 배열을 "조건에 만족하는 (다시 말하면, true인 조건들)" 새로운 배열로 나타내고 싶은 경우에 filter를 이용한다.

✔ 2. Give us an array of the inventors first and last names.

배열로 이름과 성을 가져오기.

map : 기존의 배열을 새로운 배열로 가져오기 위해서 이용한다. 배열의 길이는 동일하다.
map 처리를 한 변수를 생성해주기. ➕ 화살표 함수 이용하기.

const fullName = inventors.map(
        (inventor) => `${inventor.first} ${inventor.last}`
      );
      console.log(fullName);
      console.table(fullName);
// 2-1. 태어난 연도와 죽은 연도를 가져오기.
      const fullYear = inventors.map(
        (fullyear) => `${fullyear.year} ${fullyear.passed}`
      );
      console.log(fullYear);
      console.table(fullYear);

✔ 3. Sort the inventors by birthdate, oldest to youngest.

나이 든 사람부터 젊은 사람들을 오름차순 정렬하기.
기본 전제가 오름차순 정렬이다.

➕ 내림차순 정렬 VS 오름차순 정렬

function(a,b){
    return a-b}; // 오름차순 정렬하기.
    
function(a,b){
    return b-a}; // 내림차순 정렬하기.
const ordered = inventors.sort(function (a, b) {
        if (b.year < a.year) { // 오름차순 정렬하기.
          return 1; // 1 === true
        }
        if (b.year > a.year) {
          return -1;
        }
        return 0;
      });
      console.log(ordered);
      console.table(ordered);

➕ 삼항 조건 연산자

condition ? true 반환값 : false 반환값
// 한 줄로 조건문을 작성할 수 있다. 가독성이 뛰어나다.
 // 삼항 조건 연산자 이용하기. (오름차순 정렬)
      const ordered = inventors.sort((a, b) => {
        return a.year > b.year ? 1 : -1;
        // condition ? true 반환값 : false 반환값
      });
      console.table(ordered);
// 3-1. 죽은 연도가 현재로부터 빠른 사람부터 느린 사람의 순으로 정렬하기. (내림차순 정렬)
      const orderedPassed = inventors.sort(function (a, b) {
        if (a.passed < b.passed) { // 내림차순 정렬하기.
          return 1; // 1 === true
        }
        if (a.passed > b.passed) {
          return -1;
        }
        return 0;
      });
      console.table(orderedPassed);
 // 삼항 조건 연산자 이용하기. (오름차순 정렬)
      const orderedPassed = inventors.sort((a, b) =>
        a.passed < b.passed ? 1 : -1
        // condition ? true 반환값 : false 반환값
      );
      console.table(orderedPassed);

✔ 4. How many years did all the inventors live all together?

inventors들의 생존하던 연도의 합을 구하기.

reduce : 기존의 배열을 내가 원하는 값인 1개의 값으로 만들어서 반환하는 경우에 이용한다.
reduce 처리를 한 변수를 생성해주기. ➕ 화살표 함수 이용하기.
반드시 초기값을 설정해주기. 계속 값이 업데이트가 되면서 reduce가 작동하는데, 초기값을 설정해주지 않으면 오류가 생길 수 있다.

const totalYears = inventors.reduce((total, inventor) => {
        return total + (inventor.passed - inventor.year);
      }, 0);
      console.log(totalYears); // 861
// 4-1. 태어난 연도 모두 더하기.
      const totalOnlyYears = inventors.reduce((total, inventor) => {
        return total + inventor.year;
      }, 0);
      console.log(totalOnlyYears);

      // 4-2. 죽은 연도 모두 더하기.
      const totalOnlyPassed = inventors.reduce((total, inventor) => {
        return total + inventor.passed;
      }, 0);
      console.log(totalOnlyPassed);

✔ 5. Sort the inventors by years lived.

수명을 기준으로 오름차순으로 정렬하기.
전제가 오름차순으로 정렬하는 것이다.

const orderedLifeSpan = inventors.sort(function (a, b) {
        const aLifeSpan = a.passed - a.year;
        const bLifeSpan = b.passed - b.year;
        if (aLifeSpan > bLifeSpan) { // 오름차순 정렬하기.
          return 1;
        }
        if (aLifeSpan < bLifeSpan) {
          return -1;
        }
        return 0;
      });
      console.table(orderedLifeSpan);
// 삼항 조건 연산자를 활용하기. ➕ 화살표 함수 이용하기. (feat. return)
        const orderedLifeSpan = inventors.sort((a, b) => {
        const aLifeSpan = a.passed - a.year;
        const bLifeSpan = b.passed - b.year;
        return aLifeSpan > bLifeSpan ? 1 : -1; 
        // return 빼먹지 않기..ㅠ
      });
      console.table(orderedLifeSpan);
// 5-1. 수명을 기준으로 내림차순 정렬하기.
      /*
      const orderedLife = inventors.sort(function (a, b) {
        const aLife = a.passed - a.year;
        const bLife = b.passed - b.year;
        if (aLife > bLife) { // 내림차순으로 정렬하기.
          return -1; 
          // 위의 조건식이 오름차순에 관한 조건식인데 그럴 경우에 
          // false라고 인식하겠다고 했기 때문에, 내림차순 정렬이다.
        }
        if (aLife < bLife) {
          return 1;
        }
        return 0;
      });
      console.table(orderedLife);
      */

// 삼차 조건 연산자를 사용할 수도 있다. ➕ 화살표 함수 이용하기. (feat. return)
      const orderedLife = inventors.sort((a, b) => {
        const aLife = a.passed - a.year;
        const bLife = b.passed - b.year;
        return aLife > bLife ? -1 : 11;
      });
      console.table(orderedLife);

✔ 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name.

de가 포함된 것들을 모두 찾아내기. <=> 특정 조건에 해당하는 값들만으로 배열을 만들겠다는 의미이다. filter를 사용해야한다.

➕ 해당 url : wikipedia/category

a 태그를 가져올 때, node 형태이기 때문에 array로 변경하기 위해서 Array.from을 이용하였다.
➕ map (기존의 배열을 다른 형태의 배열로 만들어 주었다. 길이는 동일하다.)과 filter(참인 조건으로만 배열을 만들기 위하여 사용하였다.)를 동시에 이용하였다.

const category = document.querySelector(".mw-category");
      // const links = document.querySelectorAll("a");
      // node 형태이므로 array로 변경하기 위하여 Array.from을 사용한다.
      const links = Array.from(category.querySelectorAll("a"));
      // category에서 링크를 가져오기.
      const de = links
        .map((link) => link.textContent) 
        // 새로운 array로 만들어준다. 텍스트를 가지는 배열로 만들어준다.
        .filter((streetName) => streetName.includes("de")); 
        // 포함 여부를 확인해주는 메소드이다.
      console.table(de);
 // 6-1. du가 포함되는 것들을 모두 찾아보기.
      const category = document.querySelector(".mw-category");
      const links = Array.from(category.querySelectorAll("a"));
      const du = links
        .map((link) => link.textContent)
        .filter((streetName) => streetName.includes("du"));
      console.table(du);

밑에 코드에 문제가 생길 수 있기 때문에, 주석 처리해주고 시작하기.

✔ 7. Sort the people alphabetically by last name.

성으로 알파벳 순서로 나열하기. (오름차순 정렬하기.)

const orderedLastName = people.sort(function (a, b) {
        const [aLast, aFirst] = a.split(","); 
        // , 기준으로 분리하기.
        const [bLast, bFirst] = b.split(",");
        return aLast > bLast ? 1 : -1; // 오름차순 정렬하기.
      });
      console.table(orderedLastName);
// 7-1. 이름으로 알파벳 순서 나열하기. (내림차순 정렬하기.)
      const orderedFirstName = people.sort(function (a, b) {
        const [aLast, aFirst] = a.split(",");
        // , 기준으로 분리하기.
        const [bLast, bFirst] = b.split(",");
        return aFirst < bFirst ? 1 : -1; // 내림차순 정렬하기.
      });
      console.table(orderedFirstName);

✔ 8. Sum up the instances of each of these.

단어가 나온 횟수 찾아내기. reduce 이용하기.

const data = [
        "car",
        "car",
        "truck",
        "truck",
        "bike",
        "walk",
        "car",
        "van",
        "bike",
        "walk",
        "car",
        "van",
        "car",
        "truck",
      ];

❗ 키와 값을 이용해서 횟수를 세어주는 것을 목표로 한다. ❗

const count = data.reduce(function (obj, item) {
        // 키와 값 (key & value)
        if (!obj[item]) {
          // 없는 경우에는 "0" 이라고 만들어주기.
          obj[item] = 0;
        }
        obj[item]++; // 있는 경우에는 "+1" 처리해주기.
        return obj; 
        // 그 값을 return 해주기.
        // obj[item] 라고 해줘도 상관은 없다.
      }, {}); // 초기값을 설정해주기.
      // 빈 딕셔너리 형태로 설정해주기.
      console.log(count);
profile
알고리즘과 웹 개발과 데이터 과학을 공부하는 대학생

0개의 댓글