JavaScript: ForEach and For…In - The difference

JavaScript: ForEach and For…In - The difference

This is going to be a quick introduction to foreach, and for...in in JavaScript. This article was written to introduce you to new methods that you can you can use instead of always using for loops.

JavaScript — The difference between ForEach, and For…In. Learn what ForEach and For…In do in JavaScript

This is going to be a quick introduction to foreach, and for...in in JavaScript. This article was written to introduce you to new methods that you can you can use instead of always using for loops.

The For Loop

Here’s a quick ‘n simple refresher on the for loop:

You’ve probably used a for loop before. It’s the most basic of loops in JavaScript and is quite versatile. Here’s the basic for loop syntax:

for (i = 0; i < 10; i++) { 
  // do something
}

Our for loop consists of three statements, one that is executed before our loop starts ( i = 0 ), one that defines how long our loop should run ( i < 10 ), and one that is executed after each loop ( i++ ).

In this example, we are setting i = 0 before our loop starts. We will continue to loop as long as i < 10, and each iteration of the loop will increase i by one. Finally, within our brackets is the code that will be run on each iteration of the loop.

ForEach

forEach is an Array method that we can use to execute a function on each element in an array. It can only be used on Arrays, Maps, and Sets.

A simple example would be to console.log each element of an array. Here’s what this might look like with a for loop:

const arr = ['cat', 'dog', 'fish'];

for (i = 0; i < arr.length; i++) { 
  console.log(arr[i])
}

// cat
// dog
// fish

Great. It works. Here’s how we accomplish the same thing with the forEach() method:

const arr = ['cat', 'dog', 'fish'];

arr.forEach(element => {
  console.log(element);
});

// cat
// dog
// fish

When using forEach, we simply have to specify a callback function. This callback will be executed on each element in the array.

For…In

Here’s what the for...in syntax looks like:

for (variable in object) {  
  // do something
}

for...in is used to iterate over the enumerable properties of objects. Every property in an object will have an Enumerable value — if that value is set to true, then the property is Enumerable.

Remember, when you create an Object it will inherit certain methods from its prototype. For example, the Object.keys() method. These are non-enumerable. Any properties you add to an object will for the most part be enumerable. Lets look at an example to help with the understanding. In the example below we’ll log out each enumerable value in the object:

const obj = {  
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

for (let elem in obj) {  
  console.log( obj[elem] )
}

// 1
// 2
// 3
// 4

Better yet, we can log out both the key and value pair:

for (let elem in obj) {
  console.log(`${elem} = ${obj[elem]}`);
}

// a = 1
// b = 2
// c = 3
// d = 4

Don’t forget, arrays are objects too — which means we can also use the for...in loop on Arrays:

const arr = ['cat', 'dog', 'fish'];

for (let i in arr) {  
  console.log(arr[i])
}

// cat
// dog
// fish

And since each character in a string has an index, we can even use for...in on strings. Check this out:

const string = 'hello';

for (let character in string) {  
    console.log(string[character])
}

// h
// e
// l
// l
// o

Note: The for...in loop executes in an arbitrary order and should not be relied upon if you need to loop in a specific order.

Notes:

Thanks for reading, and hopefully this was helpful!. If you like this tutorial please share it with others.

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers

Functional Programming for JavaScript Developers. Learn Functional Programming and how it enables developers to move from imperative to declarative programming. Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes. Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

Functional Programming for JavaScript Developers

Learn functional programming and how it enables developers to move from imperative to declarative programming

Improve your code with functional patterns like pure functions, compose & map/reduce/filter...plus advanced concepts like fusion, transducing and monads!

Solidify your knowledge of functional JavaScript programming, including objects, arrays, and prototypes

Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript. Go beyond the fundamentals of asynchronous JavaScript and use features and techniques that will help you reduce code and create smarter applications.

Learning how to build and manage asynchronous functional programs is perhaps the most important part of becoming an effective JavaScript programmer.

What you'll learn

  • On the surface, this course is designed for beginning and intermediate JS developers who want to learn the fundamentals in order to understand and use functional programming in both ES5 and ES6. However, this course is also perfect for people preparing to enter into competitive JavaScript bootcamps