[Javascript] Closure(클로저)에 대해서

[Javascript] Closure(클로저)

자바스크립트 클로저(Closure)

Javascript에는 클로저(Closure)이라는 개념이 있죠.

Javascript는 function(함수)는 값이기 때문에 함수를 return하는것도 가능한데요.

함수를 return 하는것을 클로저라고 이해하시면 편할거 같습니다.

중요한 점은 클로저는 자신이 생성될때의 환경을 기억하기때문에, 외부 변수도 접근이 가능합니다.

말이 어려운데요. 예시를 보며 이해 해보겠습니다.

---

예시

 

 

fruit변수를 x번 실행하는 함수를 만들어 보았습니다.

function repeatFruit(fruit, x){
  return function (){  
    for(let i=0; i< x; i++){
      console.log(fruit);
    }
  }
}

let printApple3 = repeatFruit("사과", 3);  // printApple3은 클로저
printApple3();

 

분명 repeatFruit함수는 실행되자마자 return되어 종료되었지만,

printApple3함수는 repeatFruit 함수의 fruit 변수와, x변수를 참조하였습니다.

 

그렇지만 printApple3()을 실행시켜도 오류가 나지않고 fruit 변수와, x변수를 참조해 사과를 3번 반복하여 실행하게 됩니다.

 

클로저는 생성될때의 환경을 기억 하기 때문에 fruit 변수와 x변수의 값을 참조가 가능하다고 볼 수 있죠.

 

 

---

커링

다음은 커링인데요, 

 

커링은 모든 인자를 받을 때까지 함수를 생성하고, 모든 인자를 받으면 값을 리턴하는 것입니다.

 

function add (x) {
  return function (y) {    // 클로저
    return x + y;
  }
}
add(1)(2);  // 3

 

이를 활용하여

HTML 태그를 쉽게 만들어주는 코드를 만들어 보겠습니다.

 

function htmlMaker (tag) {
  let startTag = '<' + tag + '>'
  let endTag = '</' + tag + '>'
  return function (str) {    // 클로저
    return startTag + str + endTag;
  }
}


let trMaker = htmlMaker('tr');
trMaker("tr입니다.") // "<tr>tr입니다.</tr>"
let tdMaker = htmlMaker('td');
tdMaker("td입니다.") // "<td>td입니다.</td>"


////////////////////////////////////////////
// 응용하여 구구단 테이블

var html = "<table>";

for( var i=1 ; i<= 9 ; i++){
	var row = "";
    for(var j=1 ; j<= 9; j++){
    	row += tdMaker( i*j); // i
	}
	html += trMaker(row);
}

html += "</table>";