Array Cardio Day 1 🎈

배열의 메소드들을 돌아가면서 한 번씩 사용해보는 예제였다.

filter, map, sort, reduce를 사용해봤는데, 사실 기존에 다 알고 있던 내용이므로

새로 알게 된 사실 위주로만 간단하게 포스팅을 해보려 한다.

 

1.

우선, DOM을 활용할 때 사용하는 querySelector, getElementbyId 같은 메소드들은 주로

document.querySelector라는 식으로 많이들 사용한다.

 

근데, 한 가지 새로 알게 된 점은 무조건 document에서만 사용해야하는 게 아니라는 점.

범위를 좁히고 싶다면, 특정 DOM element 내에서 사용하는 게 가능하다.

const category = document.querySelector('.mw-category');
const links = [...category.querySelectorAll('a')]; 

이런 식. 아래 줄을 보면 category.querySelectorAll을 해준 것을 볼 수 있다.

document.querySelectorAll('a')를 하면 문서 내의 모든 a 태그가 전부 선택되겠지만

저렇게 범위를 좁혀서 선택해주면, 그 범위 내에 있는 애들만 선택되니까 더 편하게 짤 수 있다.

요건 몰랐던 사실.

 

2.

저렇게 'a' 태그들로 이루어진 NodeList를 가져왔다고 쳐보자.

그리고, 우리가 사용하고자 하는 메소드가 map 메소드라면 NodeList를 array로 바꿔줘야 한다.

이 때, NodeList를 Array로 바꾸는 방법은 간단히 두 가지가 있다.

a. Array.from()을 사용해준다

b. spread operator를 사용해준다

 

Array.from()은 워낙 유명한 방법이니 그렇다 치고

사실 spread operator도 굉장히 유명한 방법인데, 이때까지 귀찮아서 공부 안하고있다가

이번 기회에 새로 배우게 됐다. 생각보다 새로 배우는 게 너무 많아서 좋다.

const arr = [1, 2, 3, 4, 5]
console.log(...arr); // 1, 2, 3, 4, 5
console.log([...arr]); // [1, 2, 3, 4, 5]

위에서 '...'가 바로 spread operator이다.

간단하게, 특정 list 내부의 원소들을 쫘라락 펼쳐놓는 연산자가 바로 spread operator라고 생각하면 된다.

그리고, 그 펼쳐놓은 원소들을 배열 괄호로 다시 감싸줌으로써,

해당 원소들을 담은 새로운 배열을 만들 수가 있다.

 

3.

아주 간단한 내용.

'a' 태그의 내용에 접근하려면, 'textContent'라는 property를 이용해주면 된다.

 

4. 

console.log만 있는 줄 알았는데

console 객체에는 특정 변수를 테이블로 보여주는 메소드인 console.table이 있다.

배열을 보기 좋게 만들 때 아주 편한 메소드인듯.

참고로, 위의 결과는 파리에 있는 도로의 이름을 보여주는 위키피디아 페이지에서 실행한 결과이니

동일한 결과를 보고싶다면 https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris 에서 실행해볼 것.

 

5.

array.sort를 사용할 때,

앞, 뒤 두 수를 비교했을 때 결과로 비교할 때 순서 그대로 나오길 원한다면 음수를,

비교할 때와 순서가 반대로 바뀌어 나오길 원한다면 양수를 return하면 된다.

흔히 1과 -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'];

// 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.table(fullNames);

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
const ordered = inventors.sort((a, b) => a.year - b.year);
console.log(ordered);

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

// 5. Sort the inventors by years lived
const sorted = inventors.sort((a, b) => (b. passed - b.year) - (a.passed - a.year));
console.log(sorted);

// 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 = [...category.querySelectorAll('a')];
const de = links
		   .map(link => link.textContent)
           .filter(text => text.includes('de'));

// 7. sort Exercise
    // Sort the people alphabetically by last name
    const alpha = people.sort((a, b) => {
      const [aLast, aFirst] = a.split(', ');
      const [bLast, bFirst] = b.split(', ');
      console.log(aLast, bLast);

      return aLast - bLast;
    });
    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((obj, item) => {
    if(!obj[item]) {
        obj[item] = 0;
    }
    obj[item]++;
    return obj;
}, {});

그리고, 마지막에 객체를 사용한 reduce를 보며 생각난 건데,

저런 식으로 객체에 아이템이 없을 때는 0으로 초기화하고, 아이템이 존재하면 1을 더해주는 방식은

생각보다 많이 쓰이는 것 같으니, 패턴으로 기억해두도록 해야겠다.