일급함수와 클로저(Closure)

일급함수

: 일급객체의 특성을지닌 함수

 

일급객체란?  (다른 객체들이 가지는 권한을 모두 가지는 객체)

1. 모든 일급 객체는 변수나 데이터에 담을 수 있어야 한다.
2. 모든 일급 객체는 함수의 파라미터로 전달 할 수 있어야 한다.
3. 모든 일급 객체는 함수의 반환값으로 사용할 수 있어야 한다.

프로그래밍  언어는 해당 언어의 함수가 변수처럼 취급될 때, 일급 함수(First-Class Function)을 가진다고 합니다.

 

즉, 함수가 다른 함수들에 인자로 전달되고, 다른 함수에 의해 반환되며, 변수에 값으로서 할당될 수 있음을 말하며 

따라서 자바스크립트는 함수를 일급 객체(First-Class Object)로 취급합니다.

 

고차함수

: 다른 함수를 인자로 받거나 반환값으로 사용하는 함수

 

클로저(Closure)

함수와 함수가 선언된 어휘적(Lexical) 환경의 조합.

 

*어휘적(렉시컬)환경이란 ‘실행컨텍스트와 렉시컬환경 포스트’에서 알아보았듯이,

해당 함수의 식별자와 그 정보를 저장하는 환경레코드와 그 외부 스코프에 대한 참조를 말하는데요,

이러한 함수 선언 당시의 렉시컬환경을 독립 복사본인 레코드 형태로 메모리에 저장함으로써

외부함수의 실행컨텍스트가 종료되었음에도 외부함수가 반환하는 내부 함수의 실행시 외부 함수에 대한 참조가 여전히 가능하게 됩니다.

이때, 이 내부 함수와 이 내부 함수가 선언된 렉시컬환경을 클로저라고 부릅니다.

 

간단히 말해서, 선언 당시의 외부 스코프를 기억하는 함수라고 이해할 수 있겠습니다. 

 

클로저 예시 1

var 클로저;

(function 외부함수() {
  var 외부변수 = "저장된 데이터";

  클로저 = function() {
    console.log(외부변수);
  };
})();

// 즉시실행 함수로 클로저 변수에 할당한 함수를 호출 
클로저(); // 즉시실행 함수가 종료되었음에도 '외부 함수' 스코프에 접근이 가능하다.

=> 이는 함수가 선언될 때, 클로저를 생성하기 때문.

 

클로저 예시 2

function outerFunction() {
    let outerVariable = 'I am from outer function!';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

let myFunction = outerFunction();
myFunction(); // 'I am from outer function!'

좀 더 일반적인 예시로, 내부함수를 반환하는 외부함수의 경우로 이해할 수 있다.

 

Deep dive +

React의 useState 훅을 통해 반환된 setState함수가 state에 접근하고 변경될 수 있는 것도 클로저의 원리를 이용한 것입니다.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(prev => prev+1);
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

 

첫 줄에서 useState가 종료됐음에도 useState(외부함수)가 반환한 setState(내부함수)는

 

setState가 선언된 외부환경을 기억하기 때문에 계속해서 state값을 사용할 수 있는 것임.

 

 

Reference

 

모던 리액트 딥다이브

https://developer.mozilla.org/ko/docs/Glossary/First-class_Function

https://inpa.tistory.com/entry/CS-👨‍💻-일급-객체first-class-object

https://ko.wikipedia.org/wiki/클로저_(컴퓨터_프로그래밍)