Top community members
All Wiki Articles Create Wiki Article

Have you ever heard about encyclopedia for code?

What about: Wiki for Code project?

* because I've tried to share code and my solutions on different services and it was removed or I was unwelcomed
   - maybe it wasn't good place, but this one is.

if you think you have solution that can help someone, you are welcome to share this solution - Click here

JavaScript - how to use foreach?

0 contributions
4 points

In this article, we're going to have a look at how to use for-each loop in JavaScript.

Quick solution:

// ONLINE-RUNNER:browser;

var array = ['item 1', 'item 2', 'item 3'];

array.forEach(function(item, index) {
    console.log('index ' + index + ': ' + item);
});

// or

for(var item of array) {
    console.log(item);
}

There are 3 ways how we can do it:

  • for-of¬†loop¬†to work with arrays,
  • for-in¬†loop to work with arrays and¬†objects,
  • forEach¬†method to work with arrays.

See below examples to see practical examples.

1. for-each with arrays examples

This section shows how to use shortened loop construction iterating over arrays.

1.1. for-of loop example

This section shows how to use for-of loop construction to iterate over array.

// ONLINE-RUNNER:browser;

var array = ['item 1', 'item 2', 'item 3'];

for(var item of array) {
    console.log(item);
}

Note: for-of loop was introduced in ES6 (ECMAScript 2015).

1.2. for-in loop example

This section shows how to use for-in loop construction to iterate over array.

// ONLINE-RUNNER:browser;

var array = ['item 1', 'item 2', 'item 3'];

for(var key in array) {
    if(array.hasOwnProperty(key)) {
        console.log(array[key]);
    }
}

Note: using for-in loop with array is risky because of possible additional array properties.

1.3. forEach method example

This section shows how to use forEach method to iterate over array.

// ONLINE-RUNNER:browser;

var array = ['item 1', 'item 2', 'item 3'];

array.forEach(function(item, index) {
    console.log('index ' + index + ': ' + item);
});

Note: Array.prototype.forEach method was introduced in ES5 (ECMAScript 2009).

2.  for-in with objects examples

This section shows how to use for-in loop construction to iterate over object properties. It is very important to use hasOwnProperty method to check if each property is part of iterated object.

// ONLINE-RUNNER:browser;

var object = {
    'key 1': 'value 1',
    'key 2': 'value 2',
    'key 3': 'value 3'
};

for (var key in object) {
    if (object.hasOwnProperty(key)) {
        let value = object[key];

        console.log(key + ': ' + value);
    }
}
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more