Categories
JavaScript

Array loops in JavaScript

Road loop with forest around

JavaScript Arrays is huge area, so we split this topic in multiple articles. If you haven’ t read part one you can read it: JavaScript Arrays – Manipulating data. This time we are covering array loops in Javascript and how to use loops to iterate over an arrays.

Loop is a code/function that runs until certain criteria is met. Loops are pretty useful when working with arrays, even though today we have many built-in methods that can help us in most of the situations. We will cover this in the next article.

Slice

Even though slice() method is not any type of loop we can use it to access one or more elements in array. Slice returns an array of element(s) without removing those elements from original array. Slice method uses similar syntax as splice() method.

let arr = [1, 2, "test", "bob", false, 33];

/*
    Get all elements from second to fifth, 
    not including fifth.
    REMEMBER: JavaScript is zero-based language
    that means that JS starts counting from 0
    not from 1
*/

let sliced = arr.slice(1, 4);
console.log(sliced);
//Output: [2, "test", "bob"];

If we omit second argument in slice, it will get the rest of the array from starting point.

let arr = [1, 2, "test", "bob", false, 33];

/*
    If we ommit second argument slice will
    return everything from starting position
    to the end.
*/

//This example will return everything from second
//argument to the end

let sliced = arr.slice(1);
console.log(sliced);
//Output: [2, "test", "bob", false, 33]

Length

Length property is one of the things that will, almost always, be somehow included in our array loop.

Length property returns an integer, number of elements in array, that is always greater than biggest index. Because, length property is one-based, meaning it counts from one, like humans, not from zero like normal JavaScript.

let arr = [1, 2, "test", "bob", false, 33];

let len = arr.length;
console.log(len);
//Output: 6

Loops

Okay, so finally loops. Loop is a function, method, way of going through each item in given parameter and “doing something with it.”

For loop

The most basic type of loop is for loop. Every programming language has it. Most of the times we will use it to loop through entire array, with the help of length, or through some part of it.

More on for loop here.

let arr = [1, 2, "test", "bob", false, 33];

/*
    We can save array length in a variable,
    so it is reusable if we need to use it in 
    some other places. 
    
    Also if we save it to variable js will only
    compute it once, it will not compute it every
    time it runs through the loop
*/

let len = arr.length;

/*
    We start our for loop
    For loop has following structure
    
    for (initialization; condition; final expression) { 
        code to be executed 
    }
*/

for (let i = 0; i < len; i++) {
    /*
        This code says: 
        Declare iterator limiter i
        For as long as i is less than array length
        Each round increase i by one
        
        So once i is equal to array length loop
        can stop executing
    */
    console.log(arr[i]);
    //This actually says print element of the array with index i
    
    /*
        Output: 
        1
        2
        test
        bob
        false
        33
    */
    
}
ForEach loop

Yeah, I know: Aren’ t those two the same? No, they are not. They do have a lot in common, but they also have they differences. E. g. There is no break out of the forEach, maybe if we throw an exception, but that is just not it. Also if array changes while forEach is running change will not be detected.

More on forEach loop here.

let arr = [1, 2, "test", "bob", false, 33];

/*
    Regarding the fact that forEach iterates
    over whole array we do not need length
    
    Structure of forEach looks like this
    array.forEach(function(element) { 
        console.log(element);
    });
*/

arr.forEach(function(el){
    /*
        This code says 
        Go over each item in array
        and console.log it
    */
    
    console.log(el);
    /*
        Output: 
        1
        2
        test
        bob
        false
        33
    */
})
While loop

While loop is for loop without first and third argument. Learn more about while loop here.

let arr = [1, 2, "test", "bob", false, 33];
let i = 0;

/*
    While loop does not require as much
    parameters as for loop, but we have to 
    declare iterator i so we can break out
    of the loop
    
    While loop has following structure
    
    while(condition) {
        code to run
    }
*/

while (arr[i]) {
    /*
        This code means
        While there is element in array arr
        under the number i continue loop
        and increment i.
        
        So when there is no more indexes, loop
        will stop running
        
        Also you will notice that even though
        there is false on index 4 it will 
        skip it, since it is false
    */
    console.log(arr[i]);
    
    /*
        Output: 
        1
        2
        test
        bob
        33
    */
    i++;
}

If you have any questions or anything you can find me on my Twitter, or you can read some of the older articles like How to select element(s) using vanilla JavaScript?