JavaScript iteration methods

In JavaScript, arrays are list-like objects whose prototype has functions and methods to perform bulk operations, mutations, and traversals. Arrays in JavaScript are dynamic and can contain a collection of elements of mixed types including strings, numbers, and objects:

const mixedTypes = [โ€˜Martinsโ€™, โ€˜๐Ÿฎโ€™, โ€™Samโ€™, [1, 2, 3], { name: โ€˜Davidโ€™ } ];

Arrays in JavaScript only use numbers as element index. One thing to note about arrays in JavaScript is that they arenโ€™t dense data structures. Instead, the length of the array can be changed at any time, and data can be stored at non-contiguous locations in the array (as opposed to statically typed languages where the length and element type is defined on initialization).

Iteration methods

Iteration methods are used to traverse an array and dynamically access elements of that array.

The following are JavaScript iteration methods:

every

Whether or not all the elements in the array pass the test implemented by the provided callback function, the every method will return a Boolean value (True/False).

const farm = [
{ name: 'cow', avatar: '๐Ÿฎ', type: 'animal'},
{ name: 'sheep', avatar: '๐Ÿ‘', type: 'animal'},
{ name: 'hen', avatar: '๐Ÿ”', type: 'animal'},
{ name: 'lettuce', avatar: '๐Ÿฅฌ', type: 'plant'},
{ name: 'mushroom', avatar: '๐Ÿ„', type: 'plant'}
];
const farmHasOnlyAnimals = farm.every(element => element.type === 'animal');
console.log(farmHasOnlyAnimals) // false

foreach

The forEach() method is used to loop over elements of an array, it takes in a callback function as an argument which, in turn, accepts 3 parameters (item, index, array).

  • โ€œitemโ€ is the current element in the iteration.
  • โ€œindexโ€ is the position of the current element in the iteration.
  • โ€œarrayโ€ is the array being traversed.
const farm = [
{ name: 'cow', avatar: '๐Ÿฎ', type: 'animal'},
{ name: 'sheep', avatar: '๐Ÿ‘', type: 'animal'},
{ name: 'hen', avatar: '๐Ÿ”', type: 'animal'},
{ name: 'lettuce', avatar: '๐Ÿฅฌ', type: 'plant'},
{ name: 'mushroom', avatar: '๐Ÿ„', type: 'plant'}
];
farm.forEach((item, index) => {
console.log(`${index + 1}. ${item.name}`)
});

find

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. It takes in a callback function as an argument.

const farm = [
{ name: 'cow', avatar: '๐Ÿฎ', type: 'animal'},
{ name: 'sheep', avatar: '๐Ÿ‘', type: 'animal'},
{ name: 'hen', avatar: '๐Ÿ”', type: 'animal'},
{ name: 'lettuce', avatar: '๐Ÿฅฌ', type: 'plant'},
{ name: 'mushroom', avatar: '๐Ÿ„', type: 'plant'}
];
const findCow = farm.find(element => element.avatar === '๐Ÿฎ');
console.log(findCow); // { name: 'cow', avatar: '๐Ÿฎ', type: 'animal' }โ€ˆ

map

The map method takes a callback function as an argument and returns a new array that contains the result of calling the callback function on each element of the original array.

const farm = ['๐Ÿฎ', '๐Ÿ‘', '๐Ÿ”'];
const plural = farm.map(element => `${element}s`);
console.log(plural); // [ '๐Ÿฎs', '๐Ÿ‘s', '๐Ÿ”s' ]โ€ˆ

Mutator methods, iteration methods, and accessor methods are the most common array methods in Javascript. You can use most of them in practical terms, others you can use together to perform complex data manipulation on JavaScript array objects.

You can find all the examples used here.