자바스크립트 함수, 이것으로 종결하자

| 참을 수 없는 거부감, 자바스크립트 함수

저번 포스팅에서 이야기한 것처럼 자바스크립트의 자유분방함은 자바에 어느정도 익숙한 나에게는 상당한 거부감으로 다가오고 있다. 자바보다 유연한 언어인 파이썬을 학습하면서도 이러한 거부감은 없었다.

이 거부감의 원인은 자바스크립트를 계속 학습하면서 깨닫게 되었다. 바로 낯선 "자바스크립트의 함수 동작 과정" 때문이란 것을 알게 되었다.

자바스크립트의 함수 동작 과정을 완전히 이해하기 위해서는 Scope Chaining, Lexcial Context, 함수 선언 방법, 함수 실행 방법 등 여러 가지 개념과 경우들을 따져야하기 때문이다. 

자바스크립트는 일급함수다! 따라서 변수에다가 할당할 수도 있고 반환할 수도 있다! 클로져도 됨! 이라는 단순한 개념만 잡고 들어갈 것이 아니란 말이다!

따라서 지금부터 자바스크립트의 함수 동작 방식과 그 예제들을 살펴보면서 자바스크립트 함수를 낱낱히 파헤쳐 보도록 하겠다.

===

클로저로 묶이는 렉시컬 환경(Lexical Environment) [[Environment]]

함수 코드 - [[ECMAScriptCode]]

함수 종류 - [[FunctionKind]] : "normal", "classConstructor", "generator", "async"

생성자 종류 - [[ConstructorKind]] : "base", "derived"

this 참조 형태 - [[ThisMode]]

strict mode 여부 - [[Strict]]

super 참조 - [[HomeObject]]

기타 등등

내부메서드 [[Call]] : 함수를 실행, [[Construct]] : new, super 연산자 호출 시

[[Call]]이 구현된 객체 callable

[[Construct]]가 구현된 객체 constructor

함수 생성

자바스크립트는 함수를 생성할 때 기본적으로 6가지 정보를 본다

함수 생성 방식 - Normal, Arrow, Method(객체 리터럴)

함수의 매개변수 리스트

함수 몸체(함수 코드)

스코프 (Lexical Environment) => 스코프 체이닝을 위함

strict mode 여부 => ECMAScript6에서는 안 할 듯

함수 객체의 프로토타입 - FunctionPrototype, Generator, AsyncFunctionPrototype

함수 생성을 구분하는 이유는 Arrow나 Method인 경우 생성자로 동작하지 못하도록 방지하고, 함수의 this 참조 방식을 결정하기 위해서임

ECMAScript6 이후 함수를 어떻게 생성하는가에 따라 생성자로 쓰일 수 있는지 없는지가 결정되며, 이는 함수 생성 시 함수 할당이라 부르는 단계에서 결정한다.

Execution Context에는 LexicalEnvironment와 VariableEnvironment라는 컴포넌트가 있다. 기본적으로 두 컴포넌트는 Lexical Environment에 대한 참조이며 처음에는 같은 Lexical Environment를 참조한다.

Lexical Environment는 자바스크립트 코드에서 변수나 함수 등의 식별자를 정의하는데 사용하는 객체로 생각하면 쉽다. Lexical Environment는 식별자와 참조 혹은 값을 기록하는 Environment Record와 outer라는 또다른 Lexical Environment를 참조하는 포인터로 구성된다. outer는 외부 Lexical Environment를 참조하는 포인터로, 중첩된 자바스크립트 코드에서 스코프 탐색을 하기 위해 사용한다.