티스토리 뷰
클로저란?
function outer(){ const name="lemonCandy"; function inner(){ console.log(name); } return inner }; const func = outer();
outer라는 함수 내부에 name이라는 지역변수가 있고, 그 값에 접근할 수 있는 inner라는 함수가 있습니다. 그리고 outer는 그 함수를 반환합니다. outer를 실행하면 func에는 outer의 리턴값이 담기겠죠? 그리고 func()를 실행하면 콘솔창에 lemonCandy라는 글씨가 적혀있는 것을 볼 수 있습니다. 변수에 직접 접근할 수는 없게 클로저(닫다, 좁히다)시키고 여전히 활용하는 겁니다.
클로저로 프라이빗 함수와 변수 만들기
function likeCounter(){ let like = 0; function changeBy(val){ like += val; } return { iLike: function(){ changeBy(1); }, disLike: function(){ changeBy(-1); }, checking: function(){ return like; } } }; const Like = likeCounter();
likeCounter 함수엔 like라는 변수와 changeBy라는 like 값을 바꿀수 있는 함수가 있습니다. 그리고 iLike, disLike, checking이라는 메소드를 가진 객체를 반환합니다. 맨 밑줄에서는 Like라는 상수에 리턴 값이 담기죠.
Like.iLike(); // like === 1 Like.iLike(); // like === 2 Like.iLike(); // like === 3 Like.checking(); // 3 Like.disLike(); //like === 2
메소드들을 통해서 like의 값을 증감시킬 수 있습니다. 중요한건 함수 외부에서는 like나 changeBy 함수에 직접 접근할 수 없고, 반환한 객체의 메소드들을 통해서만 값을 증감시킬 수 있다는 것입니다. 이렇게 클로저를 사용하는 것을 모듈패턴이라고 합니다. 클로저에 대해서 조금 이해가 되셨나요?
즉시실행함수(IIFE)
(function(name){ console.log("hello " + name); console.log("candy world"); })("lemon");
위의 소스코드처럼 익명함수를 정의하고 함수부분을 괄호로 감싼 뒤에 바로 실행시키면 됩니다. 사용했던 예제를 즉시실행함수를 통해 좀더 편하게 바꿔보겠습니다.
const Like = (function(){ let like = 0; function changeBy(val){ like += val; } return { iLike: function(){ changeBy(1); }, disLike: function(){ changeBy(-1); }, checking: function(){ return like; } } })();
좀더 간단하게 코드가 적힌게 보이시나요? 즉시실행되서 Like에 담기고, 아까처럼 사용하시면 됩니다.
클로저와 IIFE는 아주 자주 보이니 꼭 충분한 연습을 하시는 게 좋습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
배열 메소드 map 알아보기 (0) | 2018.03.03 |
---|---|
자바스크립트 배열 검색 (0) | 2018.03.03 |
자바스크립트의 스코프(var, let, const) (0) | 2018.02.24 |
자바스크립트의 화살표 함수(arrow function) (0) | 2018.02.23 |
new 생성자로 객체 만들기 (0) | 2018.02.23 |