[Javascript] Closure(클로저)

기초적인 공부를 하면서 Closure클로저는 매우 많이 나오지만 정확히 왜 써야 하는지 항상 의문이었다.

그런김에 클로저에 대해 정리하고 왜 쓰는지 공부를 해보았다.

 

클로저는 야구에서는 마무리 투ㅅ....

사실 클로저는 닫는다는 의미가 있다. 그렇다면 자바스크립트에서는 무엇을 닫아버리는 것일까?

 

결론부터 보면 클로저는 외부에서부터 데이터를 보호할 수 있다. 자바의 private 키워드와 비슷한 역할을 할 수 있다고 보면된다.

즉, 은닉을 할 수 있다는 건데.. 그렇다면 클로저는 어떻게 생겼길래 그러는 것인지 확인을 해보아야겠다.

 

function outer(name) {
  let firstName = name;
  return function() {
    console.log(firstName);
  }
}

const value = outer('test');

value(); // test

const value = outer('test'); 라는 라인에서 먼저 outer라는 함수가 호출되고 다른 익명함수를 리턴하고 함수가 종료가 된다.

하지만 value()로 호출하게 되면 test라는 로그값이 출력된다. 

 

이러한 형태가 클로저인데, 클로저는 단순히 이야기하면 외부 함수가 호출되고 생의 주기가 끝났지만 내부함수의 호출에 의해 외부함수에서 정의되어 있는 변수들이 참조되는 것을 의미한다. (왜 더 어려운거같지..)

 

다시 말하자면 outer함수는 사실 const value = outer('test'); 구뭉네서 익명 함수를 리턴하고 종료되어서 사라졌다.

하지만 value()라는 내부함수 호출에 의해서 내부함수가 포함되어 있었던 outer함수의 변수를 참조하여 데이터를 가지고 오게된 것이다.

 

이러한 이점을 들어서 클로저는 은닉을 수행할 수 있다. outer라는 함수는 이미 생의 주기가 종료되어서 outer함수 안의 firstName이라는 변수에는 직접적으로 접근을 할 수가 없다. 접근을 하려면 outer함수가 리턴된 다른 익명함수에 의해서만 가능하다.

 

그렇다면 이걸 기반으로 자바의 class처럼 getter/setter를 할 수 있지 않을까! 생각이 든다.

 

function outer(name) {
    const firstName = name;
    let lastName = '';
    let job = '';
    return {
       getFirstName : function() {console.log(firstName);},
       setLastName : function(value) {lastName = value;},
       getLastName : function() {console.log(lastName);},
       setJob : function(value) {job = value;},
       getJob : function() {console.log(job);}
    }
}

const person = outer('alice');
person.getFirstName(); // alice
person.setLastName('yoo');
person.getLastName(); // yoo
person.setJob('developer');
person.getJob(); // developer

리턴되는 객체에 key와 익명함수를 설정해놓으면 위와 같이 fristName, lastName, job 변수 자체의 접근은 막아지고,

getFirstName, getLastName, getJob 이라는 함수에 의해서만 변수에 접근이 가능하고

setLastName, setJob이라는 함수에 의해서 변수에 값이 할당가능하다.

 

이런식으로 클로저를 활용하면 변수의 접근을 막을 수 있는 좋은 프로그래밍을 할 수 있지 않을까!