Categories
Bootstrap HTML

How to Manipulate and Iterate Arrays in JavaScript

Spread the love

Iterating Array

For Loop

The for loop is one of the most basic loops for looping through an array. It takes a starting index and then loops through to the ending index. Index must be an integer.

Example:

const array = [1,2,3];
for (let i = 0; i < array.length; i++){
  console.log(i);
}

The loop above should log all the numbers in the array.

Indexes do not have to be consecutive:

const array = [1,2,3];
for (let i = 0; i < array.length; i+=2){
  console.log(i);
}

The loop above will skip every second number.

While Loop

while loop will loop whenever a condition stays true.

For example, the loop below will run if the index number i is less than three:

const array = [1,2,3];

let i = 0;
while(i < array.length){
  console.log(i);
}

If the condition in the parentheses is never true, then the loop content will never run.

Do While Loop

do...while loop will always execute the first iteration.

const array = [1,2,3];

let i = 0;
do{
  console.log(i);
}
while(i < array.length)

In the example above, it will at least log 0, but it will also log 1 and 2 in this case since those two numbers are less than three.

With the above loops, you can call break to stop the loop or return before the loop is completely finished.

//do while loop
const array = [1,2,3];

let i = 0;

do{
  console.log(i);

  if (i == 1}{

    break;

  }

}
while(i < array.length)

//while loop
i = 0;

while(i < array.length){

  if (i == 1{

    break;

  }
  console.log(i);
}

//for loop
for (let j = 0; j < array.length; j++){

  if (j == 1){
    break;
  }
  console.log(j);
}

In the above examples, you will not see two logged.

An example of returning from within the loop:

const loop = ()=>{
  const array = [1,2,3];

  for (let j = 0; j < array.length; j++){

    if (j == 1){
      return j;
    }
    console.log(j);
  }
}
loop() //returns 1

You can also skip iterations with continue statement:

const array = [1,2,3];
for (let j = 0; j < array.length; j++){

  if (j == 1){
    continue;
  }
  console.log(j) // 1 will be skipped;
}

Array.forEach

forEach will iterate through every entry of the array. You cannot break out of it or return a value from it. It takes a callback function where you can execute code.

Example:

const array = [1,2,3];
array.forEach(a =>{

  console.log(a);
})

In the above example, all the numbers in the array will be logged.


Find Element in Array

Array.find

Array.find will return the element in the array with the given condition. For example, if you want to get certain numbers from the array, you do:

const array = [1,2,3];
const num = array.find(a => a == 2); // returns 2

find returns a single result.

Array.findIndex

Array.findIndex will return the index of the element in the array with the given condition. It takes a callback function that returns a given condition. For example, if you want to get the index of a certain numbers from the array, you do:

const array = [1,2,3];
const num = array.findIndex(a => a == 2); // returns 1

Array.filter

Array.filter will return an array of items that meet the given condition. It takes a callback function that returns a given condition. filter returns a new array.

For example, if you want to get the index of a certain numbers from the array, you do:

const array = [1,2,3];
const numArray = array.filter(a => a == 2); // returns [2]

Check if Element Exists in Array

Array.includes

Array.includes checks if an item exists in an array. It takes a number or string which the function can compare.

const array = [1,2,3];
const includesTwo = array.includes(2); // returns true

Array.some

Array.somechecks if some items meet the condition given. It takes a callback function which returns a boolean for the condition.

const array = [1,2,3];
const includesTwo = array.some(a => a == 2); // returns true
const includesFive = array.some(a => a == 5); // returns false

Array.every

Array.every checks if every item meet the condition given. It takes a callback function which returns a boolean for the condition.

const array = [1,2,3];
const everyElementIsTwo = array.`every`(a => a == 2); // returns false
const everyElementIsNumber = array.`every`(a => typeof a == 'number'); // returns true since every item in the array is a number

Check If an Object Is an Array

Array.isArray

Array.isArray checks if an object given is an array. It is a convenient way to check if an element is an array.

const array = [1,2,3];

const notArray = {};
let objIsArray = Array.isArray(array); // true
objIsArray = Array.isArray(notArray); // false

Remove Duplicates in Array

Array.from(new Set(array))

Set is a object that cannot have duplicate entries. You can create a new Set from an array then convert it back to an array.

const array = [1,2,2,3];
const arrayWithDups = Array.from(new Set(array)); //returns new array without duplicates, [1,2,3]

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *