[Javascript] Closure가 뭐지?

안녕하세요? "태민"입니다.

오늘은 Closure에 대해 포스팅하려고 합니다.

 

서론

갑자기 Clousure에 대해 포스팅은 왜 하는 걸까요?

[Kakao Map API]를 이용해 진행하는 프로젝트가 있었습니다. 그때 [Kakao Map API] 문서를 읽던 중 이해가 가지 않는 항목이 있었습니다. 여러개 마커에 이벤트 등록하기1 바로 이 문서 입니다.

Kaka MAP API [여러개 마커에 이벤트 등록하기]

" 클로저를 만들어서 등록합니다 " 라는 부분입니다. 그래서 closure가 뭔지 무슨 기능을 하는지 공부하려고 합니다.

 

 

클로저란?

 

아래의 내용은 생활코딩 강의를 정리한 내용입니다.

생활코딩 사이트에 동영상과 함께 자세한 내용이 있으니 관심있는 분들은 아래의 링크를 통해 강의를 들어주세요.

https://opentutorials.org/course/743/6544

클로저 - 생활코딩

 

1. 외부함수와 내부함수

function outter(){
  var developer = "teamin"
  function inner(){
    alert(developer)
  }
  inner()
}
outter()

 

 내부함수란? 말그대로 함수안에 있는 함수를 말합니다. 특히 내부함수는 외부함수에 있는 지역변수를 사용할 수 있는데 위의 코드처럼 outter를 실행하게 되면 outter안에 있는 inner()명령어가 실행되어 "taemin"이라는 창이 실행되게 됩니다.

 

2. 클로저 (Closure)

function outter(){
  var developer = "teamin"
  return function (){
    alert(developer)
  }
}
var inner = outter()
inner()

 위의 코드를 실행시키면 어떻게 될까요? 코딩을 조금이라도 아는 사람들은 당연히 "taemin"이라는 alert가 띄워진다고 생각할 수 있습니다. 하지만 곰곰히 생각하면 조금 이상하다고 느낄 수 있는 부분이 있습니다. outter()라는 명령어가 실행되서 완료되는 시점에서 developer라는 지역변수는 사라지고 outter에 있는 내부함수만 return되고 있습니다. 그렇다면 이게 어떻게 실행되고 있는 거죠?

 바로 이것이 클로저입니다. 내부함수가 사라지지 않는 한, 외부함수에서 선언된 지역변수는 사라지지 않습니다! 그러니 "taemin"이라는 alert창이 나올 수 있는 것입니다.

 

3. 응용

function make_moview(title){
  return {
    getTitle : function(){
      return title
    },
    setTitle : function(_title){
      if(typeof _title == "String"){
        title = _title
      }else{
        alert("양식에 맞지 않습니다.")
      }
    }
  }
}

 위의 예시는 closure을 이용한 private 활용방법입니다. [title]이라는 변수에 함부로 접근할 수 없으면 심지어 조건문을 이용해 title의 type까지 정해줄 수 있습니다.

 

 

궁금증 해결

 그렇다면 [KAKAO MAP API]에서 말한 for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 의 의미를 이해보겠습니다.

 

1. 클로저를 사용하지 않은 예시

var array = []
for (let index = 0; index < 5; index++) {
  array[index] = function() {
    return index;
  }
}

for (let index = 0; index < 5 ;index++) {
  console.log(array[index])  
}

위의 코드를 실행하게 된다면

5
5
5
5
5

라는 값이 나오게 됩니다. 

 

 

2. 클로저를 사용한 예시

var array = []
for (let index = 0; index < 5; index++) {
  array[index] = function(id) {
  	return id;
  }(index)
}

for (let index = 0; index < 5 ;index++) {
	console.log(array[index])  
}

위의 코드를 실행하게 된다면

0
1
2
3
4

라는 결과가 나옵니다.

 

 

3. 왜그럴까요?

 1번 결과에서 function에 사용는 index는 for의 지역변수를 가르키게 됩니다. 그렇기 때문에 5까지 증가하는 index값을 function에서 참고하게 됩니다. 반면에 2번에서 리턴되는 함수는 function에 있는 지역변수인 id를 사용하기 때문에 변화하는 index값과 상관이 없어집니다.

 

---

여담

 항상 개발자들이 하라면 하라는 의미가 있는 것 같습니다. 처음 저 문서를 보고 "clousre가 뭐야? 왜 closure로 작성해야 해?" 이러면서 제 맘대로 코딩했습니다. 그랬더니 지도에 있는 마커들에 마지막 function가 모조리 들어가 이상한 코드가 된 이후, 그대로 따라 했더니 코드가 잘 실행되었습니다. 사실 개발할 때는 시간도 없고, 일단 코드가 잘 돌아가는 데에만 급급하여 원리를 파악하는 것에 소홀해 지는 경우가 있습니다. 하지만 원리를 알고 코딩한다면 위와 같은 실수는 두번 다시 하지 않겠죠? 

 

 

안녕하세요? "태민"입니다.

혹시 위의 글을 읽고 틀린 정보나 부족한 정보가 있으시다면 댓글로 알려주세요.