surf core js : 변수의 유효범위와 클로저

Dino_·2021년 9월 4일

JavaScript basic 기초 자바스크립트

surf javascript

목록 보기

24/28

es6에서 나온 let과 const에 대해서만 다룬다. var의 경우 다음 포스트에서 다룬다.

🌳 코드 블록

코드 블록 {...} 안에서 선언한 변수(const와 let)는 블록 안에서만 사용할 수 있다.


{
  // 지역 변수를 선언하고 몇 가지 조작을 했지만 그 결과를 밖에서 볼 수 없습니다.

  let message = "안녕하세요."; // 블록 내에서만 변숫값을 얻을 수 있습니다.

  alert(message); // 안녕하세요.
}

alert(message); // ReferenceError: message is not defined

이미 선언된 변수와 동일한 이름을 가진 변수를 별도의 블록 없이 let으로 선언하면 에러가 발생한다.

// 메시지 출력
let message = "안녕하세요.";
alert(message);

// 또 다른 메시지 출력
let message = "안녕히 가세요."; // SyntaxError: Identifier 'message' has already been declared
alert(message);

if, for, while 등에서도 마찬가지로 {...} 안에서 선언한 변수는 오직 블록 안에서만 접근 가능하다.

이런 특징은 변수의 유효 범위를 블록 범위, 특히 if 분기문 범위로 한정시킬 수 있어서 아주 유용하다.

참고로 for문에서 for 옆 괄호 안에서 선언한 변수(예시에서 let i)는 {...} 밖에 있긴 하지만 블록 {...}에 속하는 코드로 취급된다.

🍃 중첩 함수

함수 내부에서 선언한 함수는 ‘중첩(nested)’ 함수라고 부른다.

자바스크립트에선 손쉽게 중첩 함수를 만들 수 있습니다.

중첩 함수는 아래와 같이 코드를 정돈하는데 사용할 수 있다.

function sayHiBye(firstName, lastName) {

  // 헬퍼(helper) 중첩 함수
  function getFullName() {
    return firstName + " " + lastName;
  }

  alert( "Hello, " + getFullName() );
  alert( "Bye, " + getFullName() );

}

중첩 함수는 새로운 객체의 프로퍼티 형태나 중첩 함수 그 자체로 반환될 수 있는데, 이렇게 반환된 중첩 함수는 어디서든 호출해 사용할 수 있다. 물론 이때도 외부 변수에 접근할 수 있다는 사실은 변함없다.

아래 함수 makeCounter는 호출될 때마다 다음 숫자를 반환해주는 ‘카운터’ 함수를 만든 예시이다.

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1
alert( counter() ); // 2

이상하게도 makeCounter를 살펴보다 보면 “counter를 여러 개 만들었을 때, 이 함수들은 서로 독립적일까? 함수와 중첩 함수 내 count 변수엔 어떤 값이 할당될까?” 같은 다양한 의문이 생긴다.

🌳 렉시컬 환경

앞으로 다룰 내용은 좀 어려우니 잘 헤쳐나가보자.

명확한 이해를 돕기 위해 설명을 몇 개의 단계로 나눠서 진행한다.

🍃 단계 1. 변수

자바스크립트에선 실행 중인 함수, 코드 블록 {...}, 스크립트 전체는 렉시컬 환경(Lexical Environment) 이라 불리는 내부 숨김 연관 객체(internal hidden associated object)를 갖는다.

렉시컬 환경 == 내부 숨김 연관 객체

렉시컬 환경 객체는 두 부분으로 구성됩니다.

환경 레코드(Environment Record) : 모든 지역 변수를 프로퍼티로 저장하고 있는 객체이다. this 값과 같은 기타 정보도 여기에 저장된다.
외부 렉시컬 환경(Outer Lexical Environment) 에 대한 참조 : 외부 코드와 연관된다.

’변수’는 특수 내부 객체인 환경 레코드의 프로퍼티일 뿐이다. '변수를 가져오거나 변경’하는 것은 '환경 레코드의 프로퍼티를 가져오거나 변경’함을 의미한다.

아래 두 줄짜리 코드엔 렉시컬 환경이 하나만 존재한다.

이렇게 스크립트 전체와 관련된 렉시컬 환경은 전역 렉시컬 환경(global Lexical Environment)이라고 한다.

위 그림에서 네모 상자는 변수가 저장되는 환경 레코드를 나타내고 붉은 화살표는 외부 렉시컬 환경에 대한 참조를 나타낸다. 전역 렉시컬 환경은 외부 참조를 갖지 않기 때문에 화살표가 null을 가리키는 걸 확인할 수 있다.

코드가 실행되고 실행 흐름이 이어져 나가면서 렉시컬 환경은 변화한다.

좀 더 긴 코드를 살펴보자.

우측의 네모 상자들은 코드가 한 줄, 한 줄 실행될 때마다 전역 렉시컬 환경이 어떻게 변화하는지 보여준다.

스크립트가 시작되면 스크립트 내에서 선언한 변수 전체가 렉시컬 환경에 올라간다(pre-populated).
이때 변수의 상태는 특수 내부 상태(special internal state)인 'uninitialized’가 된다.
자바스크립트 엔진은 uninitialized 상태의 변수를 인지하긴 하지만, let을 만나기 전까진 이 변수를 참조할 수 없다.
let phrase가 나타나며, 아직 값을 할당하기 전이기 때문에 프로퍼티 값은 undefined이 된다. phrase는 이 시점 이후부터 사용할 수 있다.
phrase에 값이 할당되었다.
phrase의 값이 변경되었다.

변수는 특수 내부 객체인 환경 레코드의 프로퍼티이다. 환경 레코드는 현재 실행 중인 함수와 코드 블록, 스크립트와 연관되어 있다. 변수를 변경하면 환경 레코드의 프로퍼티가 변경된다.

렉시컬 환경은 명세서에만 존재한다.

'렉시컬 환경’은 명세서에서 자바스크립트가 어떻게 동작하는지 설명하는 데 쓰이는 ‘이론상의’ 객체이며, 따라서 코드를 사용해 직접 렉시컬 환경을 얻거나 조작하는 것은 불가능하다.

🍃 단계 2. 함수 선언문

함수는 변수와 마찬가지로 값이다.

다만 함수 선언문(function declaration)으로 선언한 함수는 일반 변수와는 달리 바로 초기화된다는 점에서 차이가 있다.

함수 선언문으로 선언한 함수는 렉시컬 환경이 만들어지는 즉시 사용할 수 있다. 변수는 let을 만나 선언이 될 때까지 사용할 수 없지만 말이다.

선언되는 코드를 만나기 전에도 함수를 사용할 수 있는 것은 바로 이 때문이다.

아래 그림은 스크립트에 함수를 추가했을 때 전역 렉시컬 환경 초기 상태가 어떻게 변하는지 보여준다.

이런 동작 방식은 함수 선언문으로 정의한 함수에만 적용된다.

let say = function(name)...같이 함수를 변수에 할당한 함수 표현식(function expression)은 해당하지 않는다.

🍃 단계 3. 내부와 외부 렉시컬 환경

함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어진다.

이 렉시컬 환경엔 함수 호출 시 넘겨받은 매개변수와 함수의 지역 변수가 저장된다.

say("John")을 호출하면 아래와 같은 내부 변화가 일어난다(현재 실행 흐름은 붉은색 화살표로 나타낸 줄에 멈춰있는 상황이다).

함수가 호출 중인 동안엔 호출 중인 함수를 위한 내부 렉시컬 환경과 내부 렉시컬 환경이 가리키는 외부 렉시컬 환경을 갖게 된다.
예시의 내부 렉시컬 환경은 현재 실행 중인 함수인 say에 상응한다.
say("John")을 호출했기 때문에, name의 값은 "John"이 된다.
예시의 외부 렉시컬 환경은 전역 렉시컬 환경이 된다. 전역 렉시컬 환경은 phrase와 함수 say를 프로퍼티로 갖는다. 그리고 내부 렉시컬 환경은 외부 렉시컬 환경에 대한 참조를 갖습니다.
코드에서 변수에 접근할 땐, 먼저 내부 렉시컬 환경을 검색 범위로 잡는다.
내부 렉시컬 환경에서 원하는 변수를 찾지 못하면 검색 범위를 내부 렉시컬 환경이 참조하는 외부 렉시컬 환경으로 확장한다.

이 과정은 검색 범위가 전역 렉시컬 환경으로 확장될 때까지 반복된다.

전역 렉시컬 환경에 도달할 때까지 변수를 찾지 못하면 엄격 모드에선 에러가 발생한다.

참고로 비 엄격 모드에선 정의되지 않은 변수에 값을 할당하려고 하면 에러가 발생하는 대신 새로운 전역 변수가 만들어지는데, 이는 하위 호환성을 위해 남아있는 기능이다.

예시와 그림을 보면서 변수 검색이 어떻게 진행되는지 다시 정리해보자.

함수 say 내부의 alert에서 변수 name에 접근할 땐, 먼저 내부 렉시컬 환경을 살펴본다.
내부 렉시컬 환경에서 변수 name을 찾았다.
alert에서 변수 phrase에 접근하려는데, phrase에 상응하는 프로퍼티가 내부 렉시컬 환경엔 없다.
따라서 검색 범위는 외부 렉시컬 환경으로 확장된다.
외부 렉시컬 환경에서 phrase를 찾았다.

🍃 단계 4. 함수를 반환하는 함수

맨 처음 makeCounter 예시로 돌아가보자.

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

makeCounter()를 호출하면 호출할 때마다 새로운 렉시컬 환경 객체가 만들어지고 여기에 makeCounter를 실행하는데 필요한 변수들이 저장된다.

위쪽에서 살펴본 say("John") 예시와 마찬가지로 makeCounter()를 호출할 때도 두 개의 렉시컬 환경이 만들어진다.

makeCounter()가 실행되는 도중엔 본문(return count++)이 한줄 짜리인 중첩 함수가 만들어진다는데, 현재는 중첩함수가 생성되기만 하고 실행은 되지 않은 상태이다.

여기서 중요한 사실이 하나 있는데, 모든 함수는 함수가 생성된 곳의 렉시컬 환경을 기억한다는 점이다.

함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데, 여기에 함수가 만들어진 곳의 렉시컬 환경에 대한 참조가 저장된다.

따라서 counter.[[Environment]]엔 {count: 0}이 있는 렉시컬 환경에 대한 참조가 저장된다. 호출 장소와 상관없이 함수가 자신이 태어난 곳을 기억할 수 있는 건 바로 이 [[Environment]] 프로퍼티 덕분이다.

[[Environment]]는 함수가 생성될 때 딱 한 번 값이 세팅되고 영원히 변하지 않는다.

counter()를 호출하면 각 호출마다 새로운 렉시컬 환경이 생성된다. 그리고 이 렉시컬 환경은 counter.[[Environment]]에 저장된 렉시컬 환경을 외부 렉시컬 환경으로서 참조한다.

실행 흐름이 중첩 함수의 본문으로 넘어오면 count 변수가 필요한데, 먼저 자체 렉시컬 환경에서 변수를 찾는다.
익명 중첩 함수엔 지역변수가 없기 때문에 이 렉시컬 환경은 비어있는 상황이다(<empty>).
이제 counter()의 렉시컬 환경이 참조하는 외부 렉시컬 환경에서 count를 찾는다.
count를 찾았다.
count++가 실행되면서 count 값이 1 증가해야하는데, 변숫값 갱신은 변수가 저장된 렉시컬 환경에서 이루어진다.

따라서 실행이 종료된 후의 상태는 다음과 같다.

counter()를 여러 번 호출하면 count 변수가 2, 3으로 증가하는 이유가 바로 여기에 있다.

🌳 클로저

클로저는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 의미하는데, 즉 내부함수는 외부함수의 지역변수에 접근할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다는 메커니즘이다.

자바스크립트에선 모든 함수가 자연스럽게 클로저가 된다. 예외가 하나 있긴 한데 자세한 내용은 new Function 문법에서 다루도록 한다.

🍃 가비지 컬렉션

함수 호출이 끝나면 함수에 대응하는 렉시컬 환경이 메모리에서 제거된다. 함수와 관련된 변수들은 이때 모두 사라진다. 함수 호출이 끝나면 관련 변수를 참조할 수 없는 이유가 바로 여기에 있다. 자바스크립트에서 모든 객체는 도달 가능한 상태일 때만 메모리에 유지되기 때문이다.

그런데 호출이 끝난 후에도 여전히 도달 가능한 중첩 함수가 있을 수 있다. 이때는 이 중첩함수의 [[Environment]] 프로퍼티에 외부 함수 렉시컬 환경에 대한 정보가 저장됩니다. 도달 가능한 상태가 되는 것이다.

함수 호출은 끝났지만 렉시컬 환경이 메모리에 유지되는 이유는 바로 이 때문이다.

예시를 보자.

function f() {
  let value = 123;

  return function() {
    alert(value);
  }
}

let g = f(); // g.[[Environment]]에 f() 호출 시 만들어지는
// 렉시컬 환경 정보가 저장됩니다.

그런데 이렇게 중첩함수를 사용할 때는 주의할 점이 있다.

f()를 여러 번 호출하고 그 결과를 어딘가에 저장하는 경우, 호출 시 만들어지는 각 렉시컬 환경 모두가 메모리에 유지된다는 점이다.

아래 예시를 실행하면 3개의 렉시컬 환경이 만들어지는데, 각 렉시컬 환경은 메모리에서 삭제되지 않는다.

function f() {
  let value = Math.random();

  return function() { alert(value); };
}

// 배열 안의 세 함수는 각각 f()를 호출할 때 생성된 렉시컬 환경과 연관 관계를 맺는다.
let arr = [f(), f(), f()];

렉시컬 환경 객체는 다른 객체와 마찬가지로 도달할 수 없을 때 메모리에서 삭제된다. 해당 렉시컬 환경 객체를 참조하는 중첩 함수가 하나라도 있으면 사라지지 않는다.

아래 예시 같이 중첩 함수가 메모리에서 삭제되고 난 후에야, 이를 감싸는 렉시컬 환경(그리고 그 안의 변수인 value)도 메모리에서 제거된다.

function f() {
  let value = 123;

  return function() {
    alert(value);
  }
}

let g = f(); // g가 살아있는 동안엔 연관 렉시컬 환경도 메모리에 살아있습니다.

g = null; // 도달할 수 없는 상태가 되었으므로 메모리에서 삭제됩니다.