클로저

Chan·2023년 1월 12일

JavaScript 클로저

javascript

목록 보기

4/6

클로저란

클로저는 자바스크립트의 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어이다.

클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효 범위를 정하는 지를 정확히 알아야 한다.

function init() {
      var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
      function displayName() { // displayName() 은 내부 함수이며, 클로저다.
        alert(name); // 부모 함수에서 선언된 변수를 사용한다.
      }
      displayName();
  }
init();

init() 을 호출한다.
init()은 지역 변수 name과 displayName()을 생성한다. : 이때 displayName() 내부엔 자신만의 지역변수가 없다.
함수 내부에서는 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에 선언된 변수name에 접근할 수 있다.

첫 번째 예제

그렇다면 클로저에서의 함수를 보자 .

function makeFunc() {
      var name = "Mozilla";
      function displayName() {
        alert(name);
      }
      return displayName;
    }

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

위에 코드는 직전 코드와 동일하게 작동한다.

제일 흥미로운 지점은 makeFun()을 호출을 하면 displayName()이 호출이 되는 것이 아닌

displayName() 함수가 실행되기 전에 makeFunc()로부터 리턴되어 myFunc 변수에 저장된다는 점이다.

일반적인 생각으로는 makeFunc() 함수 호출이 되고 실행이 끝나면 name 이라는 변수에 접근하지 못한다는 생각이 일반적이다.

하지만 해당 코드는 다음과 같이 작동한다.

myFunc()에는 makeFunc()이 실행 될 때 생성한 displayName() 함수의 인스턴스에 대한 객체가 저장되어 있다.
myFunc()을 호출을 하면 변수 name은 사용할 수 있는 상태로 남게 되고 Mozilla가 alert에 전달된다.

두 번째 예제

function makeAdder(x) {
      var y = 1;
      return function(z) {
        y = 100;
        return x + y + z;
      };
    }

var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨

console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산

두 번째 예제는 첫 번째 예제와 다르게 x를 받아서 새 함수를 반환하는 makeAdder 함수를 정의했다.

add5와 add10은 둘 다 클로저이다.

add5의 클로저 내부에는 x는 5 이지만 add10의 클로저 내부에는 x는 10이다.

그 후 클로저에 실행을 하여 저장된 x, y 값에 접근하여 값을 계산한다.

여기서는 클로저가 단순한 값의 형태가 아닌 외부함수의 변수들에 접근 가능하다는 것을 보여준다.

클로저 함수의 장점

데이터를 보존할 수 있다.

클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
정보의 접근 제한 (캡슐화)

‘클로저 모듈 패턴’을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다.

이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.
모듈화에 유리하다.

클로저 함수를 각각의 변수에 할당하면 각자 독리적으로 값을 사용하고 보존할 수 있다.

클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 모듈화에 유리

정보의 접근 제한의 효과는 다음과 같다 .

a = ( function () {
		var privatefunction = function() {
				alert('hello');
		}	
		return {
			publicfunction : function() {
				privatefunction();
			}
		}
	}