함수형 자바스크립트 기초(3)

클로저

자바스크립트 클로저는 꽤나 유명해서 많은 사람들이 알고 있지만 다시 한번 정리.

스코드

변수를 어디에서 어떻게 찾을지 정한 규칙으로, 여기서는 함수 단위의 변수참조를 나타낸다.

클로저

자신이 생성될 때의 환경을 기억하는 함수.

위 말을 조금더 실용적으로 풀어보면 '클로저는 자신의 상위 스코프의 변수를 참조할 수 있다' 라고 할 수 있다. 맞는 말이지만 오해의 소지가 있는 표현으로 조금 더 다듬으면

클로저

자신이 생성될 때의 스코프에서 알 수 있었던 변수를 기억하는 함수다.

자바스크립트의 모든 함수는 글로벌 스코프에 선언되거나 함수 안에서 선언된다. 이런 식이면 모든 함수는 곧 클로저인가?

함수가 의미적으로나 실제적으로 진짜 클로저가 되기 위한 가장 중요한 조건

클로저로 만들 함수가 myFn이라면, myFn내부에서 사용하는 변수 중에 myFn내부에서 선언되지 않은 변수가 있어야 한다.

function parent() {
  var a = 5;
  function myFn() {
    console.log(a);
  }
}

//혹은

function parent2() {
  var a = 5;
  function parent1() {
    function myFn() {
      console.log(a);
    }
  }
}

클로저는 자신이 생성될 때의 스코프에서 알 수 있었던 변수 중 언젠가 자신이 실행될 때 사용할 변수들만 기억하며 유지시키는 함수

클로저가 없는 함수 코드

var a = 10;
var b = 20;
function f1() {
  return a + b;
}
f1();
//30

function f2() {
  var a = 10;
  var b = 20;
  function f3(c, d) {
    return c + d;
  }
  return f3;
}

var f4 = f2();
f4(5, 7);
//12

• f3은 f2안에서 생성되었고 f3위에는 a, b라는 지역변수가 존재.
• f3에서는 c, d만 사용하고 두 변수는 모두 f3에서 선언되었다.
• c, d는 실행 수 사라지는 변수고 결국 기억해 두는 환경변수가 없다.
• f3은 클로져가 아니다.

클로저가 있었던 코드

function f4() {
  var a = 10;
  var b = 20;
  function f5() {
    return a + b;
  }
  return f5();
}
f4();
// 30

f4의 마지막에 f5()를 실행 수 리턴하는 것에 주목해야 된다. 리턴하며 f5는 사라지고 f5가 사라지면 a, b도 결국 사라진다. 결국 클로저는 f4가 실행되는 사이에만 생겼다가 사라진다.

때가 조금 긴 스코프

function f9() {
  var a = 10;
  var f10 = function (c) {
    return a + b + c;
  };

  var b = 20;
  return f10;
}
var f11 = f9();
f11(30);
//60;

클로저는 자신이 생성되는 스코프의 모든 라인, 어느 곳에서 선언된 변수든지 참조할 수 있고 기억할 수 있다.( 호이스팅 let을 사용하면 예외)