[JavaScript] 클로저

 

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.

---

1.클로저(closure)

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합

 

 

 

 

 

 

 

 

 

 

1-1.렉시컬 스코프

렉시컬 스코프는 함수를 호출할때가 아닌 선언한곳에 따라 결정된다.

아래 코드가 작동될때
1.infun 함수는 자신 내부에서 x를 검색
2.없기때문에 외부함수 outfun 함수에서 x를 검색
방식으로 작동한다.

function outfun(){
    var x=10;
    var infun = function() {document.write(x)}
    infun()
}
outfun()

 

 

 

1-2.반환?

아래 코드에서는 외부함수인 outfun2가 inner에 infun함수를 반환한후에 콜스택에서 제거된다.
하지만 그 이후에도 변수 x값을 참조하여 지역변수 x를 사용하였다.
이게 바로 클로저다.

function outfun2(){
    var x=10;
    var infun = function() {document.write(x)+"<br>"}
    return infun
}
var inner= outfun2()
inner()

 

 

 

 

1-3.클로저

클로저는 함수가 선언될 때의 환경(스코프)을 기억하여, 그 함수가 다른 스코프에서 실행되더라도 원래의 스코프에 있는 변수들에 접근할 수 있게 해준다.

 

 

 

 

 

2.클로저 사용처

2-1.상태유지

현재 상태를 기억하고 변경된 최신 상태를 유지

 

 

 

 

2-2.전역변수 사용 억제

오류를 피하고 프로그램의 안정성을 높이기 위해 클로저는 적극적으로 사용된다.

function Createcounter(){
    var count = 0;
    return function(){
        count++
        document.write("<br>"+count)
    }
}
var counter=Createcounter()
counter()
counter()
counter()
counter()
counter()

 

 

2-3. 정보은닉

메소드들은 모두 자신이 생성됐을 때의 렉시컬 환경인 생성자 함수 Counter의 스코프에 속한 클로저이며 렉시컬 환경을 공유한다.

function Counter(){
    var counter=0;
    this.increase= function(){return ++counter}
    this.decrease= function(){return --counter}
}
counter1= new Counter();
document.write("<br>"+counter1.increase())
document.write("<br>"+counter1.decrease())
document.write("<br>"+counter1.decrease())
document.write("<br>"+counter1.decrease())

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/js-closure