써먹는 웹개발

[Js] 클로저(Closer)의 정의 및 예제 본문

웹개발/Js & Jquery

[Js] 클로저(Closer)의 정의 및 예제

kmhan 2020. 2. 3. 09:16


728x90
반응형

클로저(Closer) : [명사] 클로저는 참조하는 환경을 갖고 있는 함수

 

즉, scope의 확장으로 인해 지역변수를 제어하기 위해 만든 방법이다.


함수를 변수에 담을때는 파라미터 값까지 적용되며, 변수를 함수화하여 호출하면 리턴값을 실행한다.

 

예제

function makePassword(password){
    console.log("password 파라미터 값은 secret? "+password);
    return function guess(passwordGuess){
        console.log("변수형 함수만 호출됨");
        return (passwordGuess === password);
    };
}
var tryGuess = makePassword("secret");
console.log("'nope'이 맞을까요? " + tryGuess("nope"));
console.log("'secreat'이 맞을까요? " + tryGuess("secret"));

 

결과

 

 

활용 : 지역변수를 이용해 카운터 구현
※ 지역변수를 사용하는 이유는 전역 변수를 사용할때 다른 개발자와 공동으로 코드를 개발하는 경우에 문제가 될 수 있기 때문이다.

function makePassword(password){
    console.log("password 파라미터 값은 secret? "+password);
    var i=0;
    return function guess(passwordGuess){
        i++;
        console.log(i+". 변수형 함수만 호출됨");
        return (passwordGuess === password);
    };
}
var tryGuess = makePassword("secret");
console.log("'nope'이 맞을까요? " + tryGuess("nope"));
console.log("'secreat'이 맞을까요? " + tryGuess("secret"));


결과

 

퀴즈) 다음 getValueFun() 함수 호출시 리턴받는 결과값은?

var secret = "007";

 

function getSecret() {

  var secret = "008";

 

  function getValue() {

    return secret;

  }

  return getValue;

}

var getValueFun = getSecret();

getValueFun();

※ 정답은 크롬 디버깅 모드(F12)의 Console창에서 확인 가능합니다.

 

 

출처 : [책] 헤드퍼스트 자바스크립트 

728x90
반응형


Comments