변수의 유효범위와 클로저

2022.04.20

코드 블록

크드블록{...}안에서 선언한 변수는 블록 안에서만 사용 가능

{
 //지역 변수
  const hello = 'Hello'
  console.log(hello) // Hello
}
console.log(hello) //ReferenceError: hello is not defined

특정 작업을 한데 묶어두는 용도로 활용가능. 블록 안엔 작업 수행에만 필요한 변수가 들어감

{
  const hello = 'Hello'
  console.log(hello) // Hello
}
{
  const hello = 'Hello Hi'
  console.log(hello) // Hello Hi
}
// 블록이 없고 동일한 변수 이름을 가지상태로 선언시 에러발생
  const hello = 'Hello'
  console.log(hello) // 

  const hello = 'Hello Hi'
  console.log(hello) // Identifier 'hello' has already been declared

중첩(nested) 함수

함수 내부에서 선언한 함수

function sum() {
  let count = 1;

  return function () {
    return count++;
  }
}
let result = sum()

console.log( result() ); // 1
console.log( result() ); // 2
console.log( result() ); // 3

▲위의 count가 증가되는 이유 ▼

클로저

클로저는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수
자바스크림트의 함수는 숨김 프로퍼티인 [[Environment]]를 이용해 자신이 어디서 만들어졌는지 기억함
함수 본문에선 [[Environment]]를 사용해 외부 변수에 접근함

렉시컬 환경(Lexical Environmnet)

1. 변수
   자바스크립트에는 실행 중인 함수, 코드 블록,
   스크립트 전체는 렉시컬환경이라불리는 내부 숨김 연관 객체(internal hidden associated object)를 갖는다
   1. 환경 레코드(Environment Record)- 모든 지역 변수를 프로퍼티로 저장하고 있는 객체
   2. 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조- 외부 코드와 연관됨
   3. 변수는 특수 내부객체인 환경 레코드의 프로퍼티일 뿐.즉, '변수를 가져오거나 변경하는 것'은 '환경 레코드를 가져오거나 변경하는 것'과 같음
      스크립트가 시작되면 스크립트 내에서 선언한 변수전체가 렉시컬 환경에 올라옴
      이때의 변수 상태는 특수 내부 상태(specail internal state)인 uninitialized
2. 렉시컬환경은 두 부분으로 구성
   렉시컬환경은 이론상의 객체로 코드를 사용해 직접 렉시컬 환경을 얻거나 조작하는 것은 불가능
3. 함수 선언문(function declaration)
   함수 선언문으로 선언한 함수는 일반 변수와는 달리 바로 초기화된다
   함수 선언문으로 선언한 함수는 렉시컬 환경이 만들어지는 즉시 사용 가능
4. 내부와 외부 렉시컬 환경
   코드에서 변수에 접근할 때, 먼저 내부 렉시컬 환경검색 후 원하는 변수를 찾지 못하면 내부 렉시컬 환경이 참조하는 외부 렉시컬 환경으로 확장된다
   이 과정은 검색 범위가 전역 렉시컬 환경으로 확장될 때까지 반복
   전역 레시컬 환경에 도달할때까지 변수를 찾지 못하면 엄격 모드(strict mode)에선 에러가 발생함
   비 엄격 모드에선 정의되지 않은 변수에 값을 할당하려고 하면 에러가 발생하는 대신 새로운 전역 변수가 만들어지는데, 이는 하위 호완성을 위해 남아있는 기능
5. 함수를 반환하는 함수
   모든 함수는 함수가 생성된 곳의 렉시컬 환경을 기억함
   함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데, 여기에 함수가 만들어진 곳의 렉시컬 환경에 대한 참조가 저장됨
   [[Environment]]는 함수가 생성될 때 딱 한번 값이 세팅되고 영원히 변하지 않음
   변숫값 갱신은 변수가 저장된 렉시컬 환경에서 이루어짐

가비지 컬렉션

함수 호출이 끝나면 함수에 대응하는 렉시컬 환경이 메모리에서 제거된다. 함수와 관련된 변수들도 이때 모두 사라짐
자바스크립트에서 모든 객체는 도달 가능한 상태일 때만 메모리에 유지
함수 호출이 끝났지만 렉시컬 환경에 메모리가 유지되는 이유
호출이 끝난 뒤에도 여전히 도달가능한 중첩 함수가 있을 수 있는데. 이떄는 중첩함수의 [[Environment]] 프로퍼티에 외부 함수 렉시컬 환경에 대한 정보가 저장되 도달 가능한 상태가 됨