[25] Closure

1. closure란?

폐쇄적인(Closure) 공간의 데이터를 사용할 수 있게해주는 자바스크립트 문법

2. closure사용법

if(1<2) {
    let a = function(){
        let abc = 123;
    }
    a();
    console.log(abc)
}

=== abc is not defined

console.log(abc)가 사용되면 console.log(abc)가 속한 if(1<2){}함수에서 abc를 찾게 됨

하지만 이때 탐색대상에서 let a = function(){}은 제외가 됨

이유는 찾고자 하는 괄호 안에 또 괄호가 있으면 제외가 되고 없다라고 생각을 함

즉 함수가 실행되고 난 다음 시점에는 그 안에서 사용된 변수는 사용할 수가 없음

자바스크립트 내부에서는 메모리에 let abc = 123이 입력된 시점에서 할당이 되었으나 접근할 방법이 없어지면 굳이 메모리를 할당해서 데이터 낭비를 할 필요가 없기 때문에 메모리에서 제외시킨다(쓸모없는 자료가 됨)

그런데 이 변수를 함수 밖에서 사용할 수 있다면 매우 좋을 거 같음

if(1 < 2) {
    let a = function(){
        let abc = 123
        let ddd = function(){
            return 55
        }
        return ddd
    }
    let ccc = a()
    console.log(ccc())
}

=== 55가 나옴

if(1 < 2) {
    let a = function(){
        let abc = 123
        let ddd = function(){
            return abc
        }
        return ddd
    }
    let ccc = a()
    console.log(ccc())
}

=== 123이 나옴

Why?

let ccc = a()가 실행이 되면

let a = function(){}가 실행이 됨

let a = function(){}의 안에 let ddd = function(){}이 실행이 되며 그 안에 return abc가 실행이 되는데 abc를 찾으려고 보니 let ddd = function(){}의 범위 내에서 찾을 수가 없음

그러니까 ScopeChain에 의해서 상위 함수로 넘어가고 let abc = 123을 찾고 그 값을 반환하여 let a = function(){}의 내부의 return ddd가 실행이 됨

ccc()를 실행하게 되면 결국 let a = function(){}의 내부인 let ddd = function(){}가 실행이 됨

그렇기 때문에 let a = function(){}의 폐쇄적인(Closure) 공간의 데이터를 사용할 수 있게 되면서 자바스크립트 내부에서 데이터가 지워지지 않고 살아 있을 수 있다.