closure

 

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

 

Lexical scoping : 프로그램 내에서 선언된 변수의 위치에 의하여 그 변수가 사용될 범위가 결정되는것.

function init() {
  var name = 'Mozilla'; 
  function displayName() {
    alert(name); 
    //3. 함수 displayNanme이 선언될 당시 name과 clousre가 되어있었으므로
    //alert('Mozilla'); 실행
  }
  displayName(); //2. 함수실행 
}
init(); //1. 함수실행

clousre

function makeFunc() {
  var name = 'Mozilla';
  function displayName() { 
    alert(name); //3. name은 함수선언당시 closure가 되었던 Mozilla
  }
  return displayName; //4.함수를 종료하고 함수호출자인 makeFunc()에게 displayName을 넘겨주고
  //Mozilla가 alerte됨.
}

var myFunc = makeFunc();//2.makeFunc()함수가 myFunc에 할당되었으므로 makeFunc()함수 실행요청
myFunc(); //1.함수실행요청

function makeAdder(x) {
  return function(y) { //3. 함수 makeAdders는 익명함수의 값을 return하여 반환함. 
  //5.return한 값을 다시 makceAdder()에게 주고 함수 종료.
    return x + y; //4.x에 5를 대입해주고 return함.
  };
}

//실제 함수는 하나이지만 함수 두개가 생김.
var add5 = makeAdder(5);//2. 변수 add5에 담겨있는 함수 실행 요청
//5.return해온 값 5+y를 add5에 할당함. 애초에 요청한 함수는 add5(2)이므로 다시 3번으로 돌아가 
//y의 값에 2를 대입한 다음 그 값을 add5(2)에게 return함.
var add10 = makeAdder(10);

console.log(add5(2));  // 1.함수실행요청 6.함수가 종료되고 7을 반환받음.
console.log(add10(2)); //12

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures