728x90
반응형
클로저란?
자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다
자바스크립트의 중요한 개념 중 하나로, 함수와 그 함수가 선언된 렉시컬 스코프(lexical scope) 사이의 관계를 나타낸다.
outerFunction 함수를 보면, alert창이 함수 안에 또 함수를 실행시켰을때 출력되는 코드를 확인할 수 있다.
Click1 버튼을 누르면, 아무런 변화가 없다.
Click2를 눌렀을 때야 말로, 'test innerFunction'이 알림창으로 뜨는것을 확인할 수 있는데,
outerFunction으로 함수 내에 한번 접근한 후, 그곳에서 innerFunc라는 변수에 outerFunction을 이미 한번 접근한 상태에서 다시 한번 함수 내의 코드를 접근하기 때문이다.
Click3에서 가독성이 더 좋게 바꾸어보았다. load 함수 안에 ( )( ) 을 통해 접근해보았다.
중첩함수 방법
전역에 선언한 변수를 박스 안에서 함수로 정의하고 전역에서 호출하는 방법
클로저의 장점
- 데이터를 보존할 수 있다.
클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다
- 정보의 접근 제한(캡슐화)
객체에 담아 여러 개의 함수를 리턴하도록 만든다.
이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.
- 모듈화에 유리
각자 독립적으로 값을 사용하고 보존가능
728x90
반응형
'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글
[JavaScript] encodeURI( ) 와 decodeURI( ), eval( ) (0) | 2023.08.31 |
---|---|
[JavaScript] prompt 함수 사용하기 (0) | 2023.08.31 |
[JavaScript] 화면 캡쳐 라이브러리(html2canvas) (1) | 2023.06.07 |
[JavaScript] 자바스크립트 문제해결 시나리오 (0) | 2023.05.04 |
[Javascript - Ajax] 동기(Synchronous)와 비동기(Asynchronous) (0) | 2023.03.27 |
댓글