JavaScript objects can be difficult to learn, especially for beginners. In this tutorial you will learn how to loop through JavaScript objects with for...in loop, Object.keys(), Object.values(), Object.entries() and Object.getOwnPropertyNames(). You will also learn how to freeze objects and about some gotchas.

JavaScript Objects – A Friendly Introduction Part 1.

Looping over JavaScript objects

In previous part, you’ve learned about the basics of JavaScript objects. What if you want to know what keys and properties specific object contains? In JavaScript, there are multiple built-in ways to find this out. The most popular are for...in loop, Object.keys(), Object.values(), Object.entries() and Object.getOwnPropertyNames().

For…in loop

The first one, for...in loop, loops over all the properties of given object and returns keys. When you use bracket notation, obj[key], the for...in loop will retrieve the value of current key. The syntax of for...in loop is very easy. In a fact, it is even easier than syntax of for loop.

When you use for...in loop you have to specify two things. The first one is a variable. On each iteration, this variables holds current key name, or current property. When you log this variable you will see what key, or property, is currently accessible in the loop. For this variable, you choose any name you want.

What you need to remember is to use the same variable in the loop, when you want to get current key, or property, or its value. The second thing you have to specify is the object you want to loop over. Lastly, you need to put the in keyword between the variable and object you want to loop over, i.e. for (let someKey in someObject) {}.

// For...in loop example
// Create simple object
const specterObj = {
  id: 's5903',
  name: 'Specter',
  active: true
}

// Use for...in loop to iterate over specterObj
for (let objKey in specterObj) {
  // Log current key, temporarily stored in objKey variable
  console.log(`Current key is: ${objKey}.`)

  // Log the value of current key, using bracket notation
  console.log(`Current value is: ${specterObj[objKey]}.`)
}
// 'Current key is: id.'
// 'Current value is: s5903.'
// 'Current key is: name.'
// 'Current value is: Specter.'
// 'Current key is: active.'
// 'Current value is: true.'

Side note: Don’t confuse for...in loop with for...of loop. These two loops look very similar. There is a variable for current property and something to loop through. Aside to that, there two differences. First, there is of keyword, instead of in. The second difference is in that “something” to loop through.

The for...in loop was designed to be used to loop through properties of JavaScript objects. The for...of loop, on the other hand, was designed to be used to loop through iterable objects. What are iterable objects? In JavaScript, iterable objects are strings, arrays, array-like objects, maps and sets.

JavaScript Objects are not iterable objects. Due to that you can’t use for...of loop on JavaScript objects. If you try it, you will get a type error saying that object is not iterable. So, remember, when it comes to JavaScript objects use for...in loop. In case of strings, arrays, array-like objects, maps and sets use for...of loop.

// This will not work: for...of loop with objects
// Create simple object
const exampleObj = {
  firstName: 'Jack',
  lastName: 'Ryan'
}

// Try to use for...of loop to loop through exampleObj
for (let objKey of exampleObj) {
  // Log current key, temporarily stored in objKey variable
  console.log(`Current key is: ${objKey}.`)
}
// TypeError: exampleObj is not iterable

// This will work: for...of loop with iterable object (array)
const exampleArray = ['string', 'number', 'boolean', 56, true]

// Use for...of loop to loop through exampleArray
for (let curItem of exampleArray) {
  // Log current item
  console.log(curItem)
}
// 'string'
// 'number'
// 'boolean'
// 56
// true

// This will work: for...of loop with iterable object (string)
const word = 'Doom'

// Use for...of loop to loop through word
for (let curChar of word) {
  // Log current item
  console.log(curChar)
}
// 'D'
// 'o'
// 'o'
// 'm'

#javascript #design development