자바스크립트 고차 함수(Higher-Order Function)란?
자바스크립트는 특정 작업을 손쉽게 처리할 수 있도록 다양한 내장 함수를 제공합니다. 하지만 이러한 내장 함수만으로 문제를 일반적인 방식으로 해결하면 코드가 길어지고 복잡해지기 쉽습니다. 이를 보완하기 위해 자바스크립트는 고차 함수(Higher-Order Function)라는 강력한 도구를 기본적으로 제공합니다.
고차 함수는 다른 함수를 인수로 전달받거나 함수를 반환하는 함수를 의미합니다. 고차 함수를 활용하면 코드의 길이를 줄이고 가독성을 높일 수 있으며, 접근성과 유지보수성도 크게 향상됩니다. 대표적인 고차 함수로는 map(), filter(), reduce()가 있습니다. 이번 글에서는 그중에서도 filter() 고차 함수를 중심으로 살펴보겠습니다.
예제 1. 고차 함수 없이 for 루프로 작성한 경우
고차 함수를 사용하지 않으면 코드는 전체적으로 더 많은 단계를 거치게 됩니다. 아래 예제에서는 기존 배열만으로 충분히 작업을 처리할 수 있음에도 불구하고 결과를 담기 위한 새로운 배열을 따로 생성합니다. 또한 배열을 순회하기 위해 고차 함수를 사용했다면 불필요했을 for 루프까지 작성해야 합니다.
<html>
<body>
<script>
const name = [];
var persons = [
{ name: 'Frodobaggins'},
{ name: 'aragorn'},
{ name: 'gandalf'},
{ name: 'pippin'},
{ name: 'nazgul'},
];
for(let i = 0; i < persons.length; i++) {
if(persons[i].name.length > 6) {
name.push(persons[i]);
}
}
document.write(JSON.stringify(name));
</script>
</body>
</html>
실행 결과
[{"name":"Frodobaggins"},{"name":"aragorn"},{"name":"gandalf"}]예제 2. filter() 고차 함수를 사용한 경우
다음 예제에서는 filter() 고차 함수를 활용했습니다. 앞선 예제와 비교하면 훨씬 적은 코드 줄 수로 같은 로직을 구현할 수 있습니다. 새로운 배열을 직접 선언할 필요도 없고, for 루프 대신 콜백 함수 하나만으로 조건에 맞는 요소를 간결하게 걸러낼 수 있습니다.
<html>
<body>
<script>
const persons = [
{ name: 'Frodobaggins'},
{ name: 'aragorn'},
{ name: 'gandalf'},
{ name: 'pippin'},
{ name: 'nazgul'},
];
const name = persons.filter(person => person.name.length > 7);
document.write(JSON.stringify(name));
</script>
</body>
</html>
실행 결과
[{"name":"Frodobaggins"}]두 번째 예제에서는 조건을 person.name.length > 7로 설정했기 때문에 이름 길이가 7자보다 긴 'Frodobaggins'만 결과로 반환됩니다. 이처럼 filter()를 사용하면 조건식 부분만 수정하면 되므로 코드의 유연성과 재사용성 역시 함께 향상됩니다. 실무에서는 이 외에도 map()으로 배열을 변환하고 reduce()로 값을 누적하는 등 여러 고차 함수를 조합하여 훨씬 깔끔하고 선언적인 코드를 작성할 수 있습니다.