What the closure really is in Javascript?

자바스크립트 개념공부를 하면서 클로져라는 것이 있는지 처음 알게되어 공부를 해보았다. 처음 들었을때는 뭔가 추상적인 느낌이 있어서 이해하는데 애를 먹었지만 코드를 보면 이해가 빠르게 된다.

const myName = 'Minwoo';

function printName() {
    console.log(myName);
}

printName();

위의 예시는 하나의 클로져를 사용했다. pinrtName이라는 함수는 그 함수가 선언될 당시에 접근 가능했던 모든 스코프내의 변수에 접근 가능하다. 따라서 printName은 myName변수에에 접근 가능하다. 단순히 선언되었을 당시의 값 만을 저장하는게 아니라, 그 변수가 함수 선언 이후에 변경되어도 그 변수의 상태를 추적 가능하다. 예시로, printName함수를 호출한 후 myName의 값을 바꾸면 그다음 printName함수 호출시에는 변경된 myName의 값을 불러온다.

function outterFunction(outterVar) {
    return function innerFunction(innerVar) {
        console.log(`Outter variable: ${outterVar}`);
        console.log(`Inner Variable: ${innerVar}`);
    }
}

let functino1 = outterFunction('hello');

functino1('world');

위 코드를 보면 function1이 outterFunction을 호출하고 있다. innerFunction외부에 있고 outterFunction내에 있는 outterVar는 outterFunction이 호출된 이후에 접근 불가능 하다고 생각하기 쉽지만, innerFunction은 outterFunction이 호출 될 당시에 클로져를 만들었으므로 outterFunction의 호출이 끝났음에도 outterVar에 접근이 가능하다. 물론, innerFunction을 거치지 않고 outterFunction외부에서 outterVar를 접근하는건 당연히 불가능 하다. 외부 스코프에서는 내부의 변수에 접근이 불가능 하기 때문이다.

앞으로 코드 짜면서 클로져에 대해 생각해 보면 조금 더 깔끔한 코드를 짤수 있을것 같다! axios라는 프로미스 기반 HTTP클라이언트에서 클로져가 많이 사용된다고 하는데 관련 문서 한번 참고해서 클로져사용에 익숙해 져야겠다. 그러기 위해선 프로미스, HTTP클라이언트에 대해서도 알아봐야겠다!