써먹는 웹개발
[Js] 클로저(Closer)의 정의 및 예제 본문
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
반응형
'웹개발 > Js & Jquery' 카테고리의 다른 글
[JS] 서버시간 받아오는 소스 (0) | 2020.03.31 |
---|---|
[Js] 클로저 활용 문제 (0) | 2020.02.04 |
[Js] 1~2자리 앞에 숫자 0 채워서 3자리 문자열 만들기 (0) | 2019.10.14 |
[Js] window 함수 중에 open과 close (0) | 2019.09.19 |
[JQuery] 웹스퀘어에서 textbox의 문자열 너비가 밖에 있는 그룹의 너비를 초과하여 문자열이 다 안보일때 툴팁으로 보는 방법 (0) | 2019.07.12 |
Comments