W3cubDocs

/JavaScript

[email protected]@iterator

The @@iterator method is part of The iterable protocol, that defines how to synchronously iterate over a sequence of values.

The initial value of the @@iterator property is the same function object as the initial value of the values() property.

Syntax

arr[Symbol.iterator]()

Return value

The initial value given by the values() iterator. By default, using arr[Symbol.iterator] will return the values() function.

Examples

Iteration using for...of loop

HTML

<ul id="letterResult">
</ul>

JavaScript

var arr = ['a', 'b', 'c'];
var eArr = arr[Symbol.iterator]();
var letterResult = document.getElementById('letterResult');
// your browser must support for..of loop
// and let-scoped variables in for loops
// const and var could also be used
for (let letter of eArr) {
 letterResult.innerHTML += "<li>" + letter + "</li>";
}

Result

Alternative iteration

var arr = ['a', 'b', 'c', 'd', 'e'];
var eArr = arr[Symbol.iterator]();
console.log(eArr.next().value); // a
console.log(eArr.next().value); // b
console.log(eArr.next().value); // c
console.log(eArr.next().value); // d
console.log(eArr.next().value); // e

Use Case for brace notation

The use case for this syntax over using the dot notation (Array.prototype.values()) is in a case where you don't know what object is going to be ahead of time. If you have a function that takes an iterator and then iterate over the value, but don't know if that Object is going to have a [Iterable].prototype.values method. This could be a built-in object like String object or a custom object.

function logIterable(it) {
 if (!(Symbol.iterator in Object.getPrototypeOf(it)
 /* or "Symbol.iterator in Object.__proto__" 
    or "it[Symbol.iterator]" */)) {
   console.log(it, ' is not an iterable object...');
   return;
 } 

 var iterator = it[Symbol.iterator]();
  // your browser must support for..of loop
  // and let-scoped variables in for loops
  // const and var could also be used
  for (let letter of iterator) {
      console.log(letter);
  }
}

// Array
logIterable(['a', 'b', 'c']);
// a
// b
// c

// string
logIterable('abc'); 
// a
// b
// c

logIterable(123);
// 123 " is not an iterable object..."

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
@@iterator 38 12 36
36
27 — 36
A placeholder property named @@iterator is used.
Uses the non-standard name: @@iterator
17 — 27
A placeholder property named iterator is used.
Uses the non-standard name: iterator
No 25 10
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@@iterator 38 38 36
36
27 — 36
A placeholder property named @@iterator is used.
Uses the non-standard name: @@iterator
17 — 27
A placeholder property named iterator is used.
Uses the non-standard name: iterator
25 10 3.0
Server
Node.js
@@iterator 0.12

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator