How to loop over an Array with JavaScript?

Question

I have a string that has data separated by a pipe character (|).

Example

var somestring = "data1|data2|data3";
var separated = somestring.split("|");

I know how to use the split() to separate each data.

However, I don't know how many pipes there will be in the resulting Array.

In jQuery or JavaScript, how do I loop over the array returned?

Answer 1

In jQuery or JavaScript, how do I loop through each separated variable?

You basically just need to iterate over the resulting Array.

jQuery

$.each loop

This method is easy to work with, and benefits in the variables used being encapsulated.

$.each(separated, function(index, chunk) {
    // `chunk` is each member of the array.
});

jsFiddle.

Of course, jQuery is JavaScript so any of the below methods will also work.

JavaScript

for loop

This is the recommended way.

for (var i = 0, length = separated.length; i < length; i++) {
    var chunk = separated[i];
    // `chunk` is each member of the array.
}

jsFiddle.

You'll notice too the length property is cached so it is not looked up on each iteration. Some browsers already optimise for this, however IE appears to still benefit from it cached. It only takes 5 seconds to do, so you may as well keep IE users happy too.

You may want to define i and chunk outside of the for loop, because JavaScript has no block scope (unless you're using let), and those variables will exist before (declaration hoisted) and after (no block scope).

for ( in ) loop

This loop is generally not recommended, as it should be used for iterating over object properties only, not array like member properties.

for (var chunk in separated) {
     if ( ! separated.hasOwnProperty(chunk)) {
         continue;
     }
     // `separated[chunk]` is each member of the array.   
}

jsFiddle.

This loop will loop over all properties up the prototype chain, so hasOwnProperty() must be used. For this reason it is not recommended for arrays.

for ( of ) loop

This loop is standardized in ECMA 6 and is able to loop over NodeLists and iterators.

for (var chunk of separated) {
     // `chunk` is each member of the array.   
}

jsFiddle

forEach() method

This method is an addition to the ECMA-262 standard. It's not available in IE8, but it can be shimmed relatively easily.

separated.forEach(function(chunk, index) {
     // `chunk` is each member of the array.   
});

jsFiddle.

Other specialised methods

If you're looking to iterate for a specific goal, it may be useful to use a specialised iterator. Keep in mind these also don't have the best browser support.

filter method

Creates a mew array of the elements which the associated callback returned truthy for.

separated.filter(function(element) {
    return +element > 255;
});

reduce method

Creates a new value based on reducing the elements of the array, from left to right.

separated.reduce(function(accumulator, element) {
    return accumulator.concat(element);
}, "");

See also the reduceRight method.

map method

Creates a new array, replacing each element with the returned value of the associated callback.

separated.map(function(element) {
    return element.substr(0, 1);
});

every method

Returns a boolean value of which is the result of every element in the array passing the test. This method short circuits, i.e. it returns whenever one element's callback doesn't return truthy.

separated.every(function(element) {
    return element.substr(0, 1) == "a";
});

some method

Returns a boolean value of which is the result of some element in the array passing the test. This method short circuits, i.e. it returns whenever one element's callback passes the test.

separated.some(function(element) {
    return element.substr(0, 1) == "a";
});

Answer 2

separated.length should be all you need.

Answer 3

str.split() returns an array of values, so in your example, since 'separated' is an array, you could:

for (var i=0, len=separated.length; i < len; i++) {
   // do something with separated[i]
}