Ruan Yifeng: Understanding ECMAScript Specifications

1. Overview

A specification is the official standard for a computer language, describing in detail the syntax rules and implementation methods.

[[155984]]

Generally speaking, there is no need to read the specification unless you are writing a compiler. Specifications are written in a very abstract and concise manner, lacking examples, and are not easy to understand. In addition, they are not very helpful in solving practical application problems. However, if you encounter a difficult syntax problem and cannot find the answer, you can check the specification file to understand what the language standard says. Specifications are the "last resort" to solve problems.

This is very necessary for the JavaScript language. Because its usage scenarios are complex, the grammar rules are not unified, there are many exceptions, and the behaviors of various operating environments are inconsistent, resulting in endless strange grammar problems. No grammar book can cover all situations. Checking the specifications is the most reliable and authoritative way to solve grammar problems.

This article describes how to read the ECMAScript 6 specification file.

The ECMAScript 6 specification can be downloaded and read online for free on the official website of the ECMA International Standards Organization (www.ecma-international.org/ecma-262/6.0/).

This specification document is quite large, with a total of 26 chapters. If printed in A4 format, it is a full 545 pages. Its characteristic is that it is very detailed, and every grammatical behavior and the implementation of each function are described in detail and clearly. Basically, the compiler author only needs to translate each step into code. This largely ensures that all ES6 implementations have consistent behavior.

Among the 26 chapters of the ECMAScript 6 specification, Chapters 1 to 3 are introductions to the file itself and have little to do with the language. Chapter 4 describes the overall design of the language, and interested readers can read it. Chapters 5 to 8 are macro-level descriptions of the language. Chapter 5 is an explanation of the terms and an introduction to writing the specification, Chapter 6 introduces data types, Chapter 7 introduces abstract operations used within the language, and Chapter 8 introduces how the code runs. Chapters 9 to 26 introduce specific syntax.

For general users, except for Chapter 4, other chapters involve details of a certain aspect. You do not need to read them all. Just refer to the relevant chapters when you need them. The following are some examples to introduce how to use this specification.

2. Equality Operator

Let’s look at this example first. What is the value of the following expression?

 0 == null   

If you're not sure, or want to know how this is handled internally, check the specification; section 7.2.12 describes the equality operator ( == ).

The specification describes each grammatical behavior in two parts: first the overall behavior description, then the implementation algorithm details. The overall description of the equality operator is only one sentence.

The above sentence means that the equality operator is used to compare two values ​​and returns true or false.

Below are the algorithm details.

1. ReturnIfAbrupt(x).
2. ReturnIfAbrupt(y).
3. If Type(x) is the same as Type(y), then
   Return the result of performing Strict Equality Comparison x === y.
4. If x is null and y is undefined, return true.
5. If x is undefined and y is null, return true.
6. If Type(x) is Number and Type(y) is String,
   return the result of the comparison x == ToNumber(y).
7. If Type(x) is String and Type(y) is Number,
   return the result of the comparison ToNumber(x) == y.
8. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
9. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
10. If Type(x) is either String, Number, or Symbol andType(y) is Object, then
    return the result of the comparison x == ToPrimitive(y).
11. If Type(x) is Object and Type(y) is either String, Number, or Symbol, then
    return the result of the comparison ToPrimitive(x) == y.
12. Return false.

The above algorithm has a total of 12 steps, translated as follows.

1. If x is not a normal value (i.e. an error is thrown), abort execution.
2. If y is not a normal value, execution is interrupted.
3. If Type(x) is the same as Type(y), perform strict equality x === y.
4. If x is null and y is undefined, return true.
5. If x is undefined and y is null, return true.
6. If Type(x) is number and Type(y) is string, return the result of x == ToNumber(y).
7. If Type(x) is string and Type(y) is number, return the result of ToNumber(x) == y.
8. If Type(x) is Boolean, return the result of ToNumber(x) == y.
9. If Type(y) is Boolean, return the result of x == ToNumber(y).
10. If Type(x) is a string or a number or a Symbol value, and Type(y) is an object, return the result of x == ToPrimitive(y).
11. If Type(x) is Object and Type(y) is String or Number or Symbol, return the result of ToPrimitive(x) == y.
12. Returns false.

Since the type of 0 is a number and the type of null is Null (this is specified in section 4.3.13 of the specification, which is the result of internal Type operations and has nothing to do with the typeof operator), the first 11 steps above will not produce any results, and false will be obtained only in step 12.

 0 == null   // false  

3. Empty spaces in arrays

Let’s look at another example.

 const a1 = [undefined, undefined, undefined];
 const a2 = [, , ,]; 
 
 a1.length // 3  
 a2.length // 3   
 
 a1[ 0 ] // undefined  
 a2[ 0 ] // undefined   
 
 a1[ 0 ] === a2[ 0 ] // true  

In the above code, the members of array a1 are three undefined, and the members of array a2 are three empty positions. These two arrays are very similar, both have a length of 3, and the members at each position are read as undefined.

However, they actually have significant differences.

0 in a1 // true
0 in a2 // false

a1.hasOwnProperty(0) // true
a2.hasOwnProperty(0) // false

Object.keys(a1) // ["0", "1", "2"]
Object.keys(a2) // []

a1.map(n => 1) // [1, 1, 1]
a2.map(n => 1) // [, , ,]

The above code lists four operations in total, and the results of arrays a1 and a2 are different. The first three operations (in operator, array hasOwnProperty method, Object.keys method) all show that array a2 cannot get the property name. The last operation (array map method) shows that array a2 is not traversed.

Why do the a1 and a2 members behave inconsistently? What is the difference between an array member being undefined or empty?

The answer is given in section 12.2.5 of the specification, "Array Initialization".

The translation is as follows.

The above specification clearly states that the empty position of the array will be reflected in the length property, which means that the empty position has its own position, but the value of this position is undefined, that is, this value does not exist. If you must read it, the result is undefined (because undefined means non-existence in JavaScript language).

This explains why the in operator, the array hasOwnProperty method, and the Object.keys method cannot get the property name of the empty position. This is because the property name does not exist at all. The specification does not say to assign a property name (position index) to the empty position, but only says to add 1 to the position index of the next element.

As for why the array map method skips empty spaces, see the next section.

4. Map method of array

The map method for arrays is defined in section 22.1.3.15 of the specification. This section begins with a general description of the behavior of the map method, and does not mention array slots.

The following algorithm description is as follows.

1. Let O be ToObject(this value).
2. ReturnIfAbrupt(O).
3. Let len ​​be ToLength(Get(O, "length")).
4. ReturnIfAbrupt(len).
5. If IsCallable(callbackfn) is false, throw a TypeError exception.
6. If thisArg was supplied, let T be thisArg; else let Tbe undefined.
7. Let A be ArraySpeciesCreate(O, len).
8. ReturnIfAbrupt(A).
9. Let k be 0.
10. Repeat, while k < len
    a. Let Pk be ToString(k).
    b. Let kPresent be HasProperty(O, Pk).
    c. ReturnIfAbrupt(kPresent).
    d. If kPresent is true, then
    d-1. Let kValue be Get(O, Pk).
    d-2. ReturnIfAbrupt(kValue).
    d-3. Let mappedValue be Call(callbackfn, T, «kValue, k, O»).
    d-4. ReturnIfAbrupt(mappedValue).
    d-5. Let status be CreateDataPropertyOrThrow (A, Pk, mappedValue).
    d-6. ReturnIfAbrupt(status).
    e. Increase k by 1.
11. Return A.

The translation is as follows.

1. Get the this object of the current array
2. If an error occurs, return
3. Find the length property of the current array
4. If an error occurs, return
5. If the callbackfn parameter of the map method is not executable, an error is reported
6. If this is specified in the map method's parameters, let T be equal to that parameter, otherwise T is undefined
7. Generate a new array A, which is consistent with the length attribute of the current array
8. If an error occurs, return
9. Set k equal to 0
10. As long as k is less than the length property of the current array, repeat the following steps
    a. Set Pk equal to ToString(k), that is, convert K to a string
    b. Set kPresent equal to HasProperty(O, Pk), that is, find out whether the current array has the specified property
    c. Return if error occurs
    d. If kPresent is equal to true, proceed to the following steps
    d-1. Set kValue equal to Get(O, Pk) to retrieve the specified attribute of the current array
    d-2. Return if error occurs
    d-3. Set mappedValue equal to Call(callbackfn, T, «kValue, k, O»), that is, execute the callback function
    d-4. Return if error occurs
    d-5. Set status equal to CreateDataPropertyOrThrow (A, Pk, mappedValue), that is, put the value of the callback function into the specified position of the A array
    d-6. Return if error occurs
    e. k increases by 1
11. Return to A

Looking carefully at the algorithm above, we can find that when processing an array full of empty spaces, there are no problems with the previous steps. When entering step 10, kpresent will report an error because the attribute name corresponding to the empty space does not exist for the array, so it will return and will not proceed to the next step.

 const arr = [, , ,];
 arr.map(n => {
 console.log(n);
 return   1 ;
 }) // [, , ,]  

In the above code, arr is an array full of empty spaces. When the map method traverses the members and finds that there are empty spaces, it skips directly and does not enter the callback function. Therefore, the console.log statement in the callback function will not be executed at all, and the entire map method returns a new array full of empty spaces.

The V8 engine implements the map method as follows, which is exactly the same as the algorithm description in the specification.