고차함수?
함수를 인수로 전달받거나 함수를 반환하는 함수.
Array.sort
배열의 요소를 정렬한다. 원본배열을 직접변경 후 정렬된 배열을 반환한다.
한글도 정렬 가능하며, 디폴트 값은 오름차순이다.
const fruits = ['Banana', 'Orange', 'Apple']
fruits.sort();
console.log(fruits) // ['Apple', 'Banana', 'Orange']숫자요소를 정렬할때는 유니코드 포인트 순서로 정렬하기때문에 바르게 정렬할 때는 반드시 정렬 순서를 정의하는 비교함수를 인수로 전달해야한다.
const points = [40,100,1,5,2,25,10];
points.sort() // [1,10,100,2,25,40,5]
points.sort((a,b) => a-b); // [1,2,5,10,25,40,100]
points.sort((a,b) => b-a); // [100,40,25,10,5,2,1]객체를 요소로 갖는 배열도 정렬할 수 있다.
const todos = [
{id:4,content:'Javascript'}
{id:1,content:'HTML'}
{id:2,content:'CSS'}
]
function compare(key){
return (a,b) => (a[key]>b[key] ? 1:(a[key]<b[key]? -1:0);
}
//id 정렬
todo.sort(compare('id'));
console.log(todos);
// const todos = [
{id:1,content:'HTML'}
{id:2,content:'CSS'}
{id:4,content:'Javascript'}
]
//content 정렬
todo.sort(compare('content'));
console.log(todos);
// const todos = [
{id:2,content:'CSS'}
{id:1,content:'HTML'}
{id:4,content:'Javascript'}
]Array.forEach
fir문을 대체할 수 있는 고차함수 이다. 내부의 반복문을 통해 자신을 호출한 배열을 순회하며 수행해야 할 처리를 콜백함수로 전달받아 반복호출한다.
const numbers=[1,2,3];
const pows=[];
numbers.forEach(item => pows.push(item**2));
console.log(pows) // [1,4,9]Array.map
자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다. (원본배열의 변경X)
const numbers = [1,4,9];
const roots = numbers.map(item => Math.sqrt(item));
console.log(roots); //[1,2,3];
console.log(numbers); //[1,4,9];forEach는 단순히 반복문을 대체하기 위한 고차함수이고, map메서드는 요소값을 다른값으로 매핑한 새로운 배열을 생성하기위한 고차 함수이다.
Array.filter
filter메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복호출한다. 그리고 콜백함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. (원본배열의변경X)
filter메서드가 생성하여 반환한 새로운 배열의 length값은 filter메서드를 호출한 배열의 length보다 같거나 작다.
const numbers=[1,2,3,4,5]
const odds = numbers.filter(item => item%2);
console.log(odds); // [1,3,5];Array.reduce
reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복호출한다. 그리고 콜백함수의 반환값을 다음 순회시에 콜백함수의 첫번째 인수로 전달하면서 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다. (원본배열의 변경X)
첫번째 인수 : 콜백함수, 두번째 인수 : 초기값
const sum= [1,2,3,4].reduce((accumulator,currentValue, index,array)
=> accumulator+currentValue, 0);
console.log(sum) // 10평균구하기
const values=[1,2,3,4,5,6]; const average = values.reduce((acc,cur,i,{length})=>{ //마지막순회가 아니면 누적값을 반환하고 마지막 순회면 누적값으로 평균반환. return i ===length-1?(acc+cur)/length:acc+cur; },0); console.log(average); // 3.5
Array.some
some 메서드는 콜백함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다. (빈배열은 언제나 false)
[5,10,15].some(item=> item > 10); //true
[5,10,15].some(item=> item < 0); //false
['apple','banana','mango'].some(item=> item ==='banana); //true
[].some(item=> item > 3); //false
Array.every
every메서드는 콜백함수의 반환값이 모두 참이면 true, 하나라도 거짓이면 false를 반환한다. 빈배열은 언제나 true를 반환한다.
[5,10,15].every(item=> item > 3); //true
[5,10,15].every(item=> item > 10); //false
[].every(item=> item > 3); //trueArray.find
인수로 전달된 콜백함수를 호출하여 반환값이 true인 첫번째 요소를 반환하며 true값이 없다면 undefined를 반환한다.
const users = [
{id:1,name:'Lee'}
{id:2,name:'Kim'}
{id:2,name:'Choi'}
{id:3,name:'Park'}
]
users.find(user => user.id === 2) // {id:2, name:'Kim'}
// 배열이 아닌 요소를 반환하며 첫번째 요소만 반환한다.Array.findIndex
반환값이 true인 첫번째 요소의 인덱스를 반환. true요소가 없다면 -1을 반환한다.
const users = [
{id:1,name:'Lee'}
{id:2,name:'Kim'}
{id:2,name:'Choi'}
{id:3,name:'Park'}
]
users.findIndex(user => user.id === 2) // 1
users.findIndex(user => user.name === 'Park') // 3
Array.flatMap
map메서드와 flat 메서드를 순차적으로 실행한다. (1단계 평탄화만가능)
const arr= ['hello', 'world']
arr.map(x=> x.split('')).flat();
// ['h','e','l','l','o','w','o','r','l','d'];
arr.fltMap(x =>x.splt(''));
// ['h','e','l','l','o','w','o','r','l','d'];