Understanding JavaScript iterators
Published: 2021-04-30 04:24:09

<img class="aligncenter size-full wp-image-13728" src="https://off.tokyo/wp-content/uploads/2021/04/javascript.jpg" alt="" width="1280" height="720" />

[source : Understanding JavaScript iterators](https://off.tokyo/blog/understanding-javascript-iterators/)

Iterators and generators are a big feature of ECMAScript 6 (released in June 2015 and still relatively new to JavaScript).

&nbsp;

And It's a huge, complex system, and complicated.

&nbsp;

So In this article, I'd like to explain iterators in a way that you can understand them step by step.

&nbsp;
<h2>What is an Iterator Result?</h2>
&nbsp;

An iterator is an object from which iterator results can be retrieved in order.

&nbsp;

Specifically, an object that satisfies the following two points is called an iterator.

&nbsp;
<ul>
 	<li>It must have a .next() method</li>
 	<li>When .next() is executed, it returns the iterator result.</li>
</ul>
&nbsp;

In other words, in the following code, iterator is an iterator.

&nbsp;

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var iterator = {}; 
iterator.next = function(){
    var iteratorResult = { value: 42, done: false };
    return iteratorResult;
};</pre>
</div>
&nbsp;

Here, in the code above, we see an iterator result called iteratorResult.

&nbsp;

As you can see, the iterator result is an object and has the .value and .done properties.

&nbsp;

The role of each property is as follows

&nbsp;
<ul>
 	<li>The .value property is the value (item) retrieved from the iterator.</li>
 	<li>The .done property is a boolean value indicating whether or not the value has been sequentially extracted from the iterator.</li>
</ul>
&nbsp;
<h2>What is Iterable?</h2>
&nbsp;

An iterable is an object that has an iterator.

To be more specific, an object is said to be iterable if it satisfies the following

&nbsp;
<ul>
 	<li>When the [Symbol.iterator]() method is executed, it should return an iterator.</li>
</ul>
&nbsp;

In other words, in the following code, obj is iterable.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var iterator = {}; 
iterator.next = function(){
    var iteratorResult = { value: 42, done: false }; // イテレータリザルト
    return iteratorResult;
};

var obj = {}; 
obj[Symbol.iterator] = function(){
    return iterator;
};</pre>
</div>
&nbsp;

An object that is iterable is also called an iterable object.

&nbsp;

This relationship is shown in the figure below.

&nbsp;

(Sorry for the Japanese, please just read and understand the English part.)

&nbsp;

<img class="aligncenter size-full wp-image-13867" src="https://off.tokyo/wp-content/uploads/2021/04/i.png" alt="" width="640" height="419" />

&nbsp;

&nbsp;

<img class="aligncenter size-full wp-image-13868" src="https://off.tokyo/wp-content/uploads/2021/04/i2.png" alt="" width="2232" height="814" />

&nbsp;
<h2>Create an iterable object.</h2>
&nbsp;

As a simple example, let's create an iterable object with an iterator that can fetch the numbers 1 through 10 in order.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = {}; // iterable object
obj[Symbol.iterator] = function(){
    var iterator = {}; // iterator
    var count = 1;
    iterator.next = function(){
        var iteratorResult = (count &lt;= 10)
            ? { value: count++, done: false }
            : { value: undefined, done: true };
        return iteratorResult; // iterator result
    };
    return iterator;
};</pre>
</div>
&nbsp;

The current value is stored in the variable count, and each time .next() is executed, the value is counted up and returned in .value.

&nbsp;

When count exceeds 10, we set .done to true to indicate that we have finished retrieving the values in order.

&nbsp;

Now we have an iterable object with an iterator that can fetch the numbers 1 to 10 in order.

&nbsp;
<h2>Extract values from iterators in order</h2>
&nbsp;

Let's extract the values from the iterator we just created in order and output them to the console.

&nbsp;

We will use the property that .next() can be used to retrieve the iterator result.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = {}; // iterable object
obj[Symbol.iterator] = function(){
    var iterator = {}; // iterator
    var count = 1;
    iterator.next = function(){
        var iteratorResult = (count &lt;= 10)
            ? { value: count++, done: false }
            : { value: undefined, done: true };
        return iteratorResult; // iterator result
    };
    return iterator;
};

var iterator = obj[Symbol.iterator](); // get the iterator from an iterable object
var iteratorResult;
while(true){
    iteratorResult = iterator.next(); // retrieve the values in order
    if(iteratorResult.done) break; // break when finished fetching
    console.log(iteratorResult.value); // output the value to the console
}
/* 1
  1
  2
  3
  ...
  10
*/ ...
</pre>
</div>
&nbsp;

Now, we can extract the values from the iterator in order.

&nbsp;

However, this is code that can be written in ECMAScript 5, and the way it is written is unnecessarily complicated, so You migthj don't see much benefit in it.

&nbsp;

The reason why iterators are so useful is that you can use the for(v of iterable) syntax to get the values more easily.

&nbsp;
<h2>Easier to extract values from iterators</h2>
&nbsp;

A convenient syntax provided for extracting values from an iterator is for(v of iterable).

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = {}; // iterable object
obj[Symbol.iterator] = function(){
    var iterator = {}; // iterator
    var count = 1;
    iterator.next = function(){
        var iteratorResult = (count &lt;= 10)
            ? { value: count++, done: false }
            : { value: undefined, done: true };
        return iteratorResult; // iterator result
    };
    return iterator;
};

for(var v of obj) console.log(v);
/*
  1
  2
  3
  ...
  10
*/ ...
</pre>
</div>
&nbsp;

This syntax, for(v of iterable), executes the following steps in order.

&nbsp;
<blockquote>First, execute iterator = iterable[Symbol.iterator]() to get the iterator.

↓

Next, execute iteratorResult = iterator.next() to retrieve the iterator result.

↓

If iteratorResult.done == true, iteratorResult.done has been retrieved and quits. Otherwise, go to next.

↓

Assign v = iteratorResult.value and execute the statement (console.log(v)).

↓

Next, execute iteratorResult = iterator.next() to retrieve the iterator result.</blockquote>
&nbsp;
<h2>Iterable objects prepared from official</h2>
&nbsp;

By using for(v of iterable), It was able to write much smarter code.

&nbsp;

However, the part that defines the iterable object is very long.

&nbsp;

In fact, there is an iterable object that is already provided in JavaScript,

&nbsp;

without having to define it yourself.

&nbsp;
<h2>Related to Arrays</h2>
&nbsp;

First, the array itself is an iterable object.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var v of obj) console.log(v);
/*
  "A"
  "B"
  "C"
*/</pre>
</div>
&nbsp;

To check, let's see if the array is an iterable object with the properties we have raised so far.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = ["A", "B", "C"]; // iterable object
var iterator = obj[Symbol.iterator]();
console.log(typeof iterator); // "object". We are indeed getting an iterator.
console.log(iterator.next()); // { value: "A", done: false }</pre>
</div>
&nbsp;

Arrays also have a .keys() method that allows you to get an iterator to retrieve the array keys in order.

&nbsp;

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = ["A", "B", "C"]; // iterable object
for(var v of obj.keys()) console.log(v);
/*
  0
  1
  2
/* 0 1 2</pre>
</div>
&nbsp;

&nbsp;

Arrays also have the .entries() method, which allows you to retrieve an iterator that fetches an array of keys and values in sequence.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = ["A", "B", "C"]; // iterable object
for(var v of obj.entries()) console.log(v);
/*
  [0, "A"]
  [1, "B"]
  [2, "C"]
*/ [0, "A"] [1, "B"] [2, "C"].</pre>
</div>
&nbsp;
<h2>String</h2>
&nbsp;

A string object is also an iterable object.

It can be used to extract characters one by one from the beginning of a string.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var str = "あいう";
for(var v of str) console.log(v);
/*
  "あ"
  "い"
  "う"
*/</pre>
</div>
&nbsp;

To check, let's see if the string is also an iterable object with the same properties as we have mentioned so far.

&nbsp;

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var str = "あいう";
var iterator = str[Symbol.iterator]();
console.log(typeof iterator); // "object"
console.log(iterator.next()); // { value: "あ", done: false }</pre>
</div>
&nbsp;
<h2>Iterators</h2>
&nbsp;

The iterators provided in JavaScript are actually iterable objects in their own right.

Therefore, executing the [Symbol.iterator]() method will return itself.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
var iterator = obj[Symbol.iterator](); // イテレータを取得する
for(var v of iterator) console.log(v); // for-of にイテレータを渡す
/*
  "A"
  "B"
  "C"
*/

console.log(iterator === iterator[Symbol.iterator]()); // true</pre>
</div>
&nbsp;
<h2>Generators</h2>
&nbsp;

Generators, which are created by generator functions, are both iterable objects and iterators.

Generators are also a very rich mechanism, which will be explained in another article.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">function* gfn(n){
    while(n &lt; 100){
        yield n;
        n *= 2;
    }
}
var gen = gfn(3);
for(var v of gen) console.log(v);
/*
  3
  6
  12
  24
  48
  96
*/</pre>
</div>
&nbsp;
<h2>Other stuff</h2>
&nbsp;

There are also various other iterable objects.

&nbsp;

Arguments
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">// Firefox 40 dose not work
function func(){
    for(var v of arguments) console.log(v);
}
func(42, "あ", true);
/*
  42
  "あ"
  true
*/</pre>
</div>
&nbsp;

TypedArray
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var view = new Uint8Array([0, 1, -1]);
for(var v of view) console.log(v);
/*
  0
  1
  255
*/</pre>
</div>
&nbsp;

Map
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var map = new Map([[0, "Zero"], [{}, "Object"], [[], "Array"]]);
for(var v of map) console.log(v);
/*
  [0, "Zero"]
  [{}, "Object"]
  [[], "Array"]
*/</pre>
</div>
&nbsp;

Set
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var set = new Set([0, {}, []]);
for(var v of set) console.log(v);
/*
  0
  {}
  []
*/</pre>
</div>
&nbsp;
<h2>There's more! How to use iterators</h2>
&nbsp;

We used an iterator with the syntax for(v of iterable).

&nbsp;

Actually, there are many other ways to use iterators.

&nbsp;
<h3>Array</h3>
[... .iterable] syntax.

&nbsp;

From iterable, you can create an array in which the values are extracted in order and the number of elements are placed in the corresponding part.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var ary = [0, "A", false];
var str = "あいう";
var connectedAry = [...ary, ...str];
console.log(connectedAry);
/*
  [0, "A", false, "あ", "い", "う"]
*/</pre>
</div>
&nbsp;

You can also use the syntax Array.from(iterable) to do the same thing.

&nbsp;

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var str = "あいう";
var ary = Array.from(str);
console.log(ary); // ["あ", "い", "う"]</pre>
</div>
&nbsp;
<h3>Argument passing</h3>
&nbsp;

The syntax is func(. .iterable) syntax.

The values are taken out of iterable in order, and the function is executed so that the number of arguments are placed in the corresponding part.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var nums = [112, 105, 121, 111];
console.log( Math.max(...nums) ); // 121
console.log( String.fromCharCode(...nums) ); // "piyo"
</pre>
</div>
&nbsp;
<h3>Split Assignment</h3>
&nbsp;

The syntax is [a, b, c] = iterable.

The values are taken out of iterable in order and assigned to the variables on the left side in order.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var [a, b, c] = "ひよこ";
console.log(c+b+a); // "こよひ"</pre>
</div>
&nbsp;
<h3>Map, Set, WeakMap, WeakSet</h3>
&nbsp;

The syntax is new Map(iterable), new Set(iterable), new WeakMap(iterable), new WeakSet(iterable).
Each iterable takes a value in turn, and the keys and values can be specified.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var set = new Set("あいうあお");
console.log(set); // Set {"あ", "い", "う", "お"}

var map = new Map(["A", "B", "C"].entries());
console.log(map); // Map {0 =&gt; "A", 1 =&gt; "B", 2 =&gt; "C"}</pre>
</div>
&nbsp;
<h2>Practical sample</h2>
&nbsp;

This is an application of the previous content.

&nbsp;
<h3>Output array elements one by one to the console.</h3>
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var ary = [0, 5, 9, 2, 7];
for(var v of ary) console.log(v);
/*
  0
  5
  9
  2
  7
*/</pre>
</div>
&nbsp;
<h3>Copying an array</h3>
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var ary0 = [1, 2, 3];
var ary1 = [...ary0];
console.log(ary0.join() === ary1.join()); // true
console.log(ary0 === ary1); // false</pre>
</div>
&nbsp;
<h3>Assigning the first element of an array</h3>
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var ary = ["A", "B", "C"];
var [first] = ary;
console.log(first); // "A"</pre>
</div>
&nbsp;
<h3>Assign the first character of a string</h3>
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var str = "ABC";
var [first] = str;
console.log(first); // "A"</pre>
</div>
&nbsp;
<h3>Remove duplicate values from an array</h3>
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var ary = [0, 5, 9, 0, 2, 5];
var uniqueAry = [...new Set(ary)];
console.log(uniqueAry); // [ 0, 5, 9, 2 ]</pre>
</div>
&nbsp;
<h3>Pass variable length arguments to functions without using .apply()</h3>
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var nums = [112, 105, 121, 111];
console.log( Math.max(...nums) ); // 121
console.log( String.fromCharCode(...nums) ); // "piyo"</pre>
</div>
&nbsp;
<h3> Assign the matched and partially matched characters all at once.</h3>
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var [all, part] = "abcde".match(/ab(.)de/)
console.log(all, part); // "abcde", "c"</pre>
</div>
&nbsp;

<span style="font-size: 90%;">＊This article is based on the Japanese article below and has been translated into English for easier understanding.</span>

https://qiita.com/kura07/items/cf168a7ea20e8c2554c6