DEV Community

loading...
Cover image for Loop and iteration in javascript with example

Loop and iteration in javascript with example

eavnitech
A Full stack developer(7+ years experience), love to work on js, angular, nodejs, reactjs, nextjs, gatsby.
Originally published at eavnitech.com Updated on ・3 min read

Hello all, today we will learn the ways to iterate the array & object in the javascript.
Loop are the basic way to iterate the array & object.

1. Map

map is used to iterate the array elements & you can perform any operation on the element of the array like addition, subtraction, multiplication, division etc.
it takes a callback function to iterate the array and return a new array.

Syntax

[].map(callback);

Enter fullscreen mode Exit fullscreen mode

Example

let array = [10,20,30,40,50];


let returnValue = array.map((element) => element*10);

console.log(returnValue);

// output 
[ 100, 200, 300, 400, 500 ]

// in the map function we are multiplication 10 to every element.

Enter fullscreen mode Exit fullscreen mode

2. forEach

forEach is used to iterate the array elements & it takes a callback function that will be called with each iteration of the array elements.

Syntax


[].forEach(function(currentValue, index, arr), thisValue)

`currentValue` -> The value of the current element
`index` -> The array index of the current element
`arr` -> The array object the current element belongs to
`thisValue` -> A value to be passed to the function to be used as its "this" value.
If this parameter is empty, the value "undefined" will be passed as its "this" value


Enter fullscreen mode Exit fullscreen mode

Example

let array = [10,20,30,40,50];


array.forEach((value, index, arr) => console.log(value, index, arr));

// output

10 0 (5) [10, 20, 30, 40, 50]
20 1 (5) [10, 20, 30, 40, 50]
30 2 (5) [10, 20, 30, 40, 50]
40 3 (5) [10, 20, 30, 40, 50]
50 4 (5) [10, 20, 30, 40, 50]
undefined

Enter fullscreen mode Exit fullscreen mode

The undefined is the returned value of the forEach() call.

3. for

for loop is the most basic and used loop in the programming language.

for( initialization; condition; increment/decrement){

    // Your logic
}

Enter fullscreen mode Exit fullscreen mode

Example

let array = [10,20,30,40,50];
for(let i=0; i< array.length; i++){
    console.log(array[i]);
}

// output
10
20
30
40
50

Enter fullscreen mode Exit fullscreen mode
  • it is the fastest loop as compared to other loops
  • it is an in-built loop and does not take any callback
  • it is used to iterate the large size of the array
  • We can use the break keyword to stop the iteration of the array

4. while

while loop executes the logic(code) once the condition is true.


// define any variable
while(condition){
    // your logic
    // increment/decrement the variable
}

Enter fullscreen mode Exit fullscreen mode

Example

let array = [10,20,30,40,50];
let index = 0;
while (index < array.length) {
    console.log(array[index]);
    index++;
}


// output

10
20
30
40
50
Enter fullscreen mode Exit fullscreen mode

5. Do while

do-while loop executes the statement block atlease once the condition is false i.e. it will execute the statement once either the condition is false.

do {
  // Your logic
}
while (condition);

Enter fullscreen mode Exit fullscreen mode

Example


let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// Output : "12345"

Enter fullscreen mode Exit fullscreen mode

6. for in

This is used to iterate the properties of the object.


var array = { fname:"John", lname:"Doe", age:25 };

for(let element in array){
    console.log(element, array[element]);
}


// output

fname John
lname Doe
age 25

Enter fullscreen mode Exit fullscreen mode
  • Easy to use
  • Syntax is very easy
  • Does not have any callback

7. for of

for of is used to iterate the array of object.

Syntax


for (variable of iterable) {
  // statement
}
Enter fullscreen mode Exit fullscreen mode

Example

let array = [10,20,30,40,50];

for(let element of array){
    console.log(element);
}

// output
10
20
30
40
50


Enter fullscreen mode Exit fullscreen mode
  • Easy to use
  • Syntax is very easy
  • Does not have any callback

Thank you :)

I will be happy to answer your queries on my Twitter handle Twitter

Discussion (0)