The Array Iterators Cheatsheet for JavaScript

Iterators are methods that are called on arrays to manipulate elements and return some values.The most frequently used iteration methods are forEach(), filter(), map(), reduce(),every(), some(), find() , findindex().

forEach() Method

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).

        
const person = [
  { name: 'John',  job: 'Software engineer'},
  { name: 'Alfred',  job: 'Tester'},
  { name: 'Bradman',  job: 'Developer'},
  { name: 'Smith',  job: 'Architect'},
  { name: 'Cameron',  job: 'Designer'}
];

person.forEach((item, index) => {
  console.log(`${index + 1}. ${item.name} ${item.job}`)
});

// Output :

1. John Software engineer
2. Alfred Tester
3. Bradman Developer
4. Smith Architect
5. Cameron Designer        
    

Map Method

The JavaScript map() method performs some functionality over the original array iteratively and produces a new array without affecting the original array. It 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. Let’s look at the following example.

        
const person = ["John", "Carter", "Rollins", "Will", "Lionardo"];
const name = person.map(element => element);
console.log(name);

//Output : [ 'John', 'Carter', 'Rollins', 'Will', 'Lionardo' ]        
    

filter() Method

filter() that takes a condition as a parameter and returns a new array of only those elements that fulfill the specified condition. This method checks each element in an array to see if it meets a condition. It returns a new array with the elements that meet the condition.

        
        
const person = ["John", "Rollins", "Smith", "Roddy", "Randy"];
const FilteredNames = person.filter(name => {
    return name[0] === "R";
});

console.log("Employee name : " , FilteredNames);

// Output : Employee name :  [ 'Rollins', 'Roddy', 'Randy' ]        
    

Find Method

This method returns the value of the first element of an array that satisfies a condition. The method will return undefined if none of the elements satisfies this condition.

        
const person = [
  { name: 'john',  category: 'businessman'},
  { name: 'cena',  category: 'actor'},
  { name: 'carter',  category: 'thinker'},
  { name: 'will',  category: 'businessman'},
  { name: 'arnold',  category: 'blogger'}
];

const findperson = person.find(element => element.category === 'businessman');
console.log(findperson);

//Output : { name: 'john', category: 'businessman' }        
    

findIndex  Method

It returns the index of the first occurrence of the element, -1 if the element doesn’t exist. It is similar to the find method. The difference between find & findindex method is that findindex method returns the index of the first element of an array that satisfies the condition set. The method will return -1 if none of the elements satisfies the condition.

        
const person = ["John", "Rollins", "Smith", "Roddy", "Randy"];
let name=person.findIndex((element)=>element.length<5);

console.log(name);

//Output : 0
           
    

every Method

The every() method is another array iteration method in JavaScript, it takes a condition and tests it with every array element as a result it returns true or false.

        
const person = ["Micheal", "Seth", "Brayan", "Samoa", "Rollins"];
const name = person.every(CheckName => {
    return CheckName[0] === "J";
});

console.log("All names Starts with J : " , name);

// Output : All names Starts with J :  false        
    

reduce  Method

The reduce method is used to reduce the array to a single value. It executes a provided function for each value of the array (from left to right). reduce() method is an array iteration method available in JavaScript that reduces the entire array to one value.

        
const person = ["John", "Rollins", "Smith", "Roddy", "Randy"];
const names = person.reduce((Name1,Name2 ) => {
    return Name1 + " " + Name2;
});

console.log("Reduced Name : " , names);

// Output : Reduced Name :  John Rollins Smith Roddy Randy        
    

In the above example, we have an array with five names, using reduce() method we reduce the whole array to one name, we passed two parameters to the reduce method “Name1” and “Name2”, and we will apply some processes on them and will return them back:

some  Method

JavaScript some() method checks if some of the array elements satisfy the given condition and returns the result either true or false:

        
const person = ["Micheal", "Seth", "Brayan", "Samoa", "Rollins"];
const name = person.some(CheckName => {
    return CheckName[0] === "S";
});

console.log("All names Starts with J : " , name);

// Output : All names Starts with J :  true        
    
Posted in

Ankit Patel

Leave a Comment

Your email address will not be published.

Scroll to Top