22.05.31
🥩 클로저(closure)
클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제입니다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있습니다. 이러한 메커니즘을 클로저라고 합니다.
아래의 예제를 통해서 보면 결과는 'coding everybody'가 출력할 것입니다.<!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> function outter(){ var tittle = 'coding everybody'; return function(){ alert(tittle); } } inner = outter(); inner(); </script> </body> </html>예제의 실행순서를 주의 깊게 샆펴보면 7행에서 함수 outter를 호출하고 있습니다. 그 결과는 inner에 들어가고 값은 이름이 존재하지 않는 함수입니다. 하지만 8행에서 험수 inner()을 호출하여 실행하면 출력값은 'coding everybody'입니다. 외부함수와 지역변수 tittle이 소멸되지 않아 출력이 되었습니다. 이 것이 클로저입니다.
즉, 클로저는 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미합니다.
🍚 내부함수와 외부함수
자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있습니다. 아래의 예제를 보면 결과는 경고창에 'coding everybody'가 출력됩니다.
funotion outter(){ function inner(){ var tittle = 'coding evertbody'; alert (tittle); } inner(); } outter();위에 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있습니다. 여기서 함수 inner를 내부 함수라고 합니다.
내부함수와 외부함수의 지역변수에 접근할 수 있습니다.
아래의 또 다른 예제를 보면 결과는 'coding everybody'가 나옵니다.function outter(){ var tittle = 'coding everybody'; function inner(){ alert(tittle); } innner(); } outter();위의 예제는 내부함수 inner에서 tittle을 호출(4행)했을 때 외부함수인 outter의 지역변수에 접근할 수 있음을 보여줍니다.
🍗 Private Variable
private 속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미합니다. 이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있습니다. 클로저를 이용해서 영화의 제목을 저장하고 있는 객체를 정의하는 예제를 통해 보겠습니다.
function factory_movie(title){ return { get_title : function (){ return title; }, set_title : function(_title){ if(typeof _tittle === 'string'){ tittle = _tittle } else { alert('제목은 문자열이어야 합니다.'); } } } ghost = factory_movie('Ghost in the shell'); matrix = factory_movie('Matrix'); console.log(ghost.get_title()); console.log(matrix.get_title()); ghost.set_title('공각기동대'); console.log(ghost.get_title()); console.log(matrix.get_title());클로저는 객체의 메소드에서도 사용가능합니다. 위의 예제에서는 함수의 리턴값을 객체로 반환하고 있습니다. 해당 객체는 메소드
get_tittle과set_tittle이 있는데 이 메소드들은 외부함수인factory_movie의 인자값으로 전달된 지역변수 tittle을 사용중입니다.
또한 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유합니다. 17행의 set_tittle은 외부함수 factory_movie의 지역변수인 tittle의 값을 '공각기동대'로 변경했습니다. 19행에서 ghost.get_title();의 값이 '공각기동대'인 것은 set_tittle와 get_tittle 함수가 title의 값을 공유하고 있다는 의미입니다.
똑같은 외부함수 factory_movie를 공유하고 있는 ghost와 matrix의 get_title의 결과가 서로 다릅니다.그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문입니다
