클로저

[생활코딩] https://youtu.be/bNqOHnsJm-w

function outter(){
  var title = 'coding everybody'; 
  function inner(){   
    alert(title);
  }
  inner();
}
outter(); // alert('coding everybody')

• 내부함수에서 외부함수의 지역변수에 접근할 수 있는 것을 클로저라고 함

 function outter(){
   var title = 'coding everybody';  
   return function(){        
       alert(title);
   }
}
var inner = outter();
inner();  // alert('coding everybody')

• inner(); 로 outter를 호출하면 function() 리턴
• 리턴했다는 것은 그 외부함수가 끝났다는건데, 이미 끝난 외부함수에 존재하는 변수 title에 접근하여 불러옴.

function factory_movie(title) {
  return {
    get_title: function () {
      //내부함수
      return title;
    },
    set_title: function (_title) {
      //내부함수
      title = _title;
    }
  };
}
ghost = factory_movie("Ghost in the shell");
matrix = factory_movie("Matrix");

alert(ghost.get_title()); //'Ghost in the shell';
alert(matrix.get_title()); //'Matrix'

ghost.set_title("공각기동대");

alert(ghost.get_title()); //'공각기동대'
alert(matrix.get_title()); //'Matrix'

• factory_movie라는 함수가 객체를 리턴
• 객체에 두개의 메소드 get_title, set_title있음(속성이 함수를 값으로 가지면 메소드)
• title정보에 접근할수 있는건 get_title, set_title이라는 메소드 뿐.
• title의 값을 읽고 수정 할 수 있는 것은 factory_movie 메소드를 통해서 만들어진 객체 뿐이라는 의미다. JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.

 

[코딩앙마 클로저 
https://www.youtube.com/watch?v=tpl2oXQkGZs

 

function makeAdder(x) {
  return function (y) {
    return x + y;
  };
}

const add3 = makeAdder(3);
console.log(add3(2)); //5

[익명함수 lexical ] y: 2  -> [내부 lexical 환경] x:3 -> [전역 lexical 환경] makeAdder{} , add3(초기화 x)

add3(2)  실행되 y=2 갖고 상위 lexical의 x = 3 에 접근가능 ~ 5반환 

 

function makeCounter() {
  let num = 0;
  return funtion () {
  	return num++;
  }
}

let counter = makeCounter();
counter(); //0
counter(); //1
counter(); //2

" 함수가 생성될 당시의 외부변수를 기억하고, 생성된 이후에도 계속 접근 가능한 것~
생성당시의 변수를 기억~ 은닉화 가능 !"