(ง •̀_•́)ง Ming's blog

Looping in JavaScript

References

Content

Other

for…in

The for...in loop below iterates over all of the object’s enumerable, non-Symbol properties and logs a string of the property names and their values. for...in should not be used to iterate over an Array where the index order is important.

var obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
 console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for…of

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

function* foo() {
 yield 1;
 yield 2;
}
for (let o of foo()) {
 console.log(o);
 // expected output: 1
 break; // closes iterator, triggers return
}

//array
let iterable = [10, 20, 30];

for (let value of iterable) {
 value += 1;
 console.log(value);
}
// 11
// 21
// 31

//string
let iterable = "boo";

for (let value of iterable) {
 console.log(value);
}
// "b"
// "o"
// "o"

Object

Object.entries

const object1 = {
 a: "somestring",
 b: 42
};
for (let [key, value] of Object.entries(object1)) {
 console.log(`${key}: ${value}`);
}
// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed

Object.keys

const object1 = {
 a: "somestring",
 b: 42,
 c: false
};
console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

Object.values

const object1 = {
 a: "somestring",
 b: 42,
 c: false
};
console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

Array

map

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

forEach

var array1 = ["a", "b", "c"];
array1.forEach(function(element) {
 console.log(element);
});
// expected output: "a"
// expected output: "b"
// expected output: "c"

reduce

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); // expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // expected output: 15