Closure

함수와 함수가 사용하는 변수들을 저장한 공간

· 자신을 포함하고 있는 외부함수보다 "내부함수"가 더 오래 유지되는 경우, "외부 함수 밖"에서 내부함수가 호출되더라도 "외부함수의 Local variable" 에 접근 가능한 함수

· 함수의 "일급객체 성질"을 이용하여 자신이 생성될 때의 렉시컬 환경(Lexical Environment)를 기억하는 Function

· 함수가 생성될 때, function 내부에서 사용되는 variables 이 외부에 존재하는 경우 그 variables 는 함수의 스코프에 저장됨

⚪ 왜 클로저를 사용하는가 ?
· 상태를 안전하게 은닉하고 보존시키기 위해 사용
· 수정하기 위한 권한을 특정 함수에게만 부여
👉 다수의 개발자와 함께 일을 할 때 실수를 방지하고 더 탄탄한 코드를 만들기 위한 코드 패턴

<script>

function outerFunc() {
	var x = 10;
    var innerFunc = function () {
    	console.log(x)
    };
    return innerFunc;

<< 함수 outerFunc 를 호출하면, 내부 함수 innerFunc 가 반환,
   그리고 함수 outerFunc 의 실행 컨텍스트는 소멸 >>

var inner = outerFunc();			// 반환되어있던 값을 담음
inner();							// 10

</script>

<script>

let rate = 1.05;

function app() {
	let base = 10;
    
    return function (price) {
    return price * rate + base;
    };
}

console.log(app()(1)); 		// 11.05

rate = 1.1;
console.log(app()(1));		// 11.1

</script>

스코프에 따라서 변수에 영향을 받음
rate 의 변경은 두 클로저 함수 호출에 반영되지만, base 는 증가해도 영향을 미치지 않는다.
base 는 app 호출 시 매번 생성되지만, rate 는 매번 생성되지 않음

클로저 활용 - 상태유지

· 현재 상태를 기억하고 변경된 최신 상태를 유지

클로저 활용 - 전역변수 사용 억제

· 현재 Global variable 을 사용해서 현재 상태를 기억하는게 아니라,
Closure 를 활용하여 Closure 내부에서 사용하는 variable 을 이용해서 이전상태를 기억, event 발생시 마다 이전상태를 참조해 variable value 변경

클로저 활용 - 정보은닉

외부에 감춰야 하는 정보를 노출시키지 않고 function value 반환을 통해 정보를 취득 가능

내부의 variable 을 직접 노출하지 않고, value 만 변경해서 반환하기 때문에 내부 variable 에 대한 정보은닉 가능

<script>

function createCard() {
    let title= "";
    let content= "";
    
    function changeTitle(text) {
      title= text
    };
    
    function changeContent(text) {
      content= text
    };
    
    function print() {
      console.log("TITLE -", title);
      console.log("CONTENT -", content);
    };

    return { changeTitle, changeContent, print};
};

</script>

createCard 함수 본문에 있는 title, content 변수는 외부에서 접근 불가

따라서 changeTitle, changeContent 함수를 통해 수정할 수 있도록 함
값을 읽는 함수는 print

이 모든 함수를 객체로 묶어 createCard 함수에서 return 함
const myCard = createCard() 와 같은 형태로 인스턴스를 만들어 사용 가능