Course Overview

Overview of history of the JavaScript language

History of JavaScript

Overview of the relationship between JavaScript and Java

JavaScript vs Java

Overview of how JavaScript is evolved as a programming language

How is it evolved?

Overview of how we can track upcoming features in the JavaScript language

How to track upcoming features?

Overview of how the ECMAScript is versioned

How is ECMAScript versioned?

Explanation of whether JavaScript is interpreted or a compiled language

Is it interpreted or compiled?

Explanation of how JavaScript is executed

How is it executed?

Execution Context

Explanation of what is a callstack and how it is used in JavaScript

Callstack

Overview of memory management in JavaScript

Memory

What is JavaScript

What is hoisting?

Explanation of common misconception about hoisting in JavaScript

Misconception about hoisting

Hoisting

What is scope?

Explanation of global scope in JavaScript

Global scope

Explanation of function scope in JavaScript

Function scope

Block scope

Explanation of module scope in JavaScript

Module scope

Scope chain

Scope

What is coercion?

Diving into inner details of  coercion in JavaScript

Deeper look at coercion

Explanation of what abstract operations are and common types of abstract operations in JavaScript

Abstract operations

Explanation of how abstract or loose equality works in JavaScript

Abstract equality operator

Explanation of how the addition operator works in JavaScript

Addition operator

Explanation of how relational operators work in JavaScript

Relational operators

Coercion exercise for testing and practicing the knowledge learned in this module

Coercion exercise

Coercion

What is a closure?

Explanation of a common misconception about closures in JavaScript

Misconception about closures

Explanation of the problem of closures inside loops and how to fix it

Closures inside loops

Explanation of closures can be used to hide data

Data hiding using closures

Closures

What is prototypal inheritance?

Prototype chain

__proto__ property

Explanation of how we can create objects with custom prototypes in JavaScript

Custom prototypes

Explanation of how prototype chain is set with ES6 classes

ES6 classes and prototypes

Prototypes

Explanation of this keyword in JavaScript

What is this?

Explanation of how "this" works inside arrow functions

Arrow functions and "this"

Explanation of how value of "this" can be set explicitly

Explicitly binding "this"

globalThis

Summarizing "this"

'this' keyword

What is a symbol?

Explanation of why symbols were added in JavaScript

Why symbols?

Symbols and privacy

Explanation of global symbols in JavaScript

Global symbols

Explanation of what well-known symbols are in JavaScript

Well-known symbols

Symbol

Overview of asynchronous behavior of JavaScript

Overview

Overview of how callbacks help us write asynchronous code in JavaScript

Callbacks

Event loop

Promise

Explanation of promise chaining in JavaScript

Promise chaining

Explanation of some static methods of promises and their use cases

Use cases for static Promise methods

Explanation of async-await syntax in JavaScript

async await

Explanation of microtasks, how they are processed, and how they are linked to promises

Microtasks

Explanation of common anti-patterns to avoid when using promises in JavaScript

Promise anti-patterns

Asynchronous JavaScript

Explanation of what is an iterator in JavaScript

Iterators

Explanation of what is a generator in JavaScript

Generators

Explanation of how we can create asynchronous iterators in JavaScript

Asynchronous iterators

Explanation of how we can create asynchronous generators in JavaScript

Asynchronous generators

Iterators and Generators

Overview of what is debugging and different ways to debug JavaScript

Debugging

Overview of using the "debugger" statement to debug JavaScript

Debugger statement

Overview of using the breakpoints in browser developers' tools to debug JavaScript

Breakpoints in browser

Overview of using the VS Code debugger to debug JavaScript

VS Code debugger

Debugging JavaScript

Final thoughts and advice regarding how to continue the exciting journey of learning JavaScript

Conclusion

Wrap up

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

300+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

Become a confident JavaScript pro by unraveling the most challenging aspects of the language. With easy-to-understand explanations and code examples, you’ll gain a deeper and solid understanding of JavaScript's most complex features.

Advanced JavaScript Unleashed is for beginner and intermediate developers alike, who want to elevate their JavaScript skills and become senior engineers by gaining a deeper understanding of the core topics of the language.

Advanced JavaScript Unleashed

Built-in objects like arrays can be iterated over using the 

 loop. Instead of iterating over an array with a simple 

 loop where we have to access the value using an index, increment the index after each iteration, and also know when to end the iteration so that we don't access indexes that are out of bounds, with 

 loop, everything is handled for us. We don't have to worry about the indexes or the loop termination condition.

const arr = [1, 2, 3];

for (const num of arr) {
  console.log(num);
}

Here's a Replit where you can run the above code:

 loop help us iterate over an array? How does it know when to end the iteration?

To understand this, we need to understand the following two concepts:

Iterable is an object that implements the 

. According to the iterable protocol, an object is iterable if it defines the iteration behavior that can be used by the 

 loop to iterate over the values in the object. The object can implement a method that is referred to by the property represented by 

; it is one of the well-known symbols to define the iteration behavior. The well-known symbols were discussed in the module related to symbols.

In the case of arrays, this method is defined in the 

 object. This method defines the iteration behavior that is appropriate for arrays. Other objects can also implement this method to define an iteration behavior that is appropriate for them.

 return that can be used by constructs like 

 loop to iterate over an object? It returns an iterator object.

Iterators are objects that implement the 

. According to the iterator protocol, an object is an iterator if it implements a method named 

 that takes zero or one argument and returns an object with the following properties:

The following are examples of iterator objects with the above mentioned properties:

{ value: 45, done: false }

// or

{ value: undefined, done: true }

 loop, it internally gets the iterator from the array and keeps calling its 

 method until the iterator has returned all values. With the 

 loop, we use the iterator indirectly. We can also use the iterator directly. Arrays are iterables, and we know that iterables implement the 

 method that returns the iterator object that contains the 

 method. The following code example shows how we can get the array iterator and use it directly to get the values in the array:

const arr = [2, 4, 6, 8, 10];

// get the array iterator object
const arrayIterator = arr[Symbol.iterator]();

// get the first iterator result object
let result = arrayIterator.next();

// keep getting new iterator result objects
// until the "done" property of the iterator
// result object is false
while (!result.done) {
  console.log(result.value);
  result = arrayIterator.next();
}

/*
2
4
6
8
10
*/

 provides iterators that define a specific iteration behavior for the iterable object. The following is an example of using the 

const myMap = new Map();
myMap.set("a", 1);
myMap.set("b", 2);
myMap.set("c", 3);

// get the array iterator object
const mapIterator = myMap[Symbol.iterator]();

// get the first iterator result object
let result = mapIterator.next();

// keep getting new iterator result objects
// until the "done" property of the iterator
// result object is false
while (!result.done) {
  console.log(result.value);
  result = mapIterator.next();
}

/*
["a", 1]
["b", 2]
["c", 3]
*/

---
title: Iterators
description: Explanation of what is an iterator in JavaScript
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/advanced-javascript-unleashed-app/-/tree/main/module_10/lesson_10.01
---

Built-in objects like arrays can be iterated over using the [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) loop. Instead of iterating over an array with a simple `for` loop where we have to access the value using an index, increment the index after each iteration, and also know when to end the iteration so that we don't access indexes that are out of bounds, with `for...of` loop, everything is handled for us. We don't have to worry about the indexes or the loop termination condition.

```js
const arr = [1, 2, 3];

for (const num of arr) {
  console.log(num);
}
```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/iterators-example1" />

How does `for...of` loop help us iterate over an array? How does it know when to end the iteration?

To understand this, we need to understand the following two concepts:

-   Iterables
-   Iterators

## Iterables

Iterable is an object that implements the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol). According to the iterable protocol, an object is iterable if it defines the iteration behavior that can be used by the `for...of` loop to iterate over the values in the object. The object can implement a method that is referred to by the property represented by [Symbol.iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator); it is one of the well-known symbols to define the iteration behavior. The well-known symbols were discussed in the module related to symbols.

In the case of arrays, this method is defined in the `Array.prototype` object. This method defines the iteration behavior that is appropriate for arrays. Other objects can also implement this method to define an iteration behavior that is appropriate for them.

What does the `Symbol.iterator` return that can be used by constructs like `for...of` loop to iterate over an object? It returns an iterator object.

## Iterators

Iterators are objects that implement the [iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol). According to the iterator protocol, an object is an iterator if it implements a method named `next` that takes zero or one argument and returns an object with the following properties:

-   `done`: indicates whether the iterator can produce or return another. If it can, its value is `false`, otherwise, `true`. The `true` value is the same as omitting this property in the object returned by the `next` method.
-   `value`: the value returned by the iterator object. This property can be omitted or its value can be `undefined` if the value of the `done` property is `true`.

The following are examples of iterator objects with the above mentioned properties:

```js
{ value: 45, done: false }

// or

{ value: undefined, done: true }
```

When we iterate over an array using the `for...of` loop, it internally gets the iterator from the array and keeps calling its `next` method until the iterator has returned all values. With the `for...of` loop, we use the iterator indirectly. We can also use the iterator directly. Arrays are iterables, and we know that iterables implement the `Symbol.iterator` method that returns the iterator object that contains the `next` method. The following code example shows how we can get the array iterator and use it directly to get the values in the array:

```js
const arr = [2, 4, 6, 8, 10];

// get the array iterator object
const arrayIterator = arr[Symbol.iterator]();

// get the first iterator result object
let result = arrayIterator.next();

// keep getting new iterator result objects
// until the "done" property of the iterator
// result object is false
while (!result.done) {
  console.log(result.value);
  result = arrayIterator.next();
}

/*
2
4
6
8
10
*/
```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/iterators-example2" />

Each [built-in iterator object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator#description) provides iterators that define a specific iteration behavior for the iterable object. The following is an example of using the `Map` object's iterator directly:

```js
const myMap = new Map();
myMap.set("a", 1);
myMap.set("b", 2);
myMap.set("c", 3);

// get the array iterator object
const mapIterator = myMap[Symbol.iterator]();

// get the first iterator result object
let result = mapIterator.next();

// keep getting new iterator result objects
// until the "done" property of the iterator
// result object is false
while (!result.done) {
  console.log(result.value);
  result = mapIterator.next();
}