Section 26: Meta-Programming - Symbols, Iterators & Generators, Reflect API, Proxy API

The goals

💪🏻What & How?

 

What?

Symbols	Iterators & Generators	Reflect API	Proxy API
Primitive values	Create your own "loopable" values	API to control objects	Create "traps" for object operations
Used as object property identifiers	What arrays, string etc. use internally	Standardiezed & grouped methods	Step in and execute code
Built-in & creatable by developers		Control code usage / impact
Uniqueness is guaranteed

 

 

 

Iterators and generators

Iterators and Generators bring the concept of iteration directly into the core language and provide a mechanism for customizing the behavior of for...of loops.

 

Iterators

In JavaScript an iterator is an object which defines a sequence and potentially a return value upon its termination.

Specifically, an iterator is any object which implements the Iterator protocol by having a next() method that returns an object with two properties:

value

The next value in the iteration sequence.

done

This is true if the last value in the sequence has already been consumed. If value is present alongside done, it is the iterator's return value.

Once created, an iterator object can be iterated explicitly by repeatedly calling next(). Iterating over an iterator is said to consume the iterator, because it is generally only possible to do once. After a terminating value has been yielded additional calls to next() should continue to return {done: true}.

The most common iterator in JavaScript is the Array iterator, which returns each value in the associated array in sequence.

While it is easy to imagine that all iterators could be expressed as arrays, this is not true. Arrays must be allocated in their entirety, but iterators are consumed only as necessary. Because of this, iterators can express sequences of unlimited size, such as the range of integers between 0 and Infinity.

Here is an example which can do just that. It allows creation of a simple range iterator which defines a sequence of integers from start (inclusive) to end (exclusive) spaced step apart. Its final return value is the size of the sequence it created, tracked by the variable iterationCount.

function makeRangeIterator(start = 0, end = Infinity, step = 1) {
  let nextIndex = start;
  let iterationCount = 0;

  const rangeIterator = {
    next() {
      let result;
      if (nextIndex < end) {
        result = { value: nextIndex, done: false };
        nextIndex += step;
        iterationCount++;
        return result;
      }
      return { value: iterationCount, done: true };
    }
  };
  return rangeIterator;
}

Using the iterator then looks like this:

const it = makeRangeIterator(1, 10, 2);

let result = it.next();
while (!result.done) {
 console.log(result.value); // 1 3 5 7 9
 result = it.next();
}

console.log("Iterated over sequence of size: ", result.value); // [5 numbers returned, that took interval in between: 0 to 10]

 

Generator functions

While custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. Generator functions provide a powerful alternative: they allow you to define an iterative algorithm by writing a single function whose execution is not continuous. Generator functions are written using the function* syntax.

When called, generator functions do not initially execute their code. Instead, they return a special type of iterator, called a Generator. When a value is consumed by calling the generator's next method, the Generator function executes until it encounters the yield keyword.

The function can be called as many times as desired, and returns a new Generator each time. Each Generator may only be iterated once.

We can now adapt the example from above. The behavior of this code is identical, but the implementation is much easier to write and read.

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
  let iterationCount = 0;
  for (let i = start; i < end; i += step) {
    iterationCount++;
    yield i;
  }
  return iterationCount;
}

1. 메타프로그래밍

본격적으로 Proxy를 알아보기에 앞서 한 가지 개념을 소개하려 한다. Proxy 또한 프로그래밍 언어의 어떤 기능 또는 개념을 지원하기 위해 나온 문법이라고 볼 수 있다. 바로 메타프로그래밍(Metaprogramming) 이다.

메타프로그래밍이란 하나의 컴퓨터 프로그램이 다른 프로그램을 데이터로 취급하는 것을 말한다. 즉, 어떤 프로그램이 다른 프로그램을 읽고, 분석하거나 변환하도록 설계된 것이다. 메타프로그래밍에 이용되는 언어를 메타 언어라고 하고, 조작 대상이 되는 언어를 대상 언어라고 한다. 메타 언어와 대상 언어는 같을 수도 있고, 다를 수도 있다.

1.1. 메타 언어와 대상 언어가 다른 경우

아래 예제는 JSP에서 HTML을 만들어내는 코드인데 메타 언어는 Java이고, 대상 언어는 HTML이 될 것이다. (나름대로 간단한 예제를 만들어본 건데 대상언어가 HTML이라 약간 애매하긴 하다. 하지만 이 안에서 <script>를 사용한다고 가정하면 좀 더 확실해지지 않을까 한다.)

out.println("<html><body>");

out.println("<h1>Hello World</h1>");
out.println("The current time is : " + new java.util.Date());
out.println("</body></html>");

1.2. 메타 언어와 대상 언어가 같은 경우

아래 예제는 메타 언어와 대상 언어를 둘 다 JavaScript로 작성하기 위해 eval()을 사용했다. eval은 런타임 중에 매개변수를 평가한다. 이렇게 한 프로그래밍 언어가 자기 자신의 메타 언어가 되는 것을 반영(Reflection) 이라고 하며, 이는 런타임 시점에 자신의 구조와 행위를 관리하고 수정하는 것을 의미한다.

> eval('1 + 1')
2

그럼 메타프로그래밍의 한 갈래인 반영에 대해 알아보도록 하겠다.

1.3. 반사형 프로그래밍(Reflective programming)

우리가 알아볼 Proxy와 Reflect는 반영을 구현한 것이고, 여기에는 또다시 세 가지의 종류가 있다.

• Type introspection
  런타임에서 프로그램이 자신의 구조에 접근하여 타입이나 속성을 알아내는 능력을 뜻한다. 예시로 Object.keys()가 있다.
• Self-modification
  구조를 스스로 변경할 수 있다는 의미로, 예시로 어떤 속성에 접근하기 위해 [] 표기법을 사용하고, delete 연산자로 제거하는 것 등이 있다.
• Intercession
  말 그대로 어떤 것을 대신하여 개입하는 행위를 뜻하며, 언어가 수행되는 일부 의미를 재정의하는 것을 말한다. 이를 지원하기 위해 ES2015에서 Proxy가 만들어졌다. (2ality의 운영자인 Axel Rauschmayer의 표현(링크 참조)인데, 사실 Object.defineProperty() 같은 메서드들이 이미 구현이 되어 있어 기존에 없었다고 보기에는 좀 애매하지만, Intercession의 개념이 대상에 변이를 일으키지 않는 것에 초점이 맞춰진다면 맞는 말일 수도 있겠다.)

2. Proxy란

프록시 객체(Proxy object)는 대상 객체(Target object) 대신 사용된다. 대상 객체를 직접 사용하는 대신, 프록시 객체가 사용되며 각 작업을 대상 객체로 전달하고 결과를 다시 코드로 돌려준다.

이러한 방식을 통해 프록시 객체는 JavaScript의 기본적인 명령에 대한 동작을 사용자 정의가 가능하도록 한다. 객체 자체가 처리하는 특정 명령을 재정의할 수 있게 되는 것이다. 이런 명령의 종류는 속성 검색, 접근, 할당, 열거, 함수 호출 등이 대표적이다.

 

 

 

Sources

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#well-known_symbols

Symbol - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

Iterators and generators - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect

Reflect - JavaScript | MDN

https://meetup.toast.com/posts/302

JavaScript Proxy. 근데 이제 Reflect를 곁들인 : NHN Cloud Meetup