내장 고차 함수

Minsu Lee·2023년 5월 11일

JavaScript 함수형 프로그래밍

✨SEB FE

이전 포스트에서 다룬 고차 함수 내용을 바탕으로 자주 사용되는 배열의 내장 고차 함수에 대한 내용을 다뤄봅니다!

💡 Push yourself, because no one else is going to do it for you.

🌱 함수형 프로그래밍

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

함수형 프로그래밍은 결국 함수를 통해 부수 효과를 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력!

📌 배열 고차 함수

JavaScript에는 기본적으로 내장된 고차 함수가 여럿 있다. 그중에서 배열 메서드들 중 일부가 대표적인 고차 함수에 해당하고 매우 유용하여 사용도가 높다. (사용법 익히기!)
자주 사용할 것 같은 배열 고차 함수를 설명한다.! 미래의 헷갈릴 나를 위해..ㅎㅎ 간단한 예제도 포함한ㄷ

🌿 Array.prototype.filter

filter는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

콜백 함수의 반환값이 true인 요소들로 구성된 새로운 배열을 반환한다.
원본 배열은 변경되지 않는다.
filter는 자신을 호출한 배열에서 필터링 조건을 만족하는 특정 요소만 추출하여 새로운 배열을 만든다.
즉 새로운 배열의 length 값은 원본 배열의 length 값보다 작거나 같다.

const number = [1, 2, 3, 4];

const odd = number.filter(item => item%2);
//원본 배열은 변경하지 않고, 새로운 배열을 반환한다.
console.log(odd) //[1, 3];
console.log(number) //[1, 2, 3, 4];

🌿 Array.prototype.map

map은 자신을 호출한 배열의 모든 요소를 순화하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
원본 배열은 변경되지 않는다.
map을 호출한 배열과 map이 생성하여 반환한 배열은 1:1 매핑을 이룬다.
즉 새로운 배열과 원본 배열의 length 값은 반드시 일치한다.

const number = [1, 2, 3, 4];

const pows = number.map(item => Math.sqrt(item));
//원본 배열은 변경하지 않고, 새로운 배열을 반환한다.
console.log(pows) //[1, 4, 9, 16];
console.log(number) //[1, 2, 3, 4];

🌿 Array.prototype.reduce

reduce는 자신을 호출한 배열의 모든 요소를 순화하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

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

const number = [1, 2, 3, 4];

const sum = number.reduce((accumulator, currentValue)=> accumulator + currentValue, 0);

console.log(sum) //10

reduce는 평균, 요소의 중복 횟수, 배열 평탄화, 중복 요소 제거 등 다양한 부분에서 활용될 수 있다.!

🌿 Array.prototype.forEach

forEach는 for문을 대체할 수 있는 고차 함수이다.

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

원본 배열을 직접 변경하지 않는다. -
변경은 가능 -> array.forEach((item, index, arr)=>{arr[index] = item*2;})
반환값은 항상 undefined
콜백함수에 인자를 전달할 수 있다.
배열의 요소값과 인덱스 그리고 forEach를 호출한 배열자체 this 이렇게 3가지를 전달할 수 있다.
for문과 달리 break, continue문은 사용이 불가능하다.

const number = [1, 2, 3, 4];
const pows = [];

number.forEach(item => pows.push(item*item));
console.log(pows) //[1, 4, 9, 16];

🌿 Array.prototype.sort

sort는 배열의 요소를 정렬하는 고차 함수이다.

원본 배열을 직접 변경한다.
반환값은 정렬된 배열이다. []
기본적으로 오름차순으로 정렬한다.(한글도 가능)
내림차순 정렬은 정렬 메소드 사용 후 reverse메서드를 사용하여 순서를 뒤집을 수 있다.
숫자 요소로 이루어진 배열을 정렬할 때 정렬 순서를 정의하는 함수가 필요하다.

const fruits = ['banana', 'orange', 'apple'];

//오름차순 (원본 배열을 직접 변경한다.)
fruites.sort(); //['apple', 'banana', 'orange',]

//내림차순 (reverse메서드도 원본배열 직접 변경한다.)
fruites.reverse(); //['orange', 'banana', 'apple']

//숫자 요소 배열일 경우
const points= [40, 100, 1, 2, 5, 2, 25, 10];

//숫자 배열의 오름차순. 비교 함수의 반환값이 0보다 작으면 a를 우선 정렬
points.sort((a, b)=>a-b);
//숫자 배열의 오름차순. 비교 함수의 반환값이 0보다 작으면 b를 우선 정렬
points.sort((a, b)=>b-a);

🌿 Array.prototype.find

ES6에 도입된 find는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수의 반환값이 true인 첫 번째 요소를 반환한다. 반환값이 true인 요소가 없으면 undifiend를 반환한다.

const user = [
  {id: 1, name: "Lee"},
  {id: 2, name: "Kim"},
  {id: 3, name: "Choi"},
  {id: 4, name: "Park"}
];

//filter은 배열을 반환하지만, find는 요소를 반환함
user.find(user =>user.id === 2); //{id: 2, name: "Kim"}

🌿 Array.prototype.findIndex

ES6에 도입된 find는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수의 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 반환값이 true인 요소가 없으면 -1을 반환한다.

const user = [
  {id: 1, name: "Lee"},
  {id: 2, name: "Kim"},
  {id: 3, name: "Choi"},
  {id: 4, name: "Park"}
];

//filter은 배열을 반환, find는 요소를 반환, findIndes는 요소의 인덱스 반환
user.find(user =>user.id === 2); //1