Chapter 3. 클로저

학습 목표

• 클로저 함수의 정의와 특징에 대해서 이해할 수 있다.
• 클로저가 갖는 스코프 범위를 이해할 수 있다.
• 클로저를 이용해 유용하게 쓰이는 몇 가지 패턴을 이해할 수 있다.

3-1. 클로저 기초

• 클로저

  • 함수와 그 함수가 접근할 수 있는 변수의 조합

  • 클로저 예시

  const globalVar = '전역 변수';
  
  function outerFn() {
  const outerFnVar = 'outer 함수 내의 변수';
  const innerFn = function() { 
    return 'innerFn은 ' + outerFnVar + '와 ' + globalVar + '에 접근할 수 있습니다.';
  }
  		return innerFn;
  }

  1. 함수 outerFn에서는 변수 globalVar에 접근할 수 있음
  2. 함수 innerFn에서는 변수 globalVar와 함수 outerFn 내부의 outerFnVar에 접근할 수 있음
     
     
  • 위 코드에서의 클로저
    • 함수 outerFn과 outerFn에서 접근할 수 있는 globalVar
    • 함수 innerFn과 innerFn에서 접근할 수 있는 globalVar, outerFnVar

• 클로저가 중요한 이유!!!!!!

  • 클로저의 함수는 어디에서 호출되느냐와 무관하게, 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해지기 때문

3-2. 클로저 활용

• 클로저의 특징

  • 데이터를 보존하는 함수

    • 클로저의 함수 내에 데이터를 보존해두고 사용할 수 있음
    • 클로저를 응용하면, 함수 내부에 선언한 변수에 접근할 수 있고, 매개변수에도 접근 가능
    • 기존 함수 내부에서 새로운 함수를 리턴하면 클로저로서 활용할 수 있음(리턴한 새로운 함수의 클로저에 데이터 보존)

  • 커링

    • 커링은 여러 전달인자를 가진 함수를, 함수를 연속적으로 리턴하는 함수로 변경하는 행위

    function sum(a, b) {
    return a + b;
    }
    
    function currySum(a) {
    			  return function(b) {
    				  return a + b;
    			  };
    }
    
    console.log(sum(10, 20) === currySum(10)(20))   // true

    • sum 함수는 두 전달인자(10, 20)를 덧셈하는 함수고, currySum은 첫 번째 전달인자 10을 리턴하는 함수로 전달
    • sum과 currySum이 같은 값을 리턴하기 위해서는 currySum 함수에서 리턴한 함수에 두 번째 전달인자 20을 전달하여 호출
    • 커링을 활용한 currySum과 같은 함수를 커링 함수라고 부르기도 함
    • 일반 함수와 차이가 느껴지지 않지만, 커링은 전체 프로세스의 일정 부분까지만 실행하는 경우 유용
    • 함수의 일부만 호출하거나, 일부 프로세스가 완료된 상태를 저장하기에 용이!!!!!!

  • 모듈 패턴

    • 모듈은 하나의 기능을 온전히 수행하기 위한 모든 코드를 가지고 있는 코드 모음
    • 하나의 단위로서 역할함
    • 다른 모듈에 의존적이지 않고 독립적
    • 외부 코드 실행을 통해서 모듈 속성 훼손 받지 않아야 함
    • 특정 데이터를 다른 코드의 실행으로부터 보호할 때 용이