[Javascript] How to Iterate through Lists in JavaScript

Here is a basic way to iterate through a list in JavaScript:

const list = [1, 2, 3];
for (var i = 0 ; i < list.length ; i++){
	console.log(list[i]);
}

Alternatively, you can use the of keyword instead of using an index:

 

const list = [1,2,3]
for(const item of list){
	console.log(item);
}

for (const a of arr) console.log(a); // You can also use inline syntax

You can create arrays using square brackets [ ], but you can also create iterable objects using Set or Map. 

 

const set = new Set([1,2,3]);
const map = new Map([['a', 1],['b', 2],['c', 3]]);

While you can iterate over these objects using for or forEach, accessing them by index (e.g., set[0], map[0]) is not possible. This is because they are implemented using symbols internally, unlike arrays.

If you check set[Symbol.iterator] or map[Symbol.iterator], you will see that they return functions.

set[Symbol.iterator]
>> ƒ values() { [native code] }

map[Symbol.iterator]
>> ƒ entries() { [native code] }

As evidence, if you assign null to set[Symbol.iterator], you will encounter an error stating that set is not iterable, and the iteration will not work (the same applies to map).

The behavior of this function can be understood by observing its output:

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const values = map.values();
>> undefined
values
>> MapIterator {1, 2, 3,}
const values2 = values[Symbol.iterator]();
>> undefined
values2.next(); // Access is now possible with next()
>> {value: 1, done: false}
values3.next()
>> {value: 2, done: false}
values3.next()
>> {value: 3, done: false}
values3.next()
>> {value: undefined, done: true}
values3.next()
>> {value: undefined, done: true}

The output will be {value: 1, done: false} followed by {value: undefined, done: true} when the iteration is complete.

In this case, value represents the iterable object, which contains a generator that generates the values sequentially. values2 is referred to as an iterator, which has the next() method that returns an object with the value and completion status.

Such objects can be used with for...of or other spread operators.

The spread operator ... can also be used:

const list = [1, 2, 3];
const set = new Set([1, 2, 3]);
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

console.log([...list]); // Prints: 1 2 3
console.log([...list, 4, 5]); // Prints: 1 2 3 4 5
console.log(...map, ...set, 4, 5); // Prints: (2) ["a", 1] (2) ["b", 2] (2) ["c", 3] 1 2 3 4 5
console.log(...set, ...map.keys()); // Prints: 1 2 3 "a" "b" "c"
console.log(...set, ...map.values()); // Prints: 1 2 3 1 2 3
console.log(...set, ...map.entries()); // Prints: 1 2 3 (2) ["a", 1] (2) ["b", 2] (2) ["c", 3]

You can utilize the spread operator in various ways.

Another interesting use of the spread operator is demonstrated below:

const [a, ...b] = [1, 2, 3, 4, 5];
console.log(a); // Prints: 1
console.log(b); // Prints: (4) [2, 3,