자바스크립트에서 함수의 렉시컬 환경 활용

다른 함수를 결과로 반환하는 함수가 있다고 가정해 봅시다:

javascriptfunction test() {
  return function() {
    
  }
}

부모 함수에 어떤 변수가 있다면, 그 변수들은 반환된 함수의 렉시컬 환경에 포함될 것입니다:

javascriptfunction test() {
  let num = 1; // 부모 함수의 변수
  
  return function() {
    // 렉시컬 환경 = {num: 1}
  }
}

반환된 함수 코드에 변수 num의 값을 출력하는 console.log를 작성해 봅시다:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

이제 부모 함수 test를 호출하고 그 결과를 변수 func에 기록해 봅시다:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();

반환된 함수가 변수 func에 기록됩니다. 함수를 호출해 봅시다 - 그 결과는 변수 num의 내용을 출력할 것입니다:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();
func(); // 1을 출력함

함수 외부에서 변수 num를 출력하려고 하면 접근할 수 없을 것입니다:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

console.log(num); // 변수 num은 여기서 접근 불가

보시다시피, 지역 변수 num가 우리 함수의 렉시컬 환경에 바인딩되었고, 이제 코드 어디에서든 이 함수를 호출하면 변수 num의 값을 얻을 수 있습니다. 호출 지점 자체에서 이 변수에 접근할 수 없더라도 말이죠.

사실 변수 num를 전역으로 만들어 유사한 결과를 얻을 수 있습니다:

javascriptfunction test() {
  return function() {
    console.log(num);
  }
}

let num = 1; // 전역 변수
let func = test();
func(); // 1을 출력함

그러나 여기서는 중요한 차이가 있을 것입니다: 새 버전에서는 변수 num를 함수 외부에서 변경할 수 있습니다(전역 변수이므로). 이전 버전에서는 불가능했습니다.

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());