YouTipJsref Array Symbol Iterator
[ JavaScript Array object](#)
* * *
## Instance
Get the array's iterator object and loop through it:
```javascript
const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
for(const fruit of fruits){console.log(fruit); }
const fruitCopy = [...fruits];
console.log(fruitCopy);
[Try it »](#)
* * *
## Definition and Usage
`[Symbol.iterator]()` is a built-in method of JavaScript arrays that returns the default iterator of the array. This method makes arrays iterable objects that can be used by structures like `for...of` loops.
### What is an Iterator?
Before explaining the `[Symbol.iterator]()` method, we need to understand what an iterator is.
An iterator is a protocol in JavaScript that defines how to sequentially access elements in a collection. Any object that implements the iterator protocol can be used by JavaScript features like `for...of` loops, the spread operator (`...`), etc.
An iterator object must implement a `next()` method that returns an object containing two properties:
* `value`: The current value in the iteration
* `done`: A boolean indicating whether the iteration is complete
### Basic Syntax
```javascript
const iterator = array[Symbol.iterator]();
### Example Code
Let's look at a simple example:
## Instance
```javascript
const fruits = ['apple', 'banana', 'orange'];
// Get the array's iterator
const iterator = fruits[Symbol.iterator]();
console.log(iterator.next()); // { value: 'apple', done: false }
console.log(iterator.next()); // { value: 'banana', done: false }
console.log(iterator.next()); // { value: 'orange', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
In this example, we:
1. Created an array containing three fruits
2. Obtained the array's iterator through the `[Symbol.iterator]()` method
3. Called the iterator's `next()` method multiple times to retrieve each element in the array
* * *
## Practical Application Scenarios
### 1. Using for...of Loop
The `for...of` loop automatically calls the array's `[Symbol.iterator]()` method internally:
## Instance
```javascript
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
console.log(color);
}
// Output:
// red
// green
// blue
### 2. Using Spread Operator
The spread operator also relies on the iterator protocol:
## Instance
```javascript
const numbers = [1, 2, 3];
const copiedNumbers = [...numbers];
console.log(copiedNumbers); // [1, 2, 3]
### 3. Destructuring Assignment
Array destructuring also uses the iterator:
## Instance
```javascript
const [first, second] = ['a', 'b', 'c'];
console.log(first); // 'a'
console.log(second); // 'b'
* * *
## Customizing Array Iteration Behavior
Although it's rarely needed, you can override the array's default `[Symbol.iterator]()` method to customize iteration behavior:
## Instance
```javascript
const customArray = [1, 2, 3];
customArray[Symbol.iterator] = function() {
let index = this.length;
return {
next: () => {
index--;
return {
value: this,
done: index < 0
};
}
};
};
for (const num of customArray) {
console.log(num);
}
// Output:
// 3
// 2
// 1
In this example, we modified the iterator to iterate through the array from back to front.
* * *
## Comparison with Other Iteration Methods
### Difference from forEach()
* `forEach()` is an array method that executes a callback function for each element
* `[Symbol.iterator]()` returns an iterator object, providing more flexible control over the iteration process
### Relationship with keys()/values()/entries()
All these methods return iterators, but they have different purposes:
* `keys()`: Returns an iterator of array indices
* `values()`: Returns an iterator of array elements (same as `[Symbol.iterator]()`)
* `entries()`: Returns an iterator of index/value pairs
* * *
## Browser Compatibility
The `Array [Symbol.iterator]()` method is supported in the following environments:
* Chrome 38+
* Firefox 36+
* Edge 12+
* Safari 9+
* Opera 25+
* Node.js 0.12+
* * *
## Summary
The `Array [Symbol.iterator]()` method is key to making JavaScript arrays implement the iterable protocol. Understanding how this method works can help you:
1. Gain a deeper understanding of JavaScript's iteration mechanism
2. Write more efficient iteration code
3. Customize iteration behavior when needed
Remember, in most cases you don't need to call this method directly because `for...of` loops and other language features handle it internally. However, understanding how it works will make you a better JavaScript developer.
[ JavaScript Array object](#)