[JavaScript] 자바스크립트에서의 함수 - 클로저(1)

안녕하세요 오늘은 자바스크립트에서 지원하는 클로저에 대해 설명해 보고자 합니다. 해당 글은 사내 프런트엔드 세션 발표자로 참여해 준비한 세션 내용을 담았습니다. 총 5개의 섹션이 있을 예정입니다.

 

주제를 선정하게 된 계기 

최근 함수형 프로그래밍 책을 읽으며 클로저가 생각보다 깊게 자리하고 있고, 이미 유용하게 쓰이고 있지만 잘 모르고 있었다는 것을 깨닫게 되었습니다. 지난 토요일에 진행한 feconf 2023 컨퍼런스에 참여해 메모리 누수 디버깅 가이드를 들은 후 전역변수를 참조해 의도적으로 누수를 발생시킨 예제를 보며 잘못된 클로저의 사용이 성능 저하의 원인 중 하나일 것이라는 생각이 들었습니다. 이 포스팅을 통해, 클로저와 고차함수와 같은 어렴풋이 알고 있던 개념을 명확하게 이해시켜 드리고자 합니다. 

 

주제: 클로저와 고차함수 

부제: 어쩌면 당연하게 생각하던 로직,  자신도 모르게 클로저를 활용하고 있지 않았을까? 

• 간단한 예제를 통해 자바스크립트의 함수의 특성과 고차함수에 대해  알아보고 그 안에 적용된 클로저의 원리와 적용 사례를 살펴봅니다. 
• 우리가 항상 사용하는 리액트에서의 클로저를 소개하고 연관지어 주의할 점에 대해 소개합니다. 
• 의도적으로 메모리 누수를 클로저를 통해 발생 시 메모리 누수 발생시 디버깅하는 법을 해봅니다.

---

목차

세션의 목차입니다. 클로저를 이해하기 위해서는 자바스크립트에서 함수의 특성과 역할, 그리고 고차함수를 빼놓을 수가 없었습니다. 목차의 흐름대로 잘 따라와 주시면 그 이유를 아실 수 있을 것입니다.

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

 

---

1. 자바스크립트에서 함수는 '값'이다.

다들 아시고, 또 이미 잘 사용하고 계시겠지만, 자바스크립트에서 함수는 값입니다. 함수는 선언식, 표현식이 있고, 어떻게 사용하든 간에 값으로 사용됩니다. 우리가 데이터를 저장하고 전달하고 반환할 수 있는 것처럼요.

---

우리는 이미 함수를 데이터처럼 잘 사용하고 있습니다. tellType은 인자를 받아 인자의 데이터타입을 출력하는 함수입니다.

dataFn역시 “나 함수"라는 콘솔을 출력하는 함수입니다. 함수는 값이기 때문에 tellType과 dataFn이라는 각각의 변수에 할당할 수 있으며 이 변수들은 각 함수를 참조하고 있습니다. 그리고  변수로써 전달할 수도 있죠.

---

tellType을 조금 더 쓸만하게 바꿔보겠습니다. tellType에 전달 된 인자가 함수라면 그 함수를 실행하게 했습니다.  아니라면 인자의 타입을 그냥 출력하게 했어요. 이렇게 함수의 전달과 동시에 전달된 함수를 실행할 수도 있습니다. 

---

함수는 데이터형이기 때문에 다른 함수로도 반환이 가능합니다. 자바스크립트의 내장함수인 String은 새로운 문자열을 생성해 줍니다. 저는 crazy라는 변수에 String함수를 반환하는 함수를 참조시켰습니다. 주목할 점은 저는 String함수를 실행시키지는 않고 있다는 것입니다. 이 상태에서 만약 crazy함수에 ‘TOK’을 전달해 실행하게 되면 어떻게 될까요? 

 

crazy 함수는 단순히 참조했던 string 함수를 반환하는 역할이기 때문에 어떤 값을 전달하더라도 항상 String 함수를 반환하게 됩니다. 

여기서 crazy를 사용해 “TOK”이라는 문자열을 출력하고 싶다면 어떻게 해야할까요?

---

문자열이 출력되게 하기 위해서는 crazy 가 실행되고 반한 된 값, 즉 string함수에 ‘tok’이라는 인자를 전달해야 하겠죠. crazy는 함수를 반환하고, 반환된 함수에 "TOK"를 전달하여 실행합니다. 만약 crazy를 실행시켜 fn 에프엔이라는 변수에 할당한다면 // 이렇게 tok이라는 인자를 전달하는 것만으로도 문자열 출력이 가능해집니다.

 

 

---

정리

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