Lexical Environment 맛보기

이 글은 ECMAscript 2017을 기준으로 작성된 글입니다.

오타, 오역, 부정확한 표현/정보가 있으면 지적해 주시면 감사하겠습니다.

---

다시 한번 맛보기로 돌아왔다. 할 말은 많지만, 이 글의 제목이 맛보기인 이유는 다음 사진으로 대체하겠다.

 

세상만사 쉬운게 없다

맛보기 대상

그래서 뭘 맛 볼거냐?

위의 사진에서 조금 알아챌 수 있듯이 굉장히 방대한 내용을 다루고 있으니, 차근차근 접근할 것이다.

이번 편에서는 Lexical Enviroments 개괄을 해보고자 한다. scope와 관련된 이해가 조금 있으면 좋습니다.

 

진짠가?라는 느낌으로 읽어주시면 감사드리겠습니다. 애매하면 댓글을 남겨주시면 감사드리겠습니다.

 

 

---

Lexical Environments

A Lexical Environmentis a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code.

위는 ECMAScript기본 문서의 Lexical Environments 부분에서 처음 나오는 문장이다.

간단히 말해 변수나 함수의 식별자를 정의하는 데 사용하는 객체이다.

 

이해가 안 간다면 아래 코드를 보면서 한번 상상해 보자.

 

function hello () {
  let x = 1;
  console.log(x);
  return (function say () {
    x = 2;
    console.log(x);
    return (function hi () {
      x = 3;
      console.log(x);
    })
  })
}

 

위 코드는 위부터 차례로 hello, say, hi순으로 내부 함수를 선언한 코드이다.

hi함수에서 어떻게 x의 값에 접근할 수 있을까? 아래에서는 컴퓨터에 빙의하여 한번 생각해 보겠다.

 

 

hi가 선언된다. hi안에서 x에 접근한다. x가 선언된 적이 없다. 그러면 밖(say)으로 향한다. say에서 x를 찾는다. 선언된 적이 없다. 이제 hello로 간다. hello에서 x가 선언되었다. 참조하도록 한다.

 이처럼 함수의 선언 시에 한 단계 한단계 범위를 확대하면서 변수를 찾는다. javascript에서는 이러한 방식을 활용하기 위해 범위마다 필요한 데이터들을 저장해 놓는다. 개중에 아래 구성요소를 갖춘 객체를 Lexical Environment라고 부르는 것이다. 

 

• Environment Record
• outer Lexical Environment

 

Environment Record

자, 모르는 게 나왔으니 정의부터 살펴보자.

An Environment Record records the identifier bindings that are created within the scope of its associated Lexical Environment.

간단히 말해, Environment Record는  식별자와 값을 기록하는 친구다.

 

이에 대해 좀 더 직관적으로 느끼기 위해, 코드로 예시를 하나 들겠다.

 

let a = 1;
let b = 2;

function c(a,b) {
  return a + b;
}

c(a,b);

우리는 위 코드를 보면 c(a, b)의 결과를 어느 정도 대충 때려 맞출 수 있다.

a는 1이고 b는 2니까 a랑 b를 더하는 것을 돌려주는 c의 결과는 3일 것이다.

 

그러면 javascript엔진은 어떻게 a는 1이고, b는 2이며, c는 a와 b를 더해준다는 것을 알까?

그것을 기록하고 가지고 있는 친구가 Environment Record인 것이다. 

몰라도 좋다. 모르는 것들은 갓갓 스터디장님께서 알려주실 것이다. ㅎㅎ

 

 

outer Lexical Environment

위에서 예시를 보면서 생각이 들었을 것이다. inner의 입장에서 밖에 있는 Lexical Environment라고 생각해보자. 그러면 outer Lexical Environment는 inner 밖에서 필요한 데이터들이 정의된 객체이다. 그리고 그것을 가진다는 것은 그러한 데이터를 참조한다는 말이 되겠다.

 

 

---

맛보기 정리

Lexical Environment는 javascript가 안에서 밖으로 선언을 찾아나가는 방식을 이용하기 위해 필요한 데이터를 정리해 놓은 것이다 그 필요한 데이터는 식별자와 값, 그리고 외부의 Lexical scope다. 

내가 썼지만 야매롭다.

---

야매로운 글이니 아래 참조를 보고 확실하게 이해하시기 바란다.

다음 편에는 Lexical Environment의 종류를 간단히 소개하겠다.

오타, 오류 지적은 정말 환영합니다.

 

참조는 아래와 같습니다.

• ECMAScript2017 - https://www.ecma-international.org/ecma-262/8.0/index.html
• 자바스크립트 함수(3) - Lexical Environment - https://meetup.toast.com/posts/129
• 함수의 범위(scope) - https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e
• 실행 컨텍스트와 자바스크립트의 동작 원리 - https://poiemaweb.com/js-execution-context