본문 바로가기
✨ Front-end/자바스크립트(JS)

[JavaScript] 클로저(closure)

by 환풍 2023. 8. 21.
728x90
반응형

클로저란?

자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다

자바스크립트의 중요한 개념 중 하나로, 함수와 그 함수가 선언된 렉시컬 스코프(lexical scope) 사이의 관계를 나타낸다.

 

outerFunction 함수를 보면, alert창이 함수 안에 또 함수를 실행시켰을때 출력되는 코드를 확인할 수 있다.

 

Click1 버튼을 누르면, 아무런 변화가 없다.

Click2를 눌렀을 때야 말로, 'test innerFunction'이 알림창으로 뜨는것을 확인할 수 있는데,

 

outerFunction으로 함수 내에 한번 접근한 후, 그곳에서 innerFunc라는 변수에 outerFunction을 이미 한번 접근한 상태에서 다시 한번 함수 내의 코드를 접근하기 때문이다.

 

Click3에서 가독성이 더 좋게 바꾸어보았다. load 함수 안에 ( )( ) 을 통해 접근해보았다.

 

 

Click2와 Click3을 눌렀을때, inner 함수가 실행되는 것을 확인할 수 있다.


중첩함수 방법

 

전역에 선언한 변수를 박스 안에서 함수로 정의하고 전역에서 호출하는 방법

 

 

클로저의 장점

  - 데이터를 보존할 수 있다.

클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다

 

  - 정보의 접근 제한(캡슐화)

객체에 담아 여러 개의 함수를 리턴하도록 만든다.
이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

 

  - 모듈화에 유리

각자 독립적으로 값을 사용하고 보존가능
728x90
반응형

댓글