Array 메소드 (1)

Day 4는 만들어보는 형태의 실습이 아니라 Array가 가진 메소드들에 대한 공부에 가까운 강의였다.

특히 Day 4가 어렵게 느껴지더라도 함수, 코드의 흐름이 자연스럽게 읽혀질 때까지 반복해서 들여다보기를 권했다.

TIL

1~3 예제용 배열

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 }
  ];

1. filter

구문
Array.filter(함수)
주어진 함수로 Array 요소 하나하나에 테스트를 진행하여, 그 테스트를 통과하는 요소들만 모아서 새로운 배열로 반환한다.

예제
1500년대에 태어난 사람만 필터링하여 리스트를 작성하여라

일반적으로 작성했을 때
const fifteen = inventors.filter(function(inventor){
      if(inventor.year >= 1500 && inventor.year < 1600){
          return true;
      } 
  });

화살표 함수로 작성했을 때
const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);

해설
inventors라는 배열에 function(inventor) 함수로 각 요소에 테스트를 진행한다. 테스트 내용은, inventor.year >= 1500 && inventor.year < 1600로, 1500년~1600년 사이에 태어났는지 확인한다. 이에 해당하는 true이면 반환하여 새로운 배열에 넣는다. else {return false;} 를 쓰지 않은 이유는 쓰지 않아도 알아서 true가 아닌건 다 버려서 그렇다.

2. map

구문
Array.map(함수)
배열 내의 모든 요소 각각에 대해 주어진 함수를 한번씩 순서대로 실행한 결과를 모아 새로운 배열을 반환한다.

예제
따로 분리된 성, 이름을 하나의 이름으로 합쳐 배열을 작성하여라

const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);

해설
배열 inventors의 요소 중 first, last를 가지고 다음과 같이 풀 네임인 'firstName lastName' 형태로 만듦

0: "Albert Einstein"
1: "Isaac Newton"
2: "Galileo Galilei"
3: "Marie Curie"
4: "Johannes Kepler"
5: "Nicolaus Copernicus"
6: "Max Planck"
7: "Katherine Blodgett"
8: "Ada Lovelace"
9: "Sarah E. Goode"
10: "Lise Meitner"
11: "Hanna Hammarström"

3. sort

구문
Array.sort(함수)
배열의 요소를 정렬하여 반환하는 메소드. 함수로 정렬 순서를 판단하며, 함수가 주어지지 않으면 기본 정렬 순서를 따른다. 요소를 문자열로 변환 후, 유니코드 값 순서대로 정렬된다. 주의할 점은 숫자도 문자열로 변환되기 때문에 9보다 80이 앞에 온다.

함수는 2가지 인자를 비교하는데, 함수(a,b)라고 하였을 때

• 함수(a,b) < 0 : a가 먼저 옴 (a를 b보다 낮은 색인으로 정렬)
• 함수(a,b) > 0 : b가 먼저 옴 (b를 a보다 낮은 색인으로 정렬)
• 함수(a,b) = 0 : 순서를 변경하지 않음

예제
(1) [1, 2, 3, 4, 5]를 [5, 4, 3, 2, 1]로 정렬하라.

const array = [1, 2, 3, 4, 5];
const answer = array.sort((a,b) => b-a);
console.log(answer); 	// [5, 4, 3, 2, 1]

(2) 예제용 배열 속의 인물들을 태어난 순서대로 정렬하라 (나이 많음 -> 나이 적음 순)

const oldest = inventors.sort((firstPerson, secondPerson) => 
  firstPerson.year > secondPerson.year ?  1 : -1);

해설
함수가 firstPerson.year > secondPerson.year를 판단하여 참이면 1을 리턴하고 거짓이면 -1을 리턴한다. 이 리턴값 1, -1이 0보다 크고 작냐를 따져 순서가 결정된다. 즉 1이 리턴되면 firstPerson이 후순위, -1이 리턴되면 firstPerson이 선순위로 정렬됨.

4. reduce

reduce로 map, filter 등을 구현할 수 있어 가장 활용도가 높은 array 메소드이다. initialValue를 통해 반환 값을 자유롭게 지정할 수 있어 유연한 사용이 가능하다.

배열의 각 요소에 대해 callback을 실행해 하나의 결과값 (누적 계산 결과값)을 반환하여 reduce라고 이름 붙었다.

배열 요소들의 전체 합, 최대값, 개수 세기 등을 할 수 있다.

구문
Array.reduce(callback[, initialValue])

• initialValue : 콜백의 최초 호출에서 첫 번째 인수에 제공하는 값. 설정되어있지 않다면 배열의 첫 번째 요소를 initialValue로 사용한다. 객체로 이루어진 배열에 들어있는 값을 합산하기 위해서는 반드시 initialValue가 주어져야 한다.

예제
reduce 메소드를 활용해 data 배열 안의 요소 각각의 개수를 세어라

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

const countedData = data.reduce(function(obj, item) {
   if (!obj[item]) {
   obj[item] = 0;
   }
   obj[item]++;
   return obj;
}, {});