Author: John Au-Yeung

JavaScript objects are dynamically created by adding properties to them.

Therefore, we may have to loop through its properties with a loop to get the values.

In this article, we’ll look at how to loop through a plain JavaScript object.

Object.keys

The Object.keys method returns an array of all non-inherited string property keys of an object.

To use it, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key of Object.keys(obj)) {
  console.log(key, obj[key])
}

We use the for-of loop to loop through the array of keys returned by Object.keys .

Then we can access the value by passing the key into the square brackets after obj .

So we see:

a 1
b 2
c 3

logged.

Object.values

We can just loop through the values of an object with the Object.values method.

For instance, we can write:

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

for (const value of Object.values(obj)) {
  console.log(value)
}

Object.values return an array with all the properties values of an object, so we can use the for-of loop to log the property values.

And so we get:

1
2
3

in the console.

Object.entries

Also, we can use the Object.entries method to return an array with arrays of key-value pairs.

To do this, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value)
}

We destructure the key and value from each array entries returned by Object.entries .

Then we can log them in the loop body.

And we get the same result as we did in the previous example.

Loop Through Nested Objects

To loop through a nested object, we can create a function that calls itself to loop through their properties at each level of the object.

To do this, we write:

const obj = {
  a: 1,
  b: 2,
  c: {
    d: {
      e: 4
    },
    f: 5
  }
}
const loopNestedObj = obj => {
  for (const [key, value] of Object.entries(obj)) {
    console.log(key, value)
    if (typeof value === 'object' && value !== null) {
      loopNestedObj(value)
    }
  }
}

loopNestedObj(obj)

We create the loopNestedObj function that takes an obj object.

Inside the function, we have the same loop as in the previous example.

But we have an if block to check the value ‘s data type to see if it’s an object.

If it is, then we call loopNestedObj to loop through its content.

The expression typeof value === ‘object’ && value !== null is needed to check if value is an object since typeof null is also 'object' .

Therefore, we need both checks to check for an object.

Conclusion

We can traverse an object with the for-of loop and various static object methods provided by JavaScript.

Many items in a web page are dynamically created with JavaScript.

This means that we’ve to listen to events that are emitted by them so that we can use them to do something other than display content statically.

In this article, we’ll look at how to listen to events on elements that are created dynamically with JavaScript.

Event Delegation

We can listen to events emitted on the container element that has the dynamically created elements.

In the event listener, we can check which item is emitting an event do the stuff we want depending on the element emitting the event.

This is possible because events emitted by an element bubble up to its parent and ancestor elements all the way to the body and html elements unless we stop it manually.

Therefore, the body element’s event listener will pick up events from all its descendant elements if we allow them to propagate.

For instance, we can write the following HTML:

<div>

</div>

And create then write the following JavaScript to listen to click events emitted by the dynamically created p elements:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.className = i % 2 === 1 ? 'odd' : 'even'
  p.textContent = 'hello'
  div.appendChild(p)
}

document.addEventListener('click', (e) => {
  if (e.target.className.includes('odd')) {
    console.log('odd element clicked', e.target.textContent)
  } else if (e.target.className.includes('even')) {
    console.log('even element clicked', e.target.textContent)
  }
});

In the code above, we get the div element with document.querySelector .

Then we use a for loop to add p elements inside the div 100 times.

We set the className of the element to set the value of the class attribute.

textContent has the value of the content of the p element.

Then we call appendChild on the div to add the p element inside the div.

Then to listen to click events on the p elements we just added, we listen to the click of document , which is the body element.

We call addEventListener to add the click listener to the body element.

Then we pass in a callback as the 2nd argument of addEventListener .

The e parameter is the event object.

It has information about the original element that emitted the event.

We get the element that originally emitted the event with the e.target property.

So we can get the value of the class attribute of the element with the e.target.className property.

And we get the value of the textContent property with the e.target.textContent property.

Conclusion

We can listen to events emitted by dynamically created HTML elements with event delegation.

We just listen to events from the ancestor of the elements that emit the events and then check which element emitted the event in the callback.

Sometimes, we need to scroll to the top of a web page programmatically.

In this article, we’ll look at how to scroll to the top of the page with JavaScript.

Scroll to the Top of the Page with JavaScript

We can scroll to the top of the page with JavaScript with the window.scrollTo method.

For instance, if we have the following HTML code:

<div>

</div>
<button>
  scroll to top
</button>

Then we can create a page of content with JavaScript and make the button scroll to the top of the page by writing:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}

button.addEventListener('click', () => {
  window.scrollTo(0, 0);
})

We get the div with querySelector .

Then we have a for loop which creates a p element with document.createElement .

And we set textContent to it.

And then we call appendChild to append the p element to the div.

To make the button scroll the page to the top when we click it, we call addEventListener on the button.

In the callback, we call window.scrollTo with the x and y coordinates to scroll to respectively.

Smooth Scrolling Animation

We can add smooth scrolling animation when we’re scrolling.

To do this, we pass in an object to scrollTo instead.

For instance, we can write:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}

button.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
})

We pass in an object with the top and left properties to set the x and y coordinates to scroll to respectively.

Also, we set the behavior property to 'smooth' to make the scrolling animation smooth.

This is better making the page jump straight to the top without the behavior options as we have in the first example.

Conclusion

We can use the window.scrollTo method to make a page scroll to the top with JavaScript.

We can set the location to scroll to and whether animation is shown or not during scrolling.