Iteration Methods

Built-in JavaScript methods that help to iterate through an array are called iteration methods or iterators. Let's have a look at the different type of iterators:

forEach
map
filter
find
findIndex
every
some
reduce
for...in
for...of

1. The .forEach() method:

.forEach() takes an argument of callback function.
.forEach() will loop through the array and execute the callback function for each element of the array.
During each iteration, the current element will be passed as an argument to the callback function.
The callback function can be in function declaration format, function expression or an arrow function.
The return value for .forEach() will be undefined.

const boxes = [
    { height: 10, width: 30 },
    { height: 20, width: 50 },
    { height: 30, width: 60 }
  ];
  let areas = [];
  
  boxes.forEach(function(box){
      areas.push(box.height*box.width);
  });
console.log(areas);

output:

[ 300, 1000, 1800 ]

2. The .map() method:

when we call .map() on an array, it takes an argument of a callback function and returns a new array.

let students = [{id: 1, name: 'Tim', course: 'Java'}, 
                {id: 2, name: 'James', course: 'JavaScript'}, 
                {id: 3, name: 'David', course: 'Python'}];
//directly getting a property value from array using map
let name = students.map(function(student){
    return student['name'];
});    
function pluck(array, property){
    let a2 = array.map(function(obj){
        return obj[property];
    });
    return a2;
}
console.log(name);
//getting desired peroperty values using a function
console.log(pluck(students, 'id'));
console.log(pluck(students, 'name'));
console.log(pluck(students, 'course'));

output:

[ 'Tim', 'James', 'David' ]
[ 1, 2, 3 ]
[ 'Tim', 'James', 'David' ]
[ 'Java', 'JavaScript', 'Python' ]

3. The .filter() method:

The .filter() method returns a new array after filtering out certain elements from the original array.
The callback function for the .filter() method returns either true or false depending on the element that is passed to it.
The elements for which the callback function returns true as value is added to the new array.

let employees = [{id: 1, name: 'James', dept: 'IT'},
                {id: 2, name: 'David', dept: 'Accounts'},
                {id: 3, name: 'Tim', dept: 'HR'}, 
                {id: 4, name: 'Vinod', dept: 'IT'}];
const deptCS_Filter = employees.filter(function(employee){
   return employee.dept === 'IT';
});
console.log(deptCS_Filter);

output:

[ { id: 1, name: 'James', dept: 'IT' },
{ id: 4, name: 'Vinod', dept: 'IT' } ]

4. The .find() method:

find() method executes a callback function once for each element in the array until it finds a value that returns as true.
find() only returns the first element matching the given search criteria.
If nothing is found matching the given search criteria, undefined is returned.
find() does not mutate or change the original Array.

let employees = [{id: 1, age: 35, name: 'James', dept: 'IT', education: 'Masters'},
                {id: 2, age: 25, name: 'David', dept: 'Accounts', education: 'High School'},
                {id: 3, age: 45,name: 'Tim', dept: 'HR', education: 'Graduate'}, 
                {id: 4, age: 50,name: 'Vinod', dept: 'IT', education: 'PHD'}];
               
function chooseEmployee(arrEmployee){
    
     return arrEmployee.find(function(emp){
        return emp.name === 'David';     
    });
}
console.log(chooseEmployee(employees));

output:

{ id: 2, age: 25, name: 'David', dept: 'Accounts', education: 'High School' }

5. The .findIndex() method:

findIndex() returns the index of the first element in the array that satisfies the given search criteria.
If nothing is found matching the given search criteria, -1 is returned.

let employees = [{id: 1, age: 35, name: 'James', dept: 'IT', education: 'Masters'},
                {id: 2, age: 25, name: 'David', dept: 'Accounts', education: 'High School'},
                {id: 3, age: 45,name: 'Tim', dept: 'HR', education: 'Graduate'}, 
                {id: 4, age: 50,name: 'Vinod', dept: 'IT', education: 'PHD'}];
               
function chooseEmployee(arrEmployee){
    
     return arrEmployee.findIndex(function(emp){
        return emp.name === 'Tim';     
    });
}
console.log(chooseEmployee(employees));

output:

6. The .every() method:

var students = [
    { id: 1, passed: true },
    { id: 2, passed: false},
    { id: 3, passed: true }
  ];
  
const hasPassed;
hasPassed = students.every(function(student){
    return student.passed === true;
});
console.log(hasPassed);

output:

false

7. The .some() method:

let students = [
    { id: 1, passed: true },
    { id: 2, passed: false},
    { id: 3, passed: true }
  ];
  
let hasFailed;
hasFailed = students.some(function(student){
    return student.passed === false;
});
console.log(hasFailed);

output:

true

8. The .reduce() method:

The .reduce() method returns a single value after iterating through the elements of an array
The .reduce() method takes a callback function as first argument. This callback function has two parameters.
The .reduce() method can also take an optional second parameter to set an initial value for the first argument in the callback function.

let passed = [{ year: 2016 ,pass: 64 }, { year: 2017 , pass: 42 } , { year: 2018 ,pass: 52 }];
const totalPassed;
totalPassed = passed.reduce(function(total, student){
    return student.pass + total;
},0);
console.log(totalPassed);

output:

9. for...in

for...in will execute a given block of code for each property in an object.

let dept = 
    {
      finance: {
      'employee1': {id: 1, age: 35, name: 'James', dept: 'IT', education: 'Masters'},
      'employee2': {id: 2, age: 25, name: 'David', dept: 'Accounts', education: 'High School'},
      'employee3': {id: 3, age: 45,name: 'Tim', dept: 'HR', education: 'Graduate'}, 
      'employee4': {id: 4, age: 50,name: 'Vinod', dept: 'IT', education: 'PHD'}
    }
    };
               
for (let employee in dept.finance) {
 console.log( employee + ': ' + dept.finance[employee].name);
};

output:

"employee1: James"
"employee2: David"
"employee3: Tim"
"employee4: Vinod"

10. for...of

The for/of statement loops through the values of iterable objects such as Arrays, Strings, Maps, NodeLists, Set, TypedArray, etc.
It can only be used on data structures with a Symbol.iterator method implemented (can't be used on objects)
For any data type/structure, you can use console.dir() to see whether a Symbol.iterator method is implemented or not. For example, for the below case, you can run command console.dir(arr).
Note: The Console method dir() displays an interactive list of the properties of the specified JavaScript object

let arr = [1,2,3,4,5];
for (let value of arr){
    console.log(value);
}

Output: