KandZ – Tuts

We like to help…!

JavaScript 14 🧬 loops part 2

a - for...in loop
for...in loop is used to iterate over the enumerable properties of an object.
It's particularly useful when you want to access all keys or property names of an object.
syntax

for (let key in object) {
// some code
}

key is a variable that will take on each enumerable property name as the loop runs.
object is the object you're iterating over.
The loop only iterates over enumerable properties. This means it won't include non-enumerable properties
for...in loops iterate in a specific order: first numeric keys in ascending order, then string keys in the order they were added, followed by symbol keys.
it's generally better to use for loops or array methods like .forEach()
for (let key in person) { } → key variable takes on the name of the current property (firstName, lastName, or age).
for (let key in arr) { } → iterates over both the array indices and the manually added property.

b - for...of loop
for...of loop is used to iterate directly over iterable objects such as arrays, strings, maps, sets etc
This loop provides a more concise and readable way to traverse these collections.
syntax

for (let element of iterable) {
// code block executed for each element
}

element → A variable that will take on the value of each item in the iterable.
iterable → An object that can be iterated over using an iterator, such as arrays, strings, maps, sets, etc.
for (let fruit of fruits) { } → The variable fruit takes on the value of each element in turn.
for (let char of greeting) { } → The variable char takes on the value of each character in turn.
for (let [key, value] of map) { } → The for...of loop iterates over each entry in the map.
for (let item of set) { } → The variable item takes on the value of each element in turn.

c - for...in vs for...of
for...in is designed to iterate over the properties of an object, making it suitable for objects themselves or arrays when you need access to index keys.
for...of focuses on iterating over iterable objects where the values are more meaningful than their indices.
for...in includes all enumerable properties, including those from the object's prototype chain. This can lead to unexpected results if not handled carefully.
for...of only iterates over the object's own iterable values and does not traverse up the prototype chain.
Using for...in for arrays can make your code less clear because it implies a focus on indices rather than values.
for...of clearly conveys that you intend to iterate over the values of an iterable collection, enhancing readability.
Use for...in:
When iterating over object properties (including their keys).
If you need both keys and values from objects or arrays (though this is less common with arrays).
Use for...of:
When iterating over arrays, strings, maps, sets, or other iterable collections where the actual values are of primary interest.
For cleaner, more predictable code when working with iterables.

Leave a Reply