JavaScript 핵심 개념 (2. Closure)

Achievement Goals

• Closure의 의미와 Closure가 가지는 Scope Chain을 이해할 수 있다.
• Closoure의 유용한 몇 가지 패턴을 이해할 수 있다.
• Parameter 갯수가 유동적인 함수를 만들 수 있다.
• ES6에서 사용하는 Rest Parameter 및 ES5의 방법인 arguments 키워드를 이용할 수 있다.
• Default parameter를 사용할 수 있다.

---

Closure

외부 함수의 변수에 접근할 수 있는 내부 함수를 클로저라고 부른다. 또는 이러한 작동 원리를 일컫는 용어이다.

function outerFunc() {
  let outerVar = 'outer';
  console.log(outerVar);
  
  function innerFunc() {
    let innerVar = 'inner';
    console.log(innerVar);
  }
  return innerFunc; // 아직 실행하지 않은 innerFunc 함수를 반환
}

let globalVar = 'global';
outerFunc(); // innerFunc 함수

클로저 함수인 innerFunc()에서 접근할 수 있는 스코프는 전역 스코프, outerFunc() 스코프, innerFunc() 스코프로 총 3개가 있다.

outerFunc()(); // 'outer' 'inner'
let innerFunc = outerFunc(); // 'outer'
innerFunc(); // 'inner'

클로저를 이용한 유용한 기법

Currying

여러 개의 인자를 받는 함수를 호출할 경우, 일부 인자를 받아 저장해놓고 누락된 인자를 별도로 받았을 때 함수가 실행되도록 하는 기법

function sum(a) {
  return function (b) {
    return a + b;
  }
}

let sum5 = sum(5);
console.log(sum5(5)); // 10
console.log(sum5(10)); // 15

외부 함수의 변수가 저장되어 마치 템플릿 함수처럼 사용할 수 있다.

function html(tag) {
  const startTag = '<' + tag + '>';
  const endTag = '</' + tag + '>';
  return function(content) {
    return startTag + content + endTag;
  }
}
const h1 = html('h1');
console.log(h1('Title')); // <h1>Title</h1>
const div = html('div');
console.log(div('Code')); // <div>Code</div>
console.log(div('States')); // <div>States</div>

h1과 div는 클로저 함수를 받는다. 그래서 누락된 인자를 통해 함수를 실행해서 결과를 반환할 수 있다.

클로저 모듈 패턴

변수를 스코프 안에 가줘 함수 밖으로 노출시키지 않는 기법

function Car() {
  let fuel = 5;
  
  let move = {
    move: function(meter) {
      console.log(`The car is moving ${meter}m.`);
      fuel -= (meter * 0.1);
    },
    refuel: function(amount) {
      console.log(`Fuel supply was completed for ${amount}L.`);
      fuel += amount;
    },
    getFuel: function() {
      console.log(`Current fuel: ${fuel}L`);
    }
  }
  return move;
}

const car = Car();

car.move(5); // The car is moving 5m.
car.getFuel(); // Current fuel: 4.5L
car.refuel(2); // Fuel supply was completed for 2L.
car.getFuel(); // Current fuel: 6.5L
console.log(car.fuel); // undefined

car 변수에는 move라 불리는 클로저의 집합이 담겨 있어서, 클로저를 메서드처럼 이용할 수 있다. 클로저는 외부 함수를 접근할 수 있지만, car 변수는 Car()에 접근할 수 없다.