클로져Javascript/Javascript 지식2022. 9. 14. 09:47
Table of Contents
렉시컬 스코프
- 자바스크립트 엔진은 함수를 어디서 호출했는 지가 아니라 함수를 어디에 정의 했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다.
- 클로져에 대해 알려면 렉시컬 스코프에 대해 꼭 알아야 한다!
- 아래 코드를 보면 foo()를 실행하면 bar()가 실행되어서 10이 나올 것 같지만 실제 bar가 선언되었을 당시의 x인 1을 가리키게 되어 1을 출력합니다!
- 이런 예시처럼 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디서 선언하였는지 결정됩니다!!
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1
클로져
- 자바스크립트 고유 개념은 아님
- 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈, 리스프, 얼랭, 스칼라 등)에서 사용되는 중요한 특성
- “클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다”
- 클로져는 자바스크립트 뿐만 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성!
- 즉, 클로저는 함수가 자신이 선언되었을 때의 환경인 스코프를 기억해서 자신이 선언되었을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 뜻합니다.(함수가 실행되는 위치가 어디인지는 관계가 없습니다!)
- 아래는 클로져 함수의 예시입니다!!
function say() {
var a = 2;
var b = 3;
function log() {
console.log(a + b);
}
return log;
}
var a = say();
a();
- say라는 함수 생성
- a라는 변수 선언
- say라는 함수의 실행값을 a에 담고있다.
- say라는 함수의 실행값을 담으려면 say가 실행되어야 하기 때문에 say라는 함수가 실행이 된다.
- say라는 함수가 실행되게 되면 전체 global scope안에서 say라는 scope가 생기게 된다.
- say라는 scope에는 a = 2, b = 3이런 정보들이 저장이 됨
- log라는 함수가 있다라는 것까지 인식을 하게 됨 ( 변수를 선언하는 것과 사실상 동일)
- log라는 것을 return을 한다.
- global의 a에 log라는 함수를 할당을 하게 된다.
- global scope에서 a라는 함수를 실행한다.
- 실행을 하게 되면 log라는 함수 내부 코드가 실행이 된다.
- log라는 함수도 scope 정보가 생성이 된다.
- log라는 함수 스코프 내부에는 별다른 변수선언이 없기 때문에 콘솔을 바로 실행
- a + b 에서 a와 b가 뭔지 찾는다.
- say라는 함수의 스코프와 log라는 함수의 스코프는 서로 접근할 수 있는 관계가 아니지만 선언할 당시, log라는 함수는 say라는 함수 내부에서 생성이 되었기 때문에 say라는 함수의 내부 환경을 기억하게 되어 a를 기억해낸다. b또한 마찬가지로 본인이 생성된 환경의 주변의 정보인 b의값을 기억해낸다.
클로저를 유용하게 사용하는 예시
- private한 멤버 변수가 있다고 생각해보자.
- 해당 멤버 변수를 선언한 클래스나 객체 밖에서는 이 멤버 변수에 접근할 수 없지만 setter나 getter를 클로져로 만들고 밖에서 사용하면 선언했던 스코프의 private한 변수를 기억해서 읽거나 수정할 수 있다..!
클로저 함수의 장점
데이터를 보존할 수 있다.
- 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
- 클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.
정보의 접근 제한 (캡슐화)
- private한 멤버 변수가 있다고 생각해보자.
- 해당 멤버 변수를 선언한 클래스나 객체 밖에서는 이 멤버 변수에 접근할 수 없지만 setter나 getter를 클로져로 만들고 밖에서 사용하면 선언했던 스코프의 private한 변수를 기억해서 읽거나 수정할 수 있다..!
모듈화에 유리하다.
- 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다.
- 이와 같이 함수의 재사용성을 극대화 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고한다.
- 클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다.
'Javascript > Javascript 지식' 카테고리의 다른 글
lodash curry, flow (0) | 2024.01.03 |
---|---|
falsy value, == vs === 연산자 (2) | 2022.10.31 |
이벤트 버블링/캡쳐/위임 (1) | 2022.09.16 |
자바스크립트 작동 방식 (0) | 2022.06.13 |
자바스크립트와 동시성 (0) | 2022.06.06 |
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!