The JS for()wer Rangers — never more use the classic for loop

for()wer Rangers pic

First i want to say that this post is about “for loops” used to run into an array. So in another cases perhaps the classic “for loop” can be better. And even in array, if for example has a lot of “blank” elements with classic for loop you can specified to run in just a part of the array, grantting performance.

This post is about regular arrays with all elements filled.

Let’s remember the classic for loop:

var array = [1, 2, 3];
for(var i = 0; i < array.length; i++){
//some code using array[i]
}

To know in what situation each type of array is usefull you need to ask a simple question:

What outcome do i want from this array?

Let’s use this array: var array = [1, 2, 3];.

1. I want to change all elements into another ones, using their owns as parameters.

array.map(doubleValues);
function doubleValues(value){
return value*2;
}
//[2, 4, 6]
//A little trick here, instead the code above you can do "arrow function style":
array.map((e) => e *2 );
//[2, 4, 6]
PS: This is amazing!

or maybe if is a string array:

var notherArray = ["cecilia", "lorena", "martha"];
anotherArray.map(makeUpperCase);
function makeUpperCase(value){
return value.toUpperCase();
}
//["CECILIA", "LORENA", "MARTHA"];

2. I want to make a smaller array with just some elements from the original.

array.filter(biggerThanFive);
function biggerThanFive(value){
return value > 1;
}
//[2, 3]

3. I want to manipulate the elements but also indexes.

function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
array.forEach(logArrayElements);
// a[0] = 1
// a[1] = 2
// a[2] = 3

4. I want to reduce the array to a single value.

array.reduce(someValues);
function someValues(previousValue, currentValue, index, array) {
return previousValue + currentValue;
});
//6;

Or reduce a bi-dimensional array to a single dimensional one.

var reduced = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
});
// [0, 1, 2, 3, 4, 5]

5. I want to find an element.

function isBigEnough(element) {
return element >= 2;
}
array.find(isBigEnough); 
// 2
PS: The find function stops at the first element that fill in the callback request.

You can even look into an object’s array:

var inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
function findCherries(fruit) { 
return fruit.name === 'cherries';
}
console.log(inventory.find(findCherries)); 
// { name: 'cherries', quantity: 5 }

6. I want to interate in all elements like a classic for loop(without a callback function).

for (let value of array) {
console.log(value);
}
//1
//2
//3

The “for of” is so powerfull that even in a bi-dimensional array it can rock!

var anotherArray = [["first", 1], ["second", 2], ["third", 3]];
for (let [key, value] of anotherArray) {
console.log(value);
}
// 1
// 2
// 3

And if you want to make a loop in an object:

//Object
var obj = {a:1, b:2, c:3};
//To prop (proprierty) in obj (object) do
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

To know more access MDN docs.

Follow me on github.

Did you find something wrong? please comment.