[Javascript] 자바스크립트 Array Method(filter, map, reduce, sort)

 

//예제 배열
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. Array.prototype.filter()

filter() 메소드는 배열의 각 요소에 대해 주어진 함수의 반환 값이 true인 요소를 모아 새로운 배열로 반환함.

호출되는 배열을 변화시키지 않음

// 1. 1500년대에 태어난 inventor
inventors.filter(
	(inventor) => inventor.year >= 1500 && inventor.year < 1600
);

• callback : 각 요소에 적용할 함수. true면 요소를 유지하고, false면 요소를 버림
  • element : (inventor)로 현재 처리할 요소를 말함
  • index(옵션) : 처리할 현재 요소의 인덱스
  • array(옵션) : filter를 호출한 배열
• thisArg(옵션) : callback을 실행할 때 this로 사용하는 값

 

2. Array.prototype.map()

map() 메소드는 배열 내의 모든 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환함.

// 2. first name과 last name을 'Albert Einstein'의 형태로 나타내기
inventors.map(
	(inventor) => `${inventor.first} {inventor.last}`
);

• callback : 새로운 배열 요소를 생성하는 함수
  • currentValue : (inventor) 처리할 현재 요소
  • index(옵션) : 처리할 현재 요소의 인덱스
  • array(옵션) : filter를 호출한 배열
• thisArg(옵션) : callback을 실행할 때 this로 사용하는 값

 

3. Array.prototype.reduce()

reduce() 메소드는 배열의 각 요소에 대하여 reducer함수를 실행하고 하나의 결과값을 반환한다.

// 3. 모든 inventor들의 수명을 더한 값
inventors.reduce((total, inventor) => {
	return total + (inventor.passed - inventor.year);
}, 0);

• callback : 배열의 각 요소에 대해 실행할 함수
  • accumulator : (total) 누산기는 콜백의 반환값을 누적한 것이다. 콜백의 첫 번째 호출이면서 initialValue의 값이 있을 경우에는 initialValue가, 그 이후에는 콜백의 이전 반환 값이다.
  • currentValue : (inventor) 처리할 현재 요소
  • index(옵션) : 처리할 현재 요소의 인덱스
  • array(옵션) : filter를 호출한 배열
• initialValue(옵션) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값이다. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

// initialValue 없음
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

// initialValue 있음
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);

callback 호출	accumulator	currentValue	currentIndex	array	반환값
1번째	0	1	1	[0,1,2,3,4]	1
2번째	1	2	2	[0,1,2,3,4]	3
3번째	3	3	3	[0,1,2,3,4]	6
4번째	6	4	4	[0,1,2,3,4]	10

callback 호출	accumulator	currentValue	currentIndex	array	반환값
1번째	10	0	0	[0,1,2,3,4]	10
2번째	10	1	1	[0,1,2,3,4]	11
3번째	11	2	2	[0,1,2,3,4]	13
4번째	13	3	3	[0,1,2,3,4]	16
5번째	16	4	4	[0,1,2,3,4]	20

 

4. Array.prototype.sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환함

정렬은 stable sort가 아닐 수 있음.

기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

복사본이 아닌 원 배열이 정렬되는 것

// 4. 생년 순서대로 정렬하시오 (oldest to youngest)
inventors.sort((a, b) => (a.year > b.year ? 1 : -1));

• compareFunction(옵션) : 정렬 순서를 정의하는 함수. 생략 시 각 요소의 문자열 변환에 따라 문자의 유니코드 코드 포인트 값에 따라 정렬됨 (즉, [1, 30, 4, 21, 100000] -> [1, 100000, 21, 30, 4]로 정렬됨)
  
  • 반환값 < 0 : a b 의 순서
  • 반환값 = 0 : 변경x (ECMAscript 표준은 이를 보장하지 않음)
  • 반환값 > 0 : b a 의 순서