27-2 / 배열 / Array Function

Function, 배열 고차함수

고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.
외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향한느 함수형 프로그래밍에 기반을 두고 있다.
+) 함수형 프로그래밍 :
순수 함수와 보조 함수의 조합으로 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임.
(순수 함수를 통해 부수 효과를 최대한 억제하여 안정성을 높이려는 일환)

Array.prototype.sort()

배열의 요소를 정렬한다. 기본적으로 오름차순으로 요소를 정렬하며 원본 배열을 직접 변경한다. 인수를 통해 정렬순서를 정의하는 비교함수를 넣을 수 있다.
ex) 객체를 요소로 갖는 배열을 정렬 (p531)

const points = [40,100,1,5,2,25,10];
//숫자 배열의 오름차순 정렬
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]

Array.prototype.forEach()

고차함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다.

const numbers = {1,2,3};
const pows = [];
numbers.forEach(item => pows.push(item ** 2)); //
console.log(pows); // [1,4,9]

forEach메서드는 콜백 함수를 호출할 때 3개의 인수(호출한 배열의 요소값과 인덱스, 호출한 배열(this))를 순차적으로 전달한다.

[1,2,3].forEach((item,index,arr) => {
	console.log(`요소값:${item}, 인덱스:${index}, this:${JSON.strigify(arr)}`);
});
/*
요소값:1, 인덱스:0, this:{1,2,3}
요소값:2, 인덱스:1, this:{1,2,3}
요소값:3, 인덱스:2, this:{1,2,3}

foreach 메서드는 원본 배열을 변경하지 않지만 콜백 함수를 통해 배열을 변경할 수는 있다. 기본 반환값은 undefined이다. ( ~p534)

Array.prototype.map()

forEach문과 다른점은 forEach메서드는 언제나 undefined를 반환하고 map 메서드는 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다는 것이다.
마찬가지로 3개의 인수(호출한 배열의 요소값과 인덱스, 호출한 배열(this))를 순차적으로 전달한다.

let fruit = {"apple","banana","grape","orange"};
//반환값인 배열을 return을 통해 수정가능하다.
let data = fruit.map((item)=>{return item+"s";}); 

let hero = {
	{name:"Ironman", actor:"Robert Downey Jr"},
    {name:"Captain America",actor:"Chris Evans"}
    {name:"Black Widow",actor:"Scarlet Johansson"}
}
let elem = hero.map((item)=>{return item.name});
//["Ironman","Captain America","Black Widow"]

Array.prototype.filter()

콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
마찬가지로 3개의 인수(호출한 배열의 요소값과 인덱스, 호출한 배열(this))를 순차적으로 전달한다.

let hero = {
	{name:"Ironman", actor:"Robert Downey Jr"},
    {name:"Captain America",actor:"Chris Evans"}
    {name:"Black Widow",actor:"Scarlet Johansson"}
}
let elem = hero.filter((item)=>{return item.name==="Ironman"});
//[{name:"Ironman",actor:"Robert Downey Jr"}]

elem = hero.filter((item)=>{return item.startswith("I")});
//["Ironman"]

Array.prototype.reduce()

호출한 배열을 모든 요소로 순회하며 인수로 받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. (원본 배열을 변경X)
첫번째 인수로 콜백함수, 두번째 인수로 초기값을 받는다.
콜백함수에는 4개의 인수(초기값 또는 콜백 함수의 이전 반환값, 호추라 배열의 요소값과 인덱스, 호출한 배열 자체 this )가 전달된다.

//1부터 4까지 누적을 구한다
const sum =[1,2,3,4].reduce((accumulator,currentValue,index,array) => accumulator + currentValue,0);
console.log(sum) // 10

주로 자신을 호출한 배열의 모든 요소를 순회하며 하나의 결과값을 구해야 하는 경우에 사용한다. 평균 구하기, 최대값 구하기(Math.max를 추천), 요소의 중복 횟수 구하기, 중단 배열 평탄화(flat메서드 추천), 중복 요소 제거(set사용 추천)

Array.prototype.some

콜백 함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다. 호출한 배열이 빈 배열인 경우 언제나 false를 반환한다.
마찬가지로 3개의 인수(호출한 배열의 요소값과 인덱스, 호출한 배열(this))를 순차적으로 전달한다.

// 배열의 요소 중 10보다 큰 요소가 1개 이상 존재하는지 확인  
[5,10,15].some(item => item > 10); // true
// 배열의 요소 중 'banana'가 1개 이상 존재하는지 확인
['apple','banana','mango'].some(item => item === 'bananan');

Array.prototype.every()

콜백 함수의 반환값이 모두 참이면 true, 단 한 번이라도 거짓이면 false를 반환한다.
호출한 배열이 빈 배열인 경우 언제나 true를 반환한다.
마찬가지로 3개의 인수(호출한 배열의 요소값과 인덱스, 호출한 배열(this))를 순차적으로 전달한다.

// 배열의 모든 요소가 3보다 큰지 확인
[5,10.15].every(item => item > 3); // true

Array.prototype.find()

자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소를 반환한다. 반환값이 true인 요소가 존재하지 않다면 undefined를 반환한다.
마찬가지로 3개의 인수(호출한 배열의 요소값과 인덱스, 호출한 배열(this))를 순차적으로 전달한다.

let users = [
	{id:1, name:'Lee'}
    {id:2, name:'Kim'}
    {id:2, name:'Choi'}
    {id:2, name:'Park'}
]
// id가 2인 첫 번째 요소를 반환한다. find 메서드는 배열이 아니라 요소를 반환한다.
users.find(user => user.id === 2); // {id:2, name:'Kim'}

filter 메서드의 결과값은 콜백 함수의 호출 결과가 true인 요소만 추출하여 반환한 새로운 배열이지만 find의 결과값은 콜백 함수의 반환값이 true인 첫 번째 요소값이다.

Array.prototype.findIndex()

콜백 함수를 호출하여 반환값이 true인 첫번째 요소의 인덱스를 반환한다. 반환값이 true인 요소가 존재하지 않는다면 -1을 반환한다.
마찬가지로 3개의 인수(호출한 배열의 요소값과 인덱스, 호출한 배열(this))를 순차적으로 전달한다.

let users = [
	{id:1, name:'Lee'}
    {id:2, name:'Kim'}
    {id:2, name:'Choi'}
    {id:2, name:'Park'}
]
// id가 2인 요소의 인덱스를 구한다.
users.findIndex(user => user.id === 2); // 1

Array.prototype.flatMap()

map메서드를 통해 생성된 배열을 평탄화 한다. 즉 map메서드와 flat메서드를 순차적으로 실행하는 효과가 있다.
단, flat()메서드처럼 인수를 전달하여 평탄화 깊이를 지정할 수 없고 1단계 평탄화한다. (중천 평탄화를 하려면 map과 flat를 각각 호출하자)

const arr = ['hello','world']
// arr.map(x => x.split('')).flat();
arr.flatmap(x => s.split(''));
// ['h','e','l','l','o','w','o','r','l','d']