배열에는 prototype method가 있다.
그런데 그 중에서도, 콜백 함수를 인자로 받아 특정한 알고리즘을 거쳐주는 메서드가 있는데,
이를 함수에서 배운 고차함수 메서드 라고 한다.
배열의 고차함수는 일반 함수에서의 고차함수는 차이점이 있다.
본래 함수에서 고차함수에 콜백함수가 전달 될 때는 콜백 함수를 호출 해야 return이 된다.
하지만, 배열의 고차함수는 내부적으로 알아서 호출하고, 요소에 접근해서 return까지 해준다.
이러한 편리함 측면에서, 일회성 기능을 수행 할 때는 함수보타 고차함수를 사용한다.
💡고차 함수는 보통 3개의 인자를 받는다. (itm, idx, arr)
itm은 배열의 요소이며, idx는 인덱스, arr는 실제 참조하고 있는 배열이다.
따라서, arr를 이용 할 경우 실제 원본 배열이 수정된다.
⚪ return하지 않는 고차함수 forEach
forEach는 아무 값도 retrun하지 않는다.
따라서 요소에 연산이 들어가도 반영이 되지 않는다는 것이다.
아무 return도 없지만 for of와 같은 기능으로 사용 할 수 있다.
처리 속도는 forEach < for...of < for 이기 때문이다.
❗ return이 되지 않는다.
const arr = [1, 2, 3, 4];
arr.forEach((itm, idx, arr ) => {
itm++;
}
)
console.log(arr); // [1, 2, 3, 4]
❗세번째 인자를 전달 할 경우 문제점 (원본 변경)
const arr = [1, 2, 3, 4];
arr.forEach((itm, idx, arr ) => {
arr[idx]++;
}
)
console.log(arr); // [2, 3, 4, 5]
⚪ 처리한 결과를 새 배열로 반환하는 map
Array.from에서 배웠듯이 Array.from또한 알고리즘을 거쳐서, 새로운 배열로 반환하는 함수였다.
이것과 같은 기능을 하는 것에 map이다.
두 개의 차이점은, 작성 법이 조금 더 간편하다는 것 뿐이다.
둘 다 얕은 복사 이기 때문에 원본 배열을 변경하지 않는다.
const arr1 = [1, 2, 3, 4, 5];
const arr2 = Array.from(arr1, x => x + 1);
const arr3 = Array.from(arr1, x => x * x);
const arr4 = Array.from(arr1, x => x % 2 ? '홀' : '짝');
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr1);
const maped2 = arr1.map( x => x + 1 );
const maped3 = arr1.map( x => x * x );
const maped4 = arr1.map( x => x % 2 ? '홀' : '짝');
console.log(maped2);
console.log(maped3);
console.log(maped4);
console.log(arr1);
⚪ find, findLast
조건에 만족하는 값을 찾아서 반환한다.
const arr = [1, 2, '삼', 4, '오'];
const result = arr.find(i => typeof i === 'string');
console.log(result); // 삼
const answer = arr.findLast(i => typeof i === 'string');
console.log(answer); // 오
⚪ findIndex, findLastIndex
조건에 만족하는 값을 찾아서 인덱스로 반환한다.
없는 값은 -1로 반환한다.
const result = arr.findIndex(i => typeof i === 'number');
const answer = arr.findLastIndex(i => typeof i === 'number');
console.log(result, answer); // 0 3
const error = arr.findIndex(i => typeof i === 'boolean');
console.log(error); // -1
⚪ some, every
- some: 조건에 요소가 한개라도 만족하면 true를 반환한다.
- every: 조건에 요소가 모두 만족해야 true를 반환한다.
const original = [1, 2, 3, 4, 5];
const isSome = original.some(i => typeof i === 'number');
const isEvery = original.every(i => typeof i === 'number');
console.log(isSome, isEvery); // true, true
⚪ filter
조건에 만족하는 요소들만 배열로 반환한다.
얕은 복사이기 때문에 원본을 변경하지 않는다.
const original = [1, 2, 3, '사', '오'];
const result = original.filter(i => typeof i === 'string');
console.log(result); // ['사', '오']
⚪ reduce, reduceRight
다른 고차함수와 다르게 인자를 (이전요소, 현재요소, 인덱스, 해당배열) 받는다.
이전요소와 현재요소를 접어들어가면서 연산한다.
이전요소는 0번째 인덱스 값, 현재요소는 1번째 인덱스 값을 가리키며, 인덱스는 1부터 카운팅된다.
condeition 뒤에 콤마로 초기값을 전달 할 수 있다.
초기값을 전달 할 경우, 이전 요소는 초기값이 되고, 현재요소는 0번째 인덱스 값이 되며 인덱스는 0부터 시작한다.
reduceRight은 오른쪽부터 reduce한다.
const arr = [1, 2, 3];
const result = arr.reduce((prev, curr) => prev + curr );
console.log(result); // 6
const init = arr.reduce((prev, curr) => prev + curr, 6);
console.log(init); // 12
💡초기값을 원시값으로 전달 할 경우 prev 자체가 값이 되지만, 객체로 전달 할 경우 prev의 프로퍼티가 된다.
const arr = [1, 2, 3];
console.log(
arr.reduce((prev, curr) => {
return {
odd: prev.odd + curr % 2,
even: prev.even + (1 - curr % 2)
}
}, {odd: 0, even: 0})
);
⚪ sort
오름차순, 내림차순 정렬한다.
원본을 변경하는 메서드이다.
문자고 오름차순 정렬일 경우 인자를 전달하지 않아도 되지만, 숫자일 경우 사전 순으로 정렬되기 인자를 전달 해야 한다.
인자를 전달 할 때는 a, b를 통해 첫번 째 요소와 두번 째 요소를 비교한다.
sort메서드는 return되는 값에 따라 오름차순 내림차순을 하게 된다.
return이 음수일 경우 그대로, 양수일 경우 a와 b가 치환된다.
a가 더 클 경우 a-b를 하게 된다면, sort에 양수가 전달되므로, 치환이 된다. => 오름차순
a가 적을 경우, b-a를 하게 된다면, sort에 양수가 전달되므로 그대로가 된다. => 내림차순
또 다른 방식으로는 직접 return값을 지정 하는 방법이 있다.
const arr = [1, 2, 3, 4, 5];
arr.sort((a,b) => a - b);
console.log(arr); // [1, 2, 3, 4, 5]
arr.sort((a,b) => b - a);
console.log(arr); // [5, 4, 3, 2, 1]
arr.sort((a,b) => a > b ? 1 :-1);
console.log(arr); // [1, 2, 3, 4, 5]
arr.sort((a,b) => a < b ? 1 : -1);
console.log(arr); // [5, 4, 3, 2, 1]
⚪ flatMap
map을 한 상태에서 flat을 한다.
한단계만 펼칠 수 있다.
const arr = [1, 2, 3, 4, 5];
arr.flatMap(i => i);
console.log(arr);
const multiple = [1, [2, [3, [4]]]];
console.log(multiple.flatMap(i => i));
console.log(arr.flatMap(i => i * 2))
const word = '하나 둘 셋 넷 다섯 여섯 일곱 여덟 아홉 열';
console.log(
word
.split(' ')
.flatMap(i => i.split(''))
);
flat 메서드는 한 단계를 벗기는 용도이고, flatMap은 알고리즘을 거치면서 벗길 수 있다고 생각하면 된다.
또한, map이 사용된 것이기 때문에 원본에는 변경이 없는 것을 확인 할 수 있다.