렉시컬스코프와 클로저

▒ 클로저란. 

자바스크립트의 함수가 자신이 선언된 환경에서의 변수들을 기억하고, 그 환겨에 접근할 수 있는 기능을 말한다. 

쉽게 말해, 내부 함수가 외부 함수의 변수에 접근할 수 있는 것.

 

▒ 클로저를 사용 하는 이유.

▷ 데이터 캡슐한 → 외부에서 의도치 않게 변경할 수 없도록 보호 

▷ 상태 유지 → 함수 호출간에 상태를 유지 할 수 있다. 

 

let l0 = 'l0';
function fn2(){
    let l2 = 'l2';
    console.log(l0, l1, l2);
}
function fn1(){
    let l1 = 'l1';
    console.log(l0, l1);
    fn2(); // 어디에서 호출했냐에 따라 접근할 수 있는 유효 범위가 달라진다면 동적 스코프 
    // 자바스크립트는 정적 스코프 채택 
}
fn1();

 

위 코드에서 fn1()을 호출하면 fn2()에서 l1의 값이 있을 법한데 에러가 난다. 동적 스코프라면 될 수 있겠지만, 

자바스크립트는 함수가 어디서 정의되었는지에 따라 달라지는 정적 스코프를 채택하고 있기 때문이다. 

let l0 = 'l0';

function fn1(){
    let l1 = 'l1';
    console.log(l0, l1);
    function fn2(){
        let l2 = 'l2';
        console.log(l0, l1, l2);
    }
    fn2();
}
fn1();

위 코드로 수정하면 l1이 정상적으로 보인다. 이처럼, 내부함수에서 외부함수의 변수를 참조하고 있는데 이 때 외부함수는 클로저이다. 

클로저는 함수가 선언된 스코프 밖에서 실행될 때도 그 환경에 접근할 수 있는 것을 말한다. 

아래와 같이도 사용 되어질 수 있다. 

 

function 계산(초기값){
    return {
        더하기: function(숫자){
            return 초기값 + 숫자;
        },
        빼기: function(숫자){
            return 초기값 - 숫자;
        }
    };
}

let 계산기 = 계산(1);
console.log(계산기.더하기(1)); // 2
console.log(계산기.빼기(2)); // -1

 

▒ 렉시컬 스코프란.

자바스크립트가 변수를 어디서 찾을지를 결정하는 방식을 의미, 

변수가 어디에서 선언되었는지에 따라 그 변수의 유효 범위가 결정 

 

▒ 렉시컬 스코프의 특징

▷ 정의된 위치 : 함수가 어디서 호출되는지가 아니라, 어디서 정의되었는지가 중요

▷ 스코프 체인 : 함수가 호출되면, 자바스크립트 엔진은 변수를 찾기 위해 해당 함수의 스코프에서 시작해 상위 스코프를 차례로 탐색

 

const globalVar = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    console.log(globalVar); // global
    console.log(outerVar);  // outer
    console.log(innerVar);  // inner
  }

  inner();
}

outer();