Explanation of Array Iteration in JavaScript

Explanation of Array Iteration in JavaScript

Hello everyone, in this article we are going to talk about how can we iterate arrays in JavaScript. We are going to talk about different types of arrays in JavaScript.

Let's begin

Below list you can find the methods that we are going to talk about :
  • forEach calls a function for every element.
  • map creates another array with using given array.
  • filter uses a function to creates another array using a given condition over an array.
  • reduce uses a function to produce a result value from a given array with specified operation.
  • every uses a boolean type function to check every element passes the given condition. It returns true if all elements pass.
  • some uses a boolean type function to check some element passes the given condition. It returns true if at least one element passes.
  • IndexOf returns the first position of given searching element value.
  • lastIndexOf returns the last position of given searching element value.
  • includes returns the given searching element value is exist in array. It returns boolean.
  • find uses a boolean type function to return first element value which passes the given condition.
  • findIndex uses a boolean type function to return first element index which passes the given condition.
  • from creates an array from a given array-like object or an iterable object like strings.

Now let's start to make example about them one-by-one.

forEach()

We use forEach function to execute a task for every element in given array.


function printValues(value) {
  console.log(value);
}

var numbers = [1, 2, 3, 4, 5, 10];
numbers.forEach(printValues);
Output will be:

1
2
3
4
5
10

map()

We can create a new array from given array. Map function does not change the original array and it allows us to process the values of given array with in use callback function.

If there is null value in given array, these values will be 0 in new created array.


function calculateVal(value) {
  return value++;
}

var numbers = [1, 2, 3, null, 4, 5, 10, null];
const newNumbers= numbers.map(calculateVal);
console.log(newNumbers.toString());
Output will be

1,2,3,0,4,5,10,0

filter()

filter function creates another array with using a boolean type function. It checks the elements with this function. If it returns true, it means the element passed the condition and it creates new array with passed elements.


function isPositive(value) {
  return value >= 0;
}

var numbers = [1, -2, 3, -4, -5, 6, -7, 8];
var positives= numbers.filter(isPositive);
console.log(positives.toString());
Output will be

1,3,6,8

reduce()

We use reduce function to create one element from all element insde given array. We can also use reduceRight function to calculate elements from right-to-left.


function sum(total, value) {
  return total + value;
}

var numbers = [7, 77, 55, 3, 4, 61, 33];
var average= numbers.reduce(sum) / numbers.length;
console.log(average);
Output will be:

34.285714285714285

We can also give an initial value to start calculation from one number.


function sum(total, value) {
  return total + value;
}

var numbers1 = [7, 77, 55, 3, 4, 61, 33];
var numbers2 = [1, 17, 37, 9, 6, 39, 99];
var sumOfArrays = numbers2.reduce(sum, numbers1.reduce(sum));
console.log(sumOfArrays);
Output will be:

448

every()

We can check every element in the array for obeying the specified condition. We use a callback functions to check every element in array. If all of elements return true, function will return true.


function isPositive(value) {
  return value >= 0;
}

const numbers1 =  [1, -2, 3, -4, -5, 6, -7, 8];
var isAllPositive1= numbers1.every(isPositive);
const numbers2 =  [1, 2, 3, 4, 5, 6, 7, 8];
var isAllPositive2= numbers2.every(isPositive);
console.log(isAllPositive1);
console.log(isAllPositive2);
Output will be :

false
true

some()

We can check every element in the array for obeying the specified condition. We use a callback functions to check every element in array. If at least one element returns true, the function will return true.


function isNegative(value) {
  return value < 0;
}

const numbers1 =  [1, -2, 3, 4, 5, 6, -7, 8];
var hasNegative1 = numbers1.some(isNegative);
const numbers2 =  [1, 2, 3, 4, 5, 6, 7, 8];
var hasNegative2 = numbers2.every(isNegative);
console.log(hasNegative1);
console.log(hasNegative2);
Output will be :

true
false

IndexOf()

We can find the first index of given value in the given array. If not exist in the array it returns -1.


var strings = ["Burak", "Hamdi", "TUFAN", "The", "Code", "Program"];
console.log(strings.indexOf("TUFAN"));
console.log(strings.indexOf("TheCode"));
Output will be

2
-1

lastIndexOf()

We can find the last index of given value in the given array. If not exist in the array it returns -1.


var strings = ["Burak", "Hamdi", "TUFAN", "The", "Code", "Program", "TUFAN"];
console.log("First index : " + strings.indexOf("TUFAN"));
console.log("Last Index : " + strings.lastIndexOf("TUFAN"));
console.log(strings.indexOf("TheCode"));
Output will be

First index : 2
Last Index : 6
-1

includes()

We can check th given element value is exist in the given array. It returns boolean result.


var strings = ["Burak", "Hamdi", "TUFAN", "The", "Code", "Program"];
console.log(strings.includes("TUFAN"));
console.log(strings.includes("TheCode"));
Output will be

true
false

find()

Uses a boolean type function to return first element value which passes the given condition


function check(value) {
  return value > 33;
}

var numbers = [7, 77, 55, 3, 4, 61, 33];
var firstFound = numbers.find(check);
console.log(firstFound);
Output will be

77

findIndex()

Uses a boolean type function to return first element index which passes the given condition


function check(value) {
  return value > 33;
}

var numbers = [7, 77, 55, 3, 4, 61, 33];
var firstIndex = numbers.findIndex(check);
console.log(firstIndex);
Output will be

1

from

From function creates an array from a given array-like object or an iterable object like strings


var newArray = Array.from("THECODEPROGRAM");
console.log(newArray.toString());
Output will be:

T,H,E,C,O,D,E,P,R,O,G,R,A,M

That is all in this article.

Burak Hamdi TUFAN


Tags


Share this Post

Send with Whatsapp

Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment. Check your inputs!

Comments

  • There is no comment. Be the owner of first comment...