[JavaScript] 렉시컬 환경 (Lexical), 클로저 (Closure)

📝렉시컬 환경 (Lexcial), 클로저 (Closure)

let globalVar = '전역';

/** Lexical 환경 테스트 **/
function fn1() {
    let fn1Var = 'fn1'
    function fn2(){
        let fn2Var = 'fn2'
        console.log(globalVar, fn1Var, fn2Var);
    }
    fn2();
}

/** Lexical 환경이 아니라면? **/
function fn4(){
    let fn4Var = 'fn2'
    console.log(globalVar, fn3Var, fn4Var);
}
function fn3() {
    let fn3Var = 'fn1'
    fn4();
}

fn1();   // 전역 fn1 fn2 [Lexical]
//fn3(); // Error (fn1Var is not defined) [Not Lexical]

자바스크립트의 함수는 어디에서 실행했냐가 아닌 어디에서 정의했냐가 중요하다 자바스크립트는 이러한 방식을 채택하는데 이러한 방식 렉시컬 스코프라고한다

 

이러한 걸 도대체 어디서 쓸 수 있을까?

const myFunc = () => {
    let x = 10; // 접근 불가능 (은닉화)
    // 클로저
    const plusTen = (y) => {
        x = x + y;
        console.log(x);
    }

    return plusTen;
}

const addFunc = myFunc();
addFunc(5);  // 15
addFunc(10); // 25

이러한 방식으로 사용이 가능한데 x라는 변수에는 직접 접근을 못하지만 실제로 사용은 하고 있다 이러한 걸 클로저라고 한다 자세히 이야기하자면 반환된 내부함수가 자신이 선언됐을 때의 환경(렉시컬 스코프)인 스코프를 기억하여 스코프 밖에서 호출되어도 그 환경에 접근할 수 있는 함수이다

 

 

🔗 참고 및 출처

https://velog.io/@chojs28/%EB%A0%89%EC%8B%9C%EC%BB%AC-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%BB%A4%EB%A7%81

https://www.youtube.com/watch?v=bwwaSwf7vkE&t=18s