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.
