Javascript - 클로저(closure)

이번 javascript는 클로저라는 어려운 개념이다. 생활코딩과 codestates에서 둘다 배웠지만, 완벽하게 이해는 못 했다. 공부하면서 codestates의 자료가 정리가 잘 되어 있어서 이번 글은 codestaes의 내용을 인용 할 것이다.

(이자료는 수강을 해야 볼 수 있는 자료를 가지고 왔습니다. from codestates)

 

클로저란?

 -내부 함수가 외부 함수에 접근할 수 있는 것을 말한다. 즉, 내부 함수에서 외부함수에 있는 변수에 접근 할 수 있는 기능이다.

 -내부 함수는 외부 함수의 지역변수에 접근 할 수 있는데 외부 함수의 실행이 끝나서 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근 할 수 있다.

  *하기에 있는 코드를 실행하면 결과는 //outer //inner 가출력된다.

  *변수 innerFn에 함수 자체를 값을 할당 했다.

  *이후 innerFn()을 실행하면 ==> outerFn()();와 같다.

from codestates

 

  *예제)

  *커링의 가장 큰 장점은 하기 예제에서는 x의 값을 고정해놓고 재사용할 수 있다.

  *하기 두번째 사진에서 add100이라는 변수에 adder(100); 함수 결과를 할당 했기 때문에 add100 변수를 호출하면 adder(100) r결과가 호출 된다. add100(2)은 adder(100)(2);과 같은 결과 값을 갖는다.

from codestates

 

from codestates

 

 

 

  *클로저 모듈 패턴은 보안 측면에서 좋은 코딩이다. privateCounter를 밖을 노출하지 않고 호출이 가능하기 때문에 privateCounter의 값은 바꾸기 어렵다.

  *counter1 변수에 makeCounter(); 함수의 실행 결과 값을 할당했다.

  *따라서 counter1은 makeCounter()의 return 값을 할당한 것이다.

  *makeCounter()의 return 값은 객체를 반환하고 있고, 이에따라 counter1은 객체를 할당 받았다. 따라서 객체의 키 값을 호출하면 value값이 호출되는 것과 같은 결과를 갖는다. value의 값으로 함수를 할당 했기 때문에 value를 호출 하면 함수가 실행된다.

  *하기 내용은 Javascript가 객체지향프로그램이라는 것을 배우고 다시 한번 보면 이해가 더욱 쉬울 것 같다.(추후에 객체지향 내용을 추가 할 예정)

from codestates

#javascript#codestates#생활코딩#클로저#closure