For In Loop

Suppose, You are given an object and you want to find the particular key or value of that object you can find the data easily in a small object .

For the larger set of data you need to a traversing and that traversing technique used in this is called For In loop .

const person = { name:"John",
                 lname:"Doe",
                 age:25};
// An object which contains  name, lastname amd age stored in a variable.

for(let x in person){
// for...in is a loop that iterates over the enumerable properties of an object.
// In this case, it iterates over the keys (name, lname, age) of the person 
// object.
        console.log(person[x])
}
// Output
// Jhon, Doe, age

But what if you want a particular data

for this we will write

for(let x in person){
if(x === "lanme"){ 
        console.log(person[x])
        break //Should use break other it will Iterate through the whole array
    }
}
// Output : Doe

Use cases:

• objects

• Arrays (not Recommended but can be used according to the need)

For Each

An array Method which take an callback Function to iterate over the element of the array. The callback Function can accept upto three arguments currentElement, index, array.

const staffsDetails = [
  { name: "Jam Josh", age: 44, salary: 4000, currency: "USD" },
  { name: "Justina Kap", age: 34, salary: 3000, currency: "USD" },
  { name: "Chris Colt", age: 37, salary: 3700, currency: "USD" },
  { name: "Jane Doe", age: 24, salary: 4200, currency: "USD" }
];
// Iterating through an array of objects

staffsDetails.forEach((staffDetail) => {
  let sentence = `I am ${staffDetail.name} a staff of Royal Suites.`;
  console.log(sentence);
});

/*
"I am Jam Josh a staff of Royal Suites."
"I am Justina Kap a staff of Royal Suites."
"I am Chris Colt a staff of Royal Suites."
"I am Jane Doe a staff of Royal Suites."
*/

Note :

We can't iterate through an object directly but through an array of objects using for each loop.

For Of

The for...of loop was introduced in the later versions of JavaScript ES6.

The for..of loop in JavaScript allows you to iterate over iterable objects (arrays, sets, maps, strings etc).

for of with arrays

const students = ['John', 'Sara', 'Jack'];

// using for...of
for ( let element of students ) {

    // display the values
    console.log(element);
}

// Output : Jhon, Sara, Jack

Note :

Cannot Directly Iterate through an Object.

Map

Map are built-in in objects which holds key,value pairs which are iterable and remembers the original insertion of the key .

which is why it is more safe to use rather than traditional objects.

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);

console.log(map1.get('a'));
// Expected output: 1

map1.set('a', 97);

console.log(map1.get('a'));
// Expected output: 97

console.log(map1.size);
// Expected output: 3

map1.delete('b');

console.log(map1.size);
// Expected output: 2

map is a higher level concept than loops, borrowed from functional programming. It doesn't say "call this function on each of these items, one by one, from beginning to end," it says "call this function on all of these items." It might be implemented as a loop, but that's not the point -- it also might be implemented asynchronously -- it would still be map.

This method takes in a callback function which gets called for every new element it iterates over.

The callback function takes in three parameters:

• The current value

• It's index

• The target array

let firstNames = ["super", "spider", "ant", "iron"]
let lastName = "man";

let fullNames = firstNames.map(firstName => firstName + lastName);

console.log(fullNames);

// ["superman", "spiderman", "antman", "ironman"]