[JavaScript] 고차 함수 - 클로저(2)

안녕하세요 자바스크립트에서의 함수를 다룬 지난 포스팅에 이어서 이번 포스팅에서는 고차함수에 대해 다뤄보겠습니다.

 

목차

1. 자바스크립트에서 함수는 “값"이다.
2. 고차함수
3. 클로저의 이해
4. 클로저와 메모이제이션
5. 리액트에서의 클로저
6. 클로저 사용 시 주의할 점
7. (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고)

 

---

2. 고차함수

지난 포스팅의 내용을 정리해 보면 자바스크립트에서 함수는 데이터형이기 때문에 저장되고 전달되고 반환하는 예시를 살펴볼 수 있었습니다. 예시에서는 인자로서 다른 함수를 취하는 함수까지 있었지만, 다른 함수를 반환하지는 않았는데요. 함수를 인자로 받고 또 반환하며 이를 출력하는 고차함수에 대해 알아보겠습니다.

 

---

고차함수란 1. 다른 함수를 인자로 받거나 2. 다른 함수를 반환하거나 3. 위의 두 조건을 모두 충족하는 경우를 말합니다. 또한 개발을 하면 항상 고민하게 되는 단어인 추상화는 고차함수와도 깊게 관련되어 있습니다.

 

---

우리가 자주 사용하는 forEach의 내부로직이 왼쪽과 같이 구현되어있다고 봅시다. forEach에서 는 callback함수를 받으니 고차함수에 해당되며 다만, 전달될 함수를 실행만 하고 반환하지는 않습니다.

 

---

forEach 함수는 배열의 각 아이템을 순회하며 전달한 함수를 실행시켜주는 고차 함수입니다. forEach 함수를 사용할 때, 우리는 배열을 순회하고자 하는 로직을 직접 작성할 필요 없이, 해당하는 함수를 forEach에 전달함으로써 순회 작업을 추상화할 수 있습니다.

 

이러한 추상화를 통해 우리는 각 아이템에 대한 작업에 집중할 수 있으며 내부 동작을 자세히 이해하지 않아도 됩니다. 따라서 forEach 함수는 순회하는 문제를 추상화한 고차 함수로, 우리가 반복 작업을 보다 간단하게 처리할 수 있도록 도와줍니다.

 

---

배열의 요소가 모두 참이면 true를, 하나라도 거짓이 있다면 false를 반환하는 every 함수입니다. every의 내부로직에서 돌아가는 반복문을 for of문으로 바꿀 수 있겠죠. 또 우리는 내부로직을 이해할 필요가 없는 상태에서 그저 every함수를 사용하고 있습니다. 이로써, "for" 루프는 "for...of" 루프로 추상화되었으며, 배열을 순회하며 각 아이템이 전달받은 조건 함수(fn)를 모두 만족할 경우 true를 반환하는 동작은 "every" 함수로 추상화되었다고 할 수 있습니다.

 

---

배열 프로토타입에서 사용가능한 sort함수가 있습니다. sort함수는 정렬의 기준을 담은 comparefunction을 인자로 받습니다. comparefunction을 정렬하면 자바스크립트에서 모든 데이터를 정렬할 수 있는 만큼 sort함수는 고차함수로서 아주 유연한 프로토타입입니다. people이라는 객체가 있고 이름과 성을 각각 오름차순으로 정렬해 봅시다. firstName이 기준이라면 이렇게 lastName이 기준이라면 이렇게 짤 수 있겠죠. 여기서 여러분은 이 하이라이트 된 로직을 sort함수를 사용하면서 일일이 작성하고 싶지 않고 싶은 마음이 들 것 같습니다. sort함수가 정렬함수이라는 것을 알 수 있듯 어떤 키 값을 기준으로 정렬이라는 것을 추상화시키면 어떨까요?

 

---

그래서 sortBy라는 함수를 만들었습니다. sortBy함수는 어떤 키값이라는 인자를 취해 두개의 인자를 취하는 함수를 반환해 줍니다.

---

추상화시킨 함수를 실행해 봅시다. 비교함수를 내부로직으로 감추어 추상화시키니 people을 “firstName”을 기준으로 정렬한다.라고 명확히 알 수 있습니다. 여기서 “어떻게" 정렬할 것인지 정하고 싶을 때가 있을 수 있겠죠. 그럼 sortBy~라는 함수를 각각 만들 수도 있고 더 나아가 두 번째 인자로 어떻게라는 함수를 지정할 수도 있겠습니다. 이렇게 고차함수와 추상화의 밀접한 관계를 살펴보았습니다. 그런데 여기서 의문이 들 수도 있습니다.

---

다시 추상화시킨 sort구절을 보면 sort함수는 sortBy함수가 반환한 compareFn 함수를 받아 정렬된 배열을 반환해 줍니다. sortBy함수는 인자를 취하고 활용해서 다른 함수를 반환한 것입니다.

 

---

여기서 어떻게 반환된 함수가 전달된 property인자 값을 가져올 수 있는 걸까요? 

 

---

이는 바로 자바스크립트가  클로저를 지원하기 때문입니다.

---

정리

고차함수가 개발자로 하여금 일반적인 문제를 추상화로 만들 수 있게 어떻게 도와주는지 살펴보았습니다. sortBy라는 고차함수 예제를 들면서 고차함수이면서 클로저패턴을 가지고 있다고 하고 마무리를 하였습니다. 다음 포스팅에서는 클로저가 무엇인지 예제를 통해 살펴보고 활용하는 방안을 소개해드리려고 합니다.