Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
Last active October 1, 2020 08:01
Show Gist options
  • Save cferdinandi/42f985de9af4389e7ab3 to your computer and use it in GitHub Desktop.
Save cferdinandi/42f985de9af4389e7ab3 to your computer and use it in GitHub Desktop.
A simple forEach() implementation for Arrays, Objects and NodeLists. Forked from ForEach.js by Todd Motto. https://github.com/toddmotto/foreach

A simple forEach() implementation for Arrays, Objects and NodeLists that takes away repetitive object lookups and array notations. Pass in any type and it'll iterate and pass back all the necessary goods such as index, element, property, value and object. The syntax is a simple function wrapper.

forEach() for Arrays/NodeLists

You can loop over an Array or NodeList using a standard for loop, however, NodeLists cannot be used in conjunction with the newer ECMAScript 5 Array.prototype.forEach. This script takes care of that in the same way it loops over an Array, you'll get the same stuff passed back:

// Array:
forEach(['A', 'B', 'C', 'D'], function (value, index) {
	console.log(value); // A, B, C, D
	console.log(index); // 0, 1, 2, 3
});

// NodeList:
forEach(document.querySelectorAll('div'), function (value, index) {
	console.log(value); // <div>, <div>, <div>...
	console.log(index); // 0, 1, 2...
});

forEach() for Objects

Object iteration is usually done via a for in loop, we can wrap this up by passing back values which makes our loops cleaner and easier to manage:

// Object:
forEach({ name: 'Todd', location: 'UK' }, function (value, prop, obj) {
	console.log(value); // Todd, UK
	console.log(prop); // name, location
  	console.log(obj); // { name: 'Todd', location: 'UK' }, { name: 'Todd', location: 'UK' }
});

collection

Type: Array|Object|NodeList

Collection of items to iterate, could be an Array, Object or NodeList.

callback

Type: Function

Callback function for each iteration.

context

Type: Array|Object|NodeList Default: null

Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback.

/**
* A simple forEach() implementation for Arrays, Objects and NodeLists
* @private
* @param {Array|Object|NodeList} collection Collection of items to iterate
* @param {Function} callback Callback function for each iteration
* @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
*/
var forEach = function (collection, callback, scope) {
if (Object.prototype.toString.call(collection) === '[object Object]') {
for (var prop in collection) {
if (Object.prototype.hasOwnProperty.call(collection, prop)) {
callback.call(scope, collection[prop], prop, collection);
}
}
} else {
for (var i = 0, len = collection.length; i < len; i++) {
callback.call(scope, collection[i], i, collection);
}
}
};
@unlocomqx
Copy link

I used it to iterate through objects, works great!

@MajorBarnulf
Copy link

hey, thanks, pretty handy if I do say so myself
(never had issues with this one)

Copy link

ghost commented Sep 14, 2020

You can use for of in line 16

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment