한 마디로 클로저란, 함수가 선언될(생성될) 그 당시에 주변의 환경과 함께 갇히는 것을 말한다.
함수가 속한 렉시컬 스코프(Lexical Environment)를 기억하여, 함수가 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있게 해주는 기능이다.
렉시컬 스코프란 함수가 선언이 되는 위치에 따라서 상위 스코프가 결정되는 스코프다.
내부함수는 외부함수의 지역변수에 접근할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 것
|
/***
* 자바스크립트에는 클로저라는 기능이 있다.
* 클로저는 함수와 그 함수를 둘러싸고 있는 주변의 상태를 기억하는 기능이다.
* 클로저는 자바스크립트 고유의 개념이 아니라
* 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.
* 클로저가 가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것이다.
*/
function makeAdd2(v1) {
// 함수 makeAdd 내에서 내부함수가 선언되고 호출되었다.
return function (v2) {
// 이때 내부함수는 자신을 포함하고 있는 외부함수 makeAdd 변수 v1 접근할 수 있다.
return v1 + v2;
};
}
function makeAdd(v1){
// 함수 makeAdd 내에서 내부함수 innerFunc가 선언되고 호출되었다.
let innerFunc = function (v2){
// 이때 내부함수 innerFunc는 자신을 포함하고 있는 외부함수 makeAdd 변수 v1 접근할 수 있다.
return v1 + v2;
}
return innerFunc;
}
const add3 = makeAdd(3);
console.log(add3); // [Function innerFunc]
console.log(add3(10));
const add7 = makeAdd(7);
console.log(add7(10));
|
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>closure</title>
<script defer src="./main.js"></script>
</head>
<body>
<p>클로저를 사용한 Counting</p>
<button id="inclease">+</button>
<p id="count">0</p>
<script>
const incleaseBtn = document.getElementById('inclease');
const count = document.getElementById('count');
const increase = (function () {
// 카운트 상태를 유지하기 위한 변수
let counter = 0;
// 클로저를 반환
return function () {
return ++counter;
};
}());
incleaseBtn.onclick = function () {
count.innerHTML = increase();
};
</script>
</body>
</html>
|
728x90
'React > morden javascript' 카테고리의 다른 글
| Javascript Object keys() (0) | 2023.10.17 |
|---|---|
| JavaScript Object.assign() (1) | 2023.10.17 |
| 자바스크립트 일급객체(first class citizen) (0) | 2022.12.28 |
| [ES2020] optional chaining (0) | 2022.12.28 |
| [ES6] 비구조화 할당(destructuring assignment) (0) | 2022.12.28 |
Link2Me