[javascript] function closures 간단정리

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요
클로저 너무 어려워 ㅠㅠ

---

지역변수를 참조하는 내부함수를 외부에 전달했기에 클로저라 할 수 있다.

사실 굳이 정확히 따져보면 클로저는 특정 상황에서 발생하는 ‘현상’이고 함수는 이 현상이 나타나기 위한 ‘조건’에 해당한다고 볼 수도 있겠다. 지역변수를 참조하는 내부함수를 외부에 전달했기에 클로저는 맞지만, 외부로 전달이 항상 return을 의미하는 것은 아니라는 정도로 생각하기!

function outerFn() {
	  let x = 10;
	  return function innerFn(y) { // innerFn 함수는 클로저다.
	      return x = x + y;
	  }
}

let a = outerFn(); 
// 외부함수 호출은 한번만. 이제 a 변수는 innerFn 함수를 참조한다.

a(5); // 15;
a(5); // 20;
a(5); // 25;

▲클로저를 만드는 형태 1. 중첩함수

let globalFunc;

{
	  let x = 10;
	  globalFunc = function(y) { // globalFunc 함수는 클로저다.
	    return x = x + y;
	  }
}

globalFunc(5); // 15;
globalFunc(5); // 20;
globalFunc(5); // 25;

▲클로저를 만드는 형태 2. 전역변수를 박스 안에서 함수로 정의

(function () {
    var count = 0;
    var button = document.createElement("button");
    button.innerText ="click";
    button.addEventListener("click", function() {
        console.log(++count, "times clicked")
    })
    document.body.appendChild(button)
})();
// 별도의 외부객체인 DOM의 메서드(addEventListener)에 등록할 handler함수 내부에서 지역변수를 참조!

▲return 없이 클로저를 만드는 형태

---

Reference

1) closures란 무엇일까

[JavaScript] 클로저(Closures)란 무엇일까? - 하나몬