TIL 13 | Closure 기초
1574 단어 JavaScriptTILJavaScript
Closure
Closure의 정의
- 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
- 간단하게 이해하자면 변수 및 함수 선언의 형태로 이해할 수 있다.
Closure 함수의 특징(1)
함수의 호출(invocation)이 두 번 발생
const adder = x => y => x+y;
adder(4)(5); // 9
함수를 리턴하는 함수
리턴값이 함수
const adder = x => y => x+y;
adder(5)(7); // 12
typeof adder(5) // 'function
adder(5) // y => x(x는 5)+y
- adder(5)의 리턴값이 곧 함수의 형태이다. 즉, adder는 함수를 리턴하는 함수이다.
Closure 함수의 기본 형태
// const adder = x => y => x+y
// 위와 동일하게 작동하는 코드
const adder = function(x) {
return function(y) {
return x+y;
}
}
function(y) { <<이 부분의 리턴값이 함수의 형태
return x+y;
}
Closure 함수의 특징(2)
외부 함수와 내부 함수
리턴하는 함수에 의해 스코프가 구분된다. 스코프는 변수의 접근 범위이다.
- Closure의 핵심은 스코프를 사용해 변수의 접근 범위를 닫는 것에 있다. 따라서 함수를 리턴하는 것 만큼 변수가 선언된 위치가 중요하다.
const adder = function(x) { <<외부 함수의 변수 x임 <<이 함수문은 외부 함수임
return function(y) { <<내부 함수의 변수 y임 <<이 함수문은 내부 함수임
return x+y; 이처럼 Closure 함수는 스코프가 분리되어 있음
}
}
- 외부 함수는 y에 접근이 불가능하다. 외부 스코프에서는 내부 스코프로 접근이 불가능하다.
- 내부 함수는 x에 접근이 가능하다. 내부 스코프에서 외부 스코프로 선언된 변수에 접근이 가능하다.
const adder = x => y => x+y;
adder(4)(5); // 9
const adder = x => y => x+y;
adder(5)(7); // 12
typeof adder(5) // 'function
adder(5) // y => x(x는 5)+y
// const adder = x => y => x+y
// 위와 동일하게 작동하는 코드
const adder = function(x) {
return function(y) {
return x+y;
}
}
function(y) { <<이 부분의 리턴값이 함수의 형태
return x+y;
}
const adder = function(x) { <<외부 함수의 변수 x임 <<이 함수문은 외부 함수임
return function(y) { <<내부 함수의 변수 y임 <<이 함수문은 내부 함수임
return x+y; 이처럼 Closure 함수는 스코프가 분리되어 있음
}
}
===> 이를 통해 Closure 함수의 특징(2)는 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다는 점이다.
Author And Source
이 문제에 관하여(TIL 13 | Closure 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@richard/TIL-13-Closure저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)