본문 바로가기

javascript/javascript30

04. Array Cardio Day 1


4 - Array Cardio Day1

4번째 시간에는 어떠한걸 만드는게 아니라 배열을 어떻게 다루는가에 대한 강의 였다.
filter(), map(), sort(), reduce()
4가지 함수로 총8가지 조건에 대한 풀이를 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
    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 1500년대에 태어난 발명가를 필터링하시오
 
const fifteen = inventors.filter(function(inventor){
    if(inventor.year >= 1500 && inventor.year < 1600){
        return true// keep it;
    }
});
console.table(fifteen);
/*
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
*/
    // Array.prototype.map()
    // 2. Give us an array of the inventors' first and last names 발명가의 이름과 성을 알려주시오
 
    const fullName = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
 
    // Array.prototype.sort()
    // 3. Sort the inventors by birthdate, oldest to youngest 발명가의 생년으로 오래된 순으로 나열
    
const ordered = inventors.sort(function(a,b){
    if (a.year > b.year) {
        return 1;
    } else {
        return -1;
    }
});
 
/*
const ordered = inventors.sort(a,b) => (a.year > b.year ? 1 : -1 );
*/
 
console.table(ordered);
    
    // Array.prototype.reduce()
    // 4. How many years did all the inventors live? 발명가가 몇년이나 살았는가?
 
    const totalYears = inventors.reduce((total, inventors) => {
      return total += (inventors.passed - inventors.year);
    },0);
 
    console.log(totalYears);
 
    // 5. Sort the inventors by years lived 발명가의 년대를 분류하시오
 
    const oldest = inventors.sort(function (a, b) {
      const lastGuy = a.passed - a.year;
      const nextGuy = b.passed - b.year;
      return lastGuy > nextGuy ? -1 : 1;
 
    });
    console.log(oldest);
 
    // 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(links => links.tex)
 
    // 7. sort Exercise
    // Sort the people alphabetically by last name 성을 알파벳순으로 정렬
    const alpha = people.sort((lastOne, nextOne) => {
        const [aLast, aFirst] = lastOne.split(', ');
        const [bLast, bFirst] = nextOne.split(', ');
        return aLast > bLast ? 1 : -1
    });
    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;
},{});
cs

1.filter()

filter의 경우 단어의 뜻 그대로 걸러내는 함수입니다.

조건을 통과한 값을 배열로 만들어줍니다.

참고할 사항은

filter()는 값이없는 배열 요소에 대해 함수를 실행하지 않는다.

filter()는 원래 배열을 변경하지 않는다.


2.map()

map의 경우에는 기본적인 원리는 반복문을 돌며 배열 안의 요소들을 1:1로 짝지어줍니다.

map을 실행하는 배열과 결과로 나오는 배열이 다른 객체이므로 기존의 배열을 수정하지 않고

새로운 배열을 만들어 냅니다.( 배열 안에 객체가 들어있는 경우 객체는 공유)


3.sort()

sort의 경우에는 문자열을 순서대로 정렬한다.

순서를 결정하는 데 사용되는 함수 쉽게말해서 오름차순으로 정렬하는 것이다.

반대로는 reverse()함수를 사용하면 반대로 정렬도 가능하다.


하지만 sort는 숫자배열은 조금 다르다.

기본적으로 sort () 함수는 값을 문자열 로 정렬합니다 .

이것은 문자열 ( "Apple"은 "Banana"앞에옵니다)에서 잘 작동한다.

그러나 숫자를 문자열로 정렬하면 "2"가 "1"보다 크기 때문에 "25"는 "100"보다 크다는 결과가 나온다.

이 때문에 sort () 메서드는 숫자를 정렬 할 때 잘못된 결과를 생성할 수 있다.


4.reduce()

reduce는 배열에 누적 계산값이 필요할때 사용합니다.

왼쪽에서 오른쪽으로 이동하며 배열의 각 요소마다 누적 계산값을

함께 함수로 적용하여 하나의 값으로 만듭니다.