배열(Array) part3 -> 배열고차함수
- 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수
Array.prototype.sort
- sort메서드는 배열의 요소를 정렬한다. 원본 배열을 직접 변경하며 정렬된 배열을 반환. 기본적으로 오름차순으로 정렬
- 내림차순으로 하려면은 reverse 메서드를 사용
const coffee =['Americano', 'Latte', 'Machiatto']
coffee.sort() // 오름차순
console.log(coffee); // ['Americano', 'Latte', 'Machiatto']
coffee.reverse(); // 내림차순
console.log(coffee); // ['Machiatto', 'Latte', 'Americano']배여르이 원소가 숫자타입일때는 배열의 요소를 일시적으로 문자열로 변환한 한 후 유니코드 포인트의 순서를 기준으로 정렬
// 배열의 원소가 숫자일때
const numbers = [40, 100, 1, 5, 2, 25, 10];
numbers.sort()
// 10의 유니코드 포인트는 U+00310U+0030
// 2의 유니코드 포인트는 U+0032
console.log(numbers) // [1, 10, 100, 2, 25, 40, 5]Array.prototype.forEach
- forEach 메서드는 자신의 내부에서 반복문을 실행한다.배열을 순회하면서 콜백함수로 전달받아 반복 호출한다
- forEach 메서드는 원본 배열을 변경하지 않는다. 하지만 콜백함수를 통해 원본배열을 변경할 수는 있다
array.forEach(function(currentValue, index, arr), thisValue)
const numbers = [1,2,3];
const pows = [];
numbers.forEach((item) =>{
pows.push(item*2);
});
console.log(pows); // [2, 4, 6]// forEach 메서드는 콜뱀함수를 호출하면 3개(요소값, 인덱스, this)
// 객체인 arr배열을 문자열로 출력하기 위해 JSON.stringify를 사용
[1,2,3].forEach((item, index, arr) => {
console.log(`요소값:${item}, 인덱스:${index}, this: ${JSON.stringify(arr)} `);
});
/*
요소값:1, 인덱스:0, this: [1,2,3]
요소값:2, 인덱스:1, this: [1,2,3]
요소값:3, 인덱스:2, this: [1,2,3]
*/
Array.protytpe.map
- 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다
- forEach메서드와의 공통점은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 하지만 forEach메서드는 언제나 undefined를 반환하고, map메서드는 콜백함수의 반환값들로 구성된 새로운 배열을 반환하다는 차이
- syntax
const numbers = [1,4,9];
const roots = numbers.map(item => Math.sqrt(item));
// map메서드는 새로운 배열을 반환한다
console.log(numbers); // [1,2,3]
//map메서드는 원본 배열을 변경하지 않는다
console.log(roots); // [1,4,9]// map메서드는 콜백함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달한다.
[1,2,3].map((item, index, arr) =>{
console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`)
return item;
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/
Array.prototype.filter
array.filter(function(currentValue, index, arr), thisValue)
- filter메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복호출한다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
- syntax
const nubmers = [1,2,3,4,5];
const odds = numbers.filter(item => item % 2);
console.log(odds); // 1,3,5[1,2,3].filter((item, index, arr) => {
console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
return item % 2;
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/Array.prototype.reduce
- 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 코
- 첫번째 인수로 콜백함수, 두번째 인수로 초기값을 전달받는다. 콜백함수에는 4개의 인수(초기값 또는 콜백함수의 이전 반환값, 배열의 요소, 배열의 인덱스, reduce메서드를 호출한 배열자체(this) )
- 언제나 초기값을 전달하는 것이 안전한다
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
const result = [1,2,3,4].reduce((accumulator, currentValue, index, array) =>
accumulator + currentValue, 0); // 0 은 초기값
console.log(result); // 10const products = [
{id:1, price:100},
{id:2, price:200},
{id:3, price:300},
];
const PriceSum = products.reduce((acc, cur) => acc + cur.price, 0 );
console.log(priceSum); // 600Array.prototype.some
- 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백함수를 호출한다. 이 때 some 메서드는 콜백함수의 반환갑이 단 한 번이라도 참이면 true, 모두 거짓이면 false를 반환한다. 즉, 결과를 불리언 타입으로 반환한다
- 빈 배열인 경우 언제나 false를 반환한다
// 배열의 요소가 10보다 큰 요소가 1개 이상 존재하는지 확인
[5, 10, 15].some(item => item >10); // true
// 배열의 요소가 0보다 작은 요소가 1개 이상 존재하는지 확인
[5, 10, 15].some(item => item < 0); // false
// 배열의 요소 중 apple이 1개 이상 존재하는지 확인
['apple', 'banana', 'mango'].some(item => item === 'apple'); // true
// some메서드를 호출한 배열이 빈배열일 결우 언제나 falseㄹ를 반환한다
[].some(item => item >1); //false
Array.prototype.every
- 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백함수를 호출한다. 이 때 every 메서드는 콜백함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false를 반환한다. 즉 결과를 불리언 타입으로 반환한다
- every 메서드를 호출한 배열이 빈 배열일 경우 언제나 true를 반환한다
// 배열의 모든 요소가 3보다 큰지 확인
[1,2,3].every(item => item > 3); // true
// 배열의 모든 요소가 10보다 큰지 확인
[1,2,3].every(item => item > 10); // false
// every메서드를 호출한 배열이 빈 배열일 경우 언제나 true를 반환한다
[].every(item => item >3); // true
Array.prototype.find
- 자신을 호출한 배열의 요소를 순회하면서, 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번쨰 요소만을 반환
- find메서드는 콜백 함수의 반환값이 true인 첫 번째 요소를 반환하므로 find의 결과값은 배열이 아닌 해당 요소값
const users= [
{ name: 'Harry', age: 20 },
{ name: 'Kim', age: 30 },
{ name: 'Steve', age: 40 }
];
// name이 Kim인 요서를 반환
const answer = users.find(user => user.name === 'Kim');
console.log(answer); // {name: 'Kim', age: 30}
Array.prototype.findIndex
- 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백함수를 호출하여 반환값이 true인 첫번째 요소의 이넫ㄱ스를 반환
- 콜백 함수의 반환값이 true인 요소가 존재하지 않는다면 -1를 반환
const users = [
{id: 1, name: 'Lee'},
{id: 2, name: 'Park'},
{id: 3, name: 'Joe'},
{id: 4, name: 'Kim'},
];
// id가 2인 요소의 인덱스를 구하기
users.findIndex((user) => user.id === 2); // 1
//name이 Joe인 인덱스 구하기
users.findIndex((user) => user.name === 'Joe'); // 2
Array.prototype.flatMap
- map 메서드를 통해 생성된 새로운 배열을 평탄화 한다. 즉, map메서드와 flat 메서드를 순차적으로 하는 것
const arr = ['hello', 'world'];
// flatMap은 map을 통ㅎ해 생성된 새로운 배열을 평탄화
arr.flatMap(x => x.split(''));
arr.map(x => x.split('')).flat();