[JS] find,some,filter,map 등의 고차 함수 활용하기

javascript

개요

오늘은 JavaScript에서 제공하는 고차 함수(Higer-Order Function)에 대해 알아보려고 합니다. 고차 함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 의미하는데, 함수는 일급 객체(First-Class Citizens)이기 때문에 JavaScript에서 함수는 일반 값처럼 취급이 가능하여 변수에 할당되거나 다른 함수의 인자로 전달 또는 함수의 반환값으로 사용할 수 있습니다. 

 

이러한 특징들을 이용한 고차 함수는 코드의 재사용성을 높이고, 간결하고 읽기 쉬운 코드를 작성하는데 매우 유용하게 사용됩니다. 본문 하단에서 일반적으로 함수를 만들 때와 고차 함수를 사용할 때의 차이를 잠깐 알아보고 다양한 고차 함수를 소개할게요😊

 

고차 함수를 사용하는 이유📙

만약에 1~5까지 있는 특정 배열에서 3보다 큰 첫번째 값을 출력하라고 했을 때, 고차 함수를 사용하지 않는다면 어떻게 구성이 될까요?

const arr = [1, 2, 3, 4, 5];
let foundVal = null;

for (let i=0; i<arr.length; ++i) {
   if(i > 3) {
     foundVal = arr[i];
     break;
   }
}
console.log(foundVal); // 4 출력

 

위와 같이 우리가 흔히 알던 반복문과 if 조건문을 이용하여 값을 출력할 수 있습니다. 하지만 이런 방식은 배열을 순회하는 코드를 직접 작성해야 하며, 조건을 만족할 때 추가적인 작업(break)을 수동으로 처리해야 하는 번거로움이 있습니다.

 

고차 함수인 find()를 사용한다면 어떻게 달라질까요?

const arr = [1, 2, 3, 4, 5];
const foundVal = arr.find(value => value > 3);

console.log(foundVal); // 4 출력

 

find() 함수를 사용하면 배열을 순회하는 로직을 내부적으로 처리하고, 조건을 만족하는 첫 번째 요소만 반환합니다. 위의 코드보다 훨씬 간결하지 않나요? 이 밖에도 조금 더 코드가 직관적이며, 성능 면에서도 find() 함수는 조건을 만족하는 요소를 찾으면 즉시 순회를 멈추지만, if 조건문은 break 같이 조건을 걸어주지 않으면 모든 배열을 순회하기 때문에 성능적인 차이도 있습니다😄

 

💡 find() 함수는 배열 내에서 조건을 만족하는 첫 번째 요소만 반환할 때 사용하기 때문에, 복잡한 조건을 다룰 경우에는 if 조건문을 구성하는 것이 좋습니다

 

즉, 여러가지의 고차 함수의 사용법에 대해 자세히 알고 있다면 코드를 조금 더 간결하고 직관적이게 구성이 가능합니다. 그럼 JavaScript에서 제공하는 여러 고차 함수들을 소개하겠습니다

 

고차 함수 예시📘

1) forEach() 함수

forEach() 함수는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.

const arr = [1, 2, 3];
arr.forEach((value, index) => {
  console.log(`Index: ${index}, Value: ${value}`);
});
// 출력 :
// Index: 0, Value: 1
// Index: 1, Value: 2
// Index: 2, Value: 3

 

2) findIndex() 함수

배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex(value => value > 3);
console.log(result); // 출력 : 3

 

3) some() 함수

배열에서 제공된 테스트 함수를 만족하는 요소가 하나 이상으로 존재하면 true를 반환하고, 그렇지 않다면 false를 반환합니다.

const arr = [1, 2, 3, 4, 5];
const result = arr.some(value => value > 3);
console.log(result); // 출력 : true

 

4) every() 함수

배열에서 제공된 테스트 함수를 모두 만족한다면 true를 반환하고, 그렇지 않다면 false를 반환합니다.

const arr = [1, 2, 3, 4, 5];
const result = arr.every(value => value > 0);
console.log(result); // 출력 : true

 

5) filter() 함수

배열의 요소 중 테스트 함수를 만족하는 요소들만 뽑아 새로운 배열을 구성합니다.

const arr = [1, 2, 3, 4, 5];
const result = arr.filter(value => value > 3);
console.log(result); // 출력 : [4, 5]

 

6) map() 함수

배열의 각 요소를 제공된 함수의 결과값을 새로운 배열로 반환합니다.

const arr = [1, 2, 3];
const result = arr.map(value => value * 2);
console.log(result); // 출력 : [2, 4, 6]

 

7) reduce() 함수

배열을 하나의 값으로 축약합니다. 아래 예시는 배열을 순회하면서 값을 축적하여 값을 출력합니다.

const arr = [1, 2, 3, 4];
const result = arr.reduce((acc, value) => acc + value, 0);
console.log(result); // 출력 : 10

 

마치며

지금까지 JavaScript에서 제공하는 고차 함수에 대해 알아보았습니다. 혹여 더 많은 정보가 궁금하신 분들은 MDN 사이트를 클릭하셔서 더 많은 함수를 찾아보시면 좋을 것 같네요. 다음 포스팅에서 뵐게요🙇‍♂️

---

👨‍👩‍👦‍👦 오픈채팅방 운영

취업을 준비하는 예비 개발자분들을 위한 질문&답변할 수 있는 공간을 만들었습니다. 취업과 이직을 하기 위해서 어떤 걸 중점적으로 준비해야 하는지부터 포트폴리오&이력서 작성법 등 다양한 질문들을 받고 답변을 드립니다. 참여하셔서 다양한 정보 얻고 가시면 좋을 것 같네요😁

 

참여코드 : 456456

https://open.kakao.com/o/gVHZP8dg