[JavaScript] 고차 함수의 늪에 빠진 날

JavaScript

[JavaScript] 고차 함수의 늪에 빠진 날

Dana10 2025. 1. 16. 11:41

고차 함수.

뭐지 이 굉장히 어려울 것만 같은 이름은..?

쫄지 말자!

사실 고차 함수는 이미 우리가 밥 먹듯이 사용하고 있다.

단지 저 용어가 생소할 뿐..(나만 그럴수도)

그럼 고차 함수를 파헤쳐보자.

고차 함수란?

함수를 인자로 받는 함수
함수를 결과로 반환하는 함수

함수를 인자로 받는다 ..?

너무 익숙하지 않나요?

const getUsersName = data.map(({name}) => name)

map 메서드는 인자로 콜백 함수를 넣어준다.

어? 함수에 콜백 함수를 인자로 넣었네? 아! map도 고차 함수구나~

뭐야 별거 아니네.

하지만 내가 오늘 이 글을 쓴 이유..

바로 함수를 결과로 반환하는 함수에서 몇 시간을 헤맸기 때문이다.ㅎ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./test.js" defer></script>
</head>
<body>
  <input type="text" />
  <div>
    <span>default : </span>
    <span id="default"></span>
  </div>
  <div>
    <span>throttle : </span>
    <span id="throttle"></span>
  </div>
</body>
</html>

document.querySelector('input').addEventListener('input',(e) => {
  const { value } = e.target;
  document.getElementById('default').innerText = value;
  throttle(value);
})

let isThrottling;
const throttleFunc = (cb, delay) => {
  if (isThrottling) return; 
  isThrottling = true; 
  return (...args) => {
    setTimeout(() => {
      cb(...args);
      isThrottling = false; 
    }, delay);
  };
};

const throttle = throttleFunc((value) => {
  document.getElementById('throttle').innerText = value;
},1000);

쓰로틀링 함수를 구현해 보고 있었다.

<내가 원하던 동작>

매개변수 delay로 설정한 시간(여기서는 1초)이 지나면 innerText를 채운다.
1초가 지나기 전에 이벤트가 발생하면 무시한다.
1초가 지나야만 innerText를 채운다.

이건데, 테스트를 해보면 묘하게 그게 아닌 거 같은데..

그냥 1초마다 이벤트를 실행하는 거 같다는 느낌이 들었다.

<나의 생각회로>

이벤트가 발생하면 throttle(value)가 호출되겠지.
그러면 throttle에 throttleFunc가 할당돼 있으니까 얘가 매번 실행이 되겠구나.
전역에 선언된 isThrottling의 최초의 값은 undefined니까 첫 번째 코드는 가볍게 무시하고 ~
다음 줄에서 isThrottling이 true로 할당되겠고
그다음 이제 타이머가 설정되겠네
1초가 지나면 콜백 함수에 값을 전달해 주고 isThrottling이 다시 false가 되니까 그다음 동작도 잘 수행하겠지!
만약 1초가 지나기 전에 이벤트가 발생해서 throttleFunc가 또 실행이 되면
아까 isThrottling이 true로 할당됐으니까 ( 아직 이벤트 종료 전이라 false가 아니고 )
첫 번째 줄 if문에서 return되니까 추가적으로 이벤트 실행이 안 될 거야.
됐다. 완벽한 구현이야!

는 무슨..^^

뭔가 이상해서 throttleFunc내부에 isThrottling을 콘솔로 찍어보았다.

뭐지..? 새로고침 했을 때 한 번만 콘솔이 출력되고

그 이후에는 아무리 input을 입력해서 event를 발생시켜도 콘솔이 안 찍힌다.

즉 이벤트가 발생해도 저쪽이 실행되지 않는다는 건데..?

이 부분에서 위에 언급한 저 과정이 맞는 거 같은데 뭐가 문제일까, 왜 저 함수를 안 탈까를 정말 오랜 시간 고민했다..

throttle을 콘솔에 찍어봤는데 내용은 제대로 읽어보지도 않고 함수가 나오길래

그치 함수가 나오지 함수를 할당했으니까.

하고 넘어가기도 했고..^^(바보)

그러다가 발견했다.

어? throttle이 throttleFunc의 return 부분만 받네?

아!! throttleFunc()의 형태였구나!!

그러니까 함수의 실행 결과를 받아서 throttle에 할당한 것이었다!

따라서 throttleFunc가 return한 부분만 throttle에 할당된 것이고

이벤트가 발생할 때마다 return부분이 재실행 됐던 것이다.

콘솔이 최초 이후에 안 찍혔던 이유를 찾았다.

최초에는 throttleFunc의 반환값이 throttle에 할당되어야 하기 때문에

throttleFunc가 실행이 될 것이다. 여기서 콘솔이 출력되는 것이다.

그리고 값이 반환된 이후에는 throttleFunc가 실행되는 것이 아니고

throttle에 할당된 throttleFunc의 return부만 실행되기 때문에 콘솔이 출력되지 않는 것이었다.

묘하게 동작이 이상하다고 생각했던 부분도 원인을 알아냈다.

  if (isThrottling) return; 
  isThrottling = true;

throttleFunc 내부의 이 두 줄이 return문 밖에 있어 동작하지 않았다.

그래서 이벤트가 발생할 때마다 타이머가 맞춰진 것이고

결국 1초가 지나지 않았어도 이벤트가 발생했다면 계속 setTimeout이 실행되고 있었던 것이다.

제대로 동작할 수 있게 코드를 아래와 같이 수정하였다.

const throttleFunc = (cb, delay) => {
let isThrottling = false;
  return (...args) => {
    if (isThrottling) return; 
    isThrottling = true; 
    setTimeout(() => {
      cb(...args);
      isThrottling = false; 
    }, delay);
  };
};

이런 구조가 (나에게는) 생소해서 헤맸는데,

이렇게 함수를 반환하는 함수도 있다는 것을 알게 되었다.

그리고 또 이런 고차함수를 어떻게 분석하면 되는지도 배울 수 있는 시간이었다!

'JavaScript' 카테고리의 다른 글

[JavaScript] 배열에서 중복제거를 하는 방법 (0)	2025.01.16
[JavaScript] Array.prototype.splice() (0)	2025.01.16
[JavaScript] 배열을 일일이 순회하지 않고 더 빨리 값을 찾고 싶니? new Set() 써볼래? (0)	2025.01.15
[JavaScript] 성능 최적화를 해보자 ! Debouncing과 Throttling (0)	2025.01.14
[JavaScript] 이벤트 위임이 뭐죠?? ( feat . closest, classList ) (0)	2025.01.13

현재글[JavaScript] 고차 함수의 늪에 빠진 날

🌱 Frontend Developer

✏️ 내가 보려고 기록하는 개발일지

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

🌱 Frontend Developer