[JS30] Array 메서드 (1)

🔥Javascript 30 - Day 04🔥

Day 04는 배열 관련 메서드를 갖고 노는 시간이 되겠습니당 :->

기본 html, js 내용은 여기에서 확인 가능합니다.

1. filter() - 특정 조건을 만족하는 새 배열 만들기

const people = [
	{ 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 },
	{ first: 'Sherlock', last: 'Holmes', year: 1854, passed: 1957 },
	{ first: 'John ', last: 'Watson', year: 1852, passed: 1929 },
];

첫번째로 해볼 건, people 배열에서 1500년대에 태어난 인물만 추려서 새로운 배열로 만드는 것입니다. 이때 사용할 메서드는 filter()입니다.
filter() 메서드는 주어진 판별 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환해줍니다. (*MDN)

const fiften = people.filter();

이 메서드는 콜백함수를 필요로 하며, 이 함수는 최소 1개의 인수를 필요로 합니다.
arr.filter(callback(element[, index[, array]])[, thisArg])
위 syntax에서 element가 바로 필수 인수이며, 처리할 현재 요소를 뜻합니다.

const fiften = people.filter(person=>{});

그럼 위 코드에서 filter 메서드가 실행됐을 때, 첫번째로 선택되는 'person'은 무엇일까요? { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }가 해당됩니다. 여기서 우리가 필요로 하는 정보는 year에 해당하죠. 그럼 person.year로 접근하면 되겠네요!

const fiften = people.filter(person=>{
    if(person.year >=1500 && person.year <=1599){
	return true;
    }
});

filter()는 주어진 판별 함수를 통과하는, 즉 함수 실행 후 결과값이 true인 요소만 꾸려서 배열로 만들어준댔으니 return true를 작성해줍니다.
또는 아래와 같이 짧게 작성해도 되고요!

const fiften = people.filter(person=>
    (person.year >=1500 && person.year <=1599)
);

console.log(fiften)으로 콘솔에 찍어보면 새 배열이 잘 나온 걸 볼 수 있습니다.

---

2. map() - 함수 결과를 모아 새 배열 만들기

이번에는 people 변수의 사람들의 성과 이름을 합친 다음, 그걸 새로운 배열로 만들어보겠습니다. 이때 사용할 메서드는 map()입니다. (*MDN)

간단하게 쓰자면, 배열 안의 각 요소에게 어떤 함수를 반복적으로 실행시키고 싶을 때 사용하는 메서드입니다. 예를 들어, var arr = [1,2,3]이 있을 때 여기에 각각 2를 곱하는 함수를 실행시키려고 합니다. 이때 arr.map(x=>x*2)를 써주면 배열 내 각각에게 x2를 하는 함수가 실행되며 그 값을 새로운 배열로 반환해줍니다.

map()의 콜백함수도 최소 1개의 인수를 필요로 하며, 아래 코드에서는 person이 해당합니다. filter()와 마찬가지로 처리할 현재 요소를 뜻합니다.

const fullNames = people.map(person =>
(person.first + ' ' + person.last)
);

console.log(fullNames);

간단하네요 :)

---

3. sort() - 오름차나 내림차로 배열 정리하기

그럼 이제 people 내 인물들을 출생연도 순으로 정렬해보려고 합니다. 먼저 태어난 순대로 나열하는 거죠. 여기에는 sort() 메서드를 사용하면 됩니다.
이 메서드는 배열의 요소를 정렬한 후 그 배열을 반환하는데요, 기본적으로는 문자열의 유니코드 코드 포인트를 따릅니다.
(자세한 건 MDN을 봅시당!)

const str = ['리', '락', '쿠', '마'];
const num = [9, 365, 14];

str.sort();
num.sort();

console.log(str);
console.log(num);

/*
 결과:
  > Array ["락", "리", "마", "쿠"]
  > Array [14, 365, 9]
*/

아래 const num이 재배열된 모습이 보입니다. 그런데 저희가 원하는 거랑 좀 다르지 않나여;ㅁ; 365는 9보다 크잖아요?! 그래서 여기에다 매개변수로 함수를 하나 쏙 넣어줍시다.
이걸 compareFunction이라고 하는데요, 이게 없다면 언급했듯 유니코드 코드 포인트 순대로 정렬됩니다. 숫자는 문자열로 변환되기 때문에 "365"가 "9"보다 먼저 오는 거고요!

보통 compareFunction(a, b) 형태로 쓰이는데, 이 값이 0보다 크고 작은지에 따라 정렬 순서가 달라집니다.

- compareFunction(a, b)이 0보다 작다면: a -> b 순서
- compareFunction(a, b)이 0보다 크다면 : b -> a 순서

자세한 건 코드를 작성하면서 살펴봅시다+_+

const ordered = people.sort((a,b)=>{})

자, 여기 셜록 홈즈와 존 왓슨(ㅋㅋㅋㅋㅋ) 두 명이 있습니다. 둘의 출생연도는 각각 1854년, 1852년입니다(왓슨이 형이었구나...)
이걸 a랑 b라고 치고 비교해 봅니다. 당연히 a가 더 크므로, a(1854) > b (1852)라고 표현할 수 있네요.
이때 우리가 원하는 건 출생연도가 '빠른'순 부터이므로 b->a 순으로 정렬되어야 합니다. 그래서 a > b 의 결과는 0보다 커야합니다. 코드로 표현하면 이렇겠네요.

if(a > b){
    return 1;
}

다른 인물을 가지고 비교해봅시다. 갈릴레오(a)는 1564년, 아이작(b)은 1643년생입니다. a.year < b.year에 해당하네요. 이 경우 a -> b순으로 정렬되어야 하므로 리턴값은 0보다 작아야합니다.

if(a.year < b.year){
    return -1;
}

자 이제 이걸 고대로~ sort()메서드에 넣어줍시다.

const ordered = people.sort((a,b)=>{
if(a.year > b.year) {
    return 1;
} 
if (a.year < b.year) {
    return -1;
}
return 0; /*두 값이 같을 때*/

console.log(ordered);
})

만약 오름차순이 아니라 내림차순으로 변경하고 싶다면 저 리턴값만 서로 바꿔주면 되겠네요. 굿굿!

---

4. reudce() - 배열의 요소 값을 누적하여 계산하기

이번에는 인물들이 산 햇수를 저언부 합쳐보려고 합니다. reduce()메서드를 쓸 건데요, 자세한 건 역시나 MDN에게 토오쓰★

이 reduce()는 ES6부터 추가된 건데요, 좀 빈티지풍, 그러니까 옛날 방식으로 작성하면 이렇겠네요.

var totalYears = 0;
for (var i=0; i<people.length; i++){
    totalYears += people[i].year
}

reduce()의 콜백함수는 최소 두 개의 인수를 필요로하며, accumulator(누적된 값)과 currentValue배열 내 현재 처리되고 있는 요소입니다.

const totalYears = people.reduce((total, person)=>{})

인물들이 얼만큼 살았는지 알려면 '생몰년도 - 출생년도'를 하면 되겠죠?!

const totalYears = people.reduce((total, person)=>{
    return total + (person.passed - person.year)    
});
console.log(totalYears);

엇 그러면 리턴값이 좀 이상하게 나오는데요?! 이럴 땐 당황하지말고 초기값을 넣어줍니다!

const totalYears = people.reduce((total, person)=>{
    return total + (person.passed - person.year)    
}, 0);
console.log(totalYears);

---

5. sort()

이쯤되니 인물들 가운데 누가 가장 오래 살았는지 궁금하네요ㅋㅋㅋㅋㅋ sort()메서드를 써서 촤르륵 정렬해보죠.

const oldest = people.sort((a,b)=>{
    const a_lifeTime = a.passed - a.year;
    const b_lifeTime = b.passed - b.year;
    if(a_lifeTime > b_lifeTime) {
        return -1;
    }
    if(a_lifeTime < b_lifeTime) {
        return 1;
    }
    return 0;
});

console.log(oldest);

수명을 계산해야하기 때문에 lifeTime이라는 변수를 만든 다음 비교해줬습니다. 홈즈씨 장수하셨네여ㅋㅋㅋㅋㅋ

---

6. includes()

이번에는 기존 people 변수 대신 마크업되어있는 목록을 가지고 작업해보겠습니다. 인물들 중 이름에 'de'가 들어가는 사람만 모아서 새 배열로 만들고자 합니다.

const category = document.querySelector(".mw-category");
const categoryLinks = category.querySelectorAll("a"); 

자, 여기서 categoryLinks는 배열일까요? 삐빅, NodeList입니다. 그래서 배열 메서드를 쓰려면 얘를 일단 배열로 만들어줘야합니다. 엌..... 다행스럽게도 ES6에서 추가된 from() 메서드가 구원의 손길을 건네네요....★ (*MDN)

const categoryLinks = Array.from(category.querySelectorAll("a"));

그럼 [a, a, a...]와 같이 배열이 만들어졌을 텐데 여기서 필요한 정보는 textContent입니다. 이걸 가져오려면 요소 각각에게 함수를 실행시키는, map()함수가 필요하겠네요.

const categoryLinksText = categoryLinks.map(link=>link.textContent);

여기서 잠깐. '음? 굳이 배열로 안 만들고 forEach 써도 되지 않아?' 라는 생각이 들...었는데요(뻘쭘) forEach()는 리턴값이 undefined인 반면에, map()은 콜백함수의 결과값으로 구성된 새로운 배열을 리턴해주기 때문에 일부러 map()을 쓴 거죠.

이제 남은 할 일은 이 텍스트에 'de'가 포함되어있는지 파악하는 겁니다. 까리한 include()메서드를 쓰면 단박에 찾아낼 수 있어요!

includes()는 배열에 특정 요소가 포함되어 있는지 여부를 확인하여 true 또는 false를 반환합니다. 어, 아까 filter() 메서드는 true인 요소만 보아서 새 배열로 만든다고 했는데!!! 그럼 이 둘을 결합하면 되겠구나!!!!!

const category = document.querySelector(".mw-category");
const categoryLinks = Array.from(category.querySelectorAll("a"));
const categoryLinksText = categoryLinks.map(link=>link.textContent);
const result = categoryLinksText.filter(text=>text.includes('de'));
console.log(result);

덧붙여, 안 까리한 빈티지 방식 메서드로는 indexOf()가 있습니다.
요 아이는 배열에서 지정된 요소를 찾을 수 있는 첫번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. 그래서 이렇게 응용해서 쓸 수 있어요!

const result = de.filter(text=>text.indexOf("de") !== -1);

---

7. sort()

sort() 메서드를 사용해 아래 배열을 재정렬하고자 합니다. 이름을 기준으로 알파벳순으로 나열해보죠.

const people2 = ['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', 'Bevel, Ken', 'Biden, Joseph', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William', 'Holmes, Sherlock', 'Watson, John', 'kim, Anne'];

이름이 '성, 이름' 형태로 되어있기 때문에 문자열을 잘라낼 필요가 있습니다. 이때 쓰는 건 split()메서드죠! 이건 인수로 받은 separator를 기준으로 문자열을 잘라 배열로 만듭니다.

const alpha = people2.sort((lastOne, nextOne)=>{
    const name = lastOne.split(', ');
});

이때 name을 콘솔에 찍으면 ["kim", "anne"]과 같이 출력됩니다. 그럼 index 1번째 요소를 가져다 쓰면 되겠네요!

const alpha = people2.sort((lastOne, nextOne)=>{
const aName = lastOne.split(', ');
const bName = nextOne.split(', ');

if (aName[1] > bName[1]) {
    return 1;
}
if (aName[1] < bName[1]) {
    return -1;
}
    return 0;
});

console.table(alpha);

또는 아래와 같이 작성해도 됩니다 :D

const alpha2 = people2.sort((lastOne, nextOne)=>{
const [aLast, aName] = lastOne.split(', ');
const [bLast, bName] = nextOne.split(', ');

if (aName > bName) {
    return 1;
}
if (aName < bName) {
    return -1;
}
    return 0;
});

---

8. reduce()

드디어!! 마지막입니다. reduce()를 활용해 인스턴스 개수를 셀 수 있습니다.

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

const transportation = data.reduce((all, current)=>{
if (current in all){
    all[current] ++;
}else{
    all[current] = 1;
}
return all;
},{});

console.log(transportation);

inoperator는 특정 속성이 있으면 true를 반환해줍니다. 또, 잘 보면 콜백함수에 {}인수가 하나 들어간 걸 볼 수 있는데, 아마(?) 초기값을 오브젝트 형태로 지정한 듯합니다 (요 부분은 차후 더 공부하고 추가하기로☆) (*MDN)

끄읕!

See the Pen Array (Javascript) by NY KIM (@nykim_) on CodePen.