최신 Javascript – 고차 배열 함수

TIL: 오늘 배웠어요

고차 배열 함수

고차 함수는 함수를 인수로 받거나 함수를 반환하는 함수입니다.

---

고차 배열 함수란 무엇입니까?

고차 함수는 외부 상태의 변경이나 데이터 변경을 방지합니다. 불변성을 향한 노력함수형 프로그래밍을 기반으로 합니다.

JavaScript의 고차 함수는 하나 이상의 함수를 인수로 받거나 함수를 결과로 반환하는 함수입니다.

이러한 함수를 배열과 함께 사용하면 고차 배열 함수라고 합니다.

---

어레이 프로토타입.정렬 기준

돌연변이

– 원래 배열을 직접 변경하고 정렬된 배열을 반환합니다.

const numbers = (3,1,2);

numbers.sort();

console.log(numbers); // (1,2,3)

정렬 방법의 기본 정렬 순서는 다음과 같습니다. 유니코드 포인트의 순서따르다

('2', '1').sort(); // ('1', '2')
(2, 1).sort(); // (1, 2)

('2', '10').sort(); // ('10', '2')
(2, 10).sort(); // (10, 2)

이 때문에 위와 같은 현상이 발생합니다. 문자열 “10”의 유니코드 포인트는 문자열 “2”의 유니코드 포인트 앞에 옵니다.

정렬 기준(’10’, ‘2’). 정렬 방법은 일시적으로 문자열로 변환한 후 배열의 요소를 정렬합니다.

정렬 방법을 사용하여 숫자 배열(2, 10)을 정렬하면 (10, 2)로 정렬됩니다.

따라서 숫자 항목을 정렬할 때 정렬 순서를 정의하는 비교 함수를 정렬 메서드에 인수로 전달해야 합니다.

const points = (40, 100, 1, 5, 2, 24, 10);

// 오름차순 정렬
points.sort((a,b) => a - b);
console.log(points); // (1, 2, 5, 10, 25, 40, 100)

// 내림차순 정렬
points.sort((a, b) => b - a);
console.log(points); // (100, 400, 25, 10, 5, 2, 1)

---

어레이 프로토타입.마다

– forEach 메서드는 반복문을 추상화하고 이를 호출한 배열을 처리하기 위해 반복문을 내부적으로 반복하는 고차 함수입니다. 콜백 함수 계속해서 호출됩니다. for문으로 구현한 예제를 forEach 메소드로 구현하면 다음과 같다.

const numbers = (1, 2, 3);
const pows = ();

for (let i = 0; i < numbers.length; i++) {
	pows.push(numbers(i) ** 2);
}
console.log(pows); // (1, 4, 9)

const pows2 = ();
numbers.forEach(item => pows2.push(item ** 2));
console.log(pows2); // (1, 4, 9)

---

어레이 프로토타입.지도

– 원래 배열의 모든 요소에 대해 제공된 함수를 호출한 결과를 포함하는 새 배열을 반환합니다.

const numbers = (1, 4, 9);

const roots = numbers.map(item => Math.sqrt(item));

// map 메서드는 원본 배열을 변경하지 않는다.
console.log(numbers); // (1, 4, 9)

// map 메서드는 새로운 배열을 반환한다.
console.log(roots); // (1, 2, 3)

map 메서드에 의해 생성된 새 배열의 length 속성 값은 map 메서드가 호출된 배열의 length 속성 값과 일치해야 합니다. 즉, map 메서드가 호출된 배열과 map 메서드가 반환한 배열이 1:1로 매핑됩니다.

---

어레이 프로토타입.필터

– 콜백 함수의 반환 값이 참인 요소로만 구성된 새로운 배열을 반환합니다.

const numbers = (1, 2, 3, 4, 5);

// 홀수인 요소만 필터링
const odds = numbers.filter(item => item % 2);
console.log(odds); // (1, 3, 5)

---

어레이 프로토타입.줄이기 위해

– 단일 결과를 생성하고 반환합니다. 네 개의 인수가 콜백 함수에 전달됩니다.

1. 원래 값
2. 배열의 요소 값
3. 현재 인덱스
4. 배열 자체

const sum = (1, 2, 3, 4).reduce((이전값, 현재값, 인덱스, 배열) => 이전값 + 현재값 , 0);

console.log(sum); // 10

이러한 방식으로 평균값을 찾고, 최대값을 찾고, 중복 요소 수를 찾고, 중첩된 배열을 부드럽게 하고, 중복 요소를 제거할 수 있습니다.

또한 Reduce 메서드를 호출할 때 초기 값을 전달하는 것이 항상 안전합니다.

---

어레이 프로토타입.찾다

– filter 메소드는 콜백 함수의 반환값이 true인 첫 번째 요소를 반환하기 때문에 find의 결과는 배열이 아닌 해당 요소의 값이다.

(1, 2, 2, 3).filter(item => item === 2); // (2, 2)

// find 메서드는 요소를 반환한다.
(1, 2, 2, 3).find(item => item === 3); // 2

---

어레이 프로토타입.인덱스 찾기

– 자신을 호출한 배열의 요소를 반복하고 인수로 전달된 콜백 함수를 호출합니다.
반환 값이 true이면 첫 번째 요소의 인덱스를 반환하고 false이면 -1을 반환합니다.

const 성씨 = (
	{ id: 1, name: 'Lee' },
    { id: 2, name: 'Kim' },
    { id: 2, name: 'Choi' },
    { id: 3, name: 'Park' }
);

성씨.findIndex(user => user.id === 2); // 1

성씨.findIndex(user => user.name === 'Park'); // 3

---

어레이 프로토타입.flatMap

– flatMap 메서드는 map 메서드로 생성된 새 배열을 평면화합니다. 즉, map 방식과 flat 방식이 순차적으로 실행되는 효과가 있다.

const arr = ('hello', 'world');

arr.map(x => x.split('')).flat();
// ('h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd')

arr.flatMap(x => split(''));
// ('h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd')

그러나 중첩 배열의 평면화 깊이를 지정해야 하는 경우에는 flatMap 메서드를 사용하지 마십시오.

지도 또는 플랫 메서드를 호출합니다.