Comparing JavaScript Looping Methods: for, forEach, map, for...in, and for...of

JavaScript offers several ways to traverse arrays, objects, strings, and other iterable structures, each with distinct semantics and performance implications.

Traditional for Loop

The classic for loop is the fastest because it has no extra function calls or context. It is ideal when you need the index and full control over the iteration.

let arr = [1,2,3];
for(let i = 0; i < arr.length; i++){
    console.log(i);               // index
    console.log(arr[i]);          // element
}

let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i = 0, keys = Object.keys(profile); i < keys.length; i++){
    console.log(keys[i]);          // key
    console.log(profile[keys[i]]); // value
}

let str = "abcdef";
for(let i = 0; i < str.length; i++){
    console.log(i);               // index
    console.log(str[i]);          // character
}

let articleParagraphs = document.querySelectorAll('.article > p');
for(let i = 0; i < articleParagraphs.length; i++){
    articleParagraphs[i].classList.add("paragraph");
}

forEach

Introduced in ES5, forEach executes a callback for each existing array element (sparse slots are skipped). It cannot be broken out of with break or continue and always returns undefined .

let arr = [1,2,3];
arr.forEach(i => console.log(i)); // logs 1 2 3

let profile = {name:"April",nickname:"二十七刻",country:"China"};
let keys = Object.keys(profile);
keys.forEach(i => {
    console.log(i);               // key
    console.log(profile[i]);       // value
});

map

map creates a new array by applying a callback to each element of the original array, leaving the source unchanged. The returned array can be chained with other array methods such as reduce , filter , etc.

let arr = [1,2,3,4,5];
let res = arr.map(i => i * i);
console.log(res); // [1,4,9,16,25]

let arr = [1,2,3,4,5];
let sum = arr.map(item => item * item).reduce((total, value) => total + value);
console.log(sum); // 55

for...in Enumeration

Also from ES5, for...in enumerates all enumerable properties of an object, including those inherited from the prototype chain, in an arbitrary order. It is not recommended for array traversal because indices are treated as strings.

let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i in profile){
    let item = profile[i];
    console.log(item); // value
    console.log(i);    // key
}

let arr = ['a','b','c'];
for(let i in arr){
    console.log(arr[i]); // element
    console.log(i);     // index (as string)
}

let str = "abcd";
for(let i in str){
    console.log(str[i]); // character
    console.log(i);    // index (as string)
}

for...of Iteration

Introduced in ES6, for...of works on any iterable (Array, Map, Set, String, TypedArray, arguments, etc.). It reads values directly, can be interrupted with break , and is preferred when the index is not required.

let arr = ['a','b','c'];
for(let item of arr){
    console.log(item);
}

let str = "abc";
for(let value of str){
    console.log(value);
}

let iterable = new Map([["a",1],["b",2],["c",3]]);
for(let entry of iterable){
    console.log(entry); // [key, value]
}

let iterable = new Set([1,1,2,2,3,3,4]);
for(let value of iterable){
    console.log(value); // 1 2 3 4
}

let typeArr = new Uint8Array([0x00, 0xff]);
for(let value of typeArr){
    console.log(value);
}

(function(){
    for(let argument of arguments){
        console.log(argument);
    }
})(1,2,3);

Breaking and Continuing

Only the classic for , for...in , and for...of statements support break and continue . The callback‑based forEach and map cannot be exited early; attempting to use break inside their callbacks is illegal, and return only returns from the callback, not from the outer loop.

Performance Ranking (empirical)

for – fastest, no extra call stack.

for...of – fast for any iterable, reads values directly.

forEach – slower due to function call overhead and additional arguments.

map – slowest because it creates a new array of the same length.

for...in – slower due to enumerating prototype properties and string‑key conversion.

Choosing the Right Method

• Use map when you need to transform an array into a new one. • Use forEach or for...of for simple traversal; for...of also allows early exit. • Use for...in for enumerating object properties (prefer hasOwnProperty to filter prototype keys). • For strings, array‑like objects, or typed arrays, for...of is generally the most convenient. Balancing semantics, readability, and performance leads to better‑maintained code.