Author: John Au-Yeung

We can use the forEach method to loop through each element in an object and add a property to each.

For instance, we can write:

const arr = [{
  a: 'foo'
}, {
  a: 'bar'
}, {
  a: 'baz'
}]
arr.forEach((element) => {
  element.b = 'qux'
});
console.log(arr)

We have the arr array.

Then we call forEach with a callback that has the element parameter with the object being iterated through and we assign the b property to a value.

Therefore, arr is:

[
  {
    "a": "foo",
    "b": "qux"
  },
  {
    "a": "bar",
    "b": "qux"
  },
  {
    "a": "baz",
    "b": "qux"
  }
]

according to the console log.

Add a Property to Each Object in an Array of Objects with JavaScript with map

Also, we can use the map method to do the same thing.

For instance, we can write:

const arr = [{
  a: 'foo'
}, {
  a: 'bar'
}, {
  a: 'baz'
}]
const mapped = arr.map((element) => ({
  ...element,
  b: 'qux'
}));
console.log(mapped)

We call map with a callback where we spread the element object and add a b property to the same object.

And mapped is:

[
  {
    "a": "foo",
    "b": "qux"
  },
  {
    "a": "bar",
    "b": "qux"
  },
  {
    "a": "baz",
    "b": "qux"
  }
]

according to the console log.

One way to iterate through elements returned by the document.getElementsByClassName method is to use the for-of loop.

For instance, if we have the following HTML:

<div class='slide'>
  foo
</div>
<div class='slide'>
  bar
</div>
<div class='slide'>
  baz
</div>

Then we can get all the elements with the class slide and loop through each item by writing:

const slides = document.getElementsByClassName("slide");
for (const slide of slides) {
  console.log(slide);
}

We call document.getElementsByClassName with 'slide' to return an HTML element collection object with all the divs.

Then we use the for-of loop to loop through each item.

slide has the div we’re looping through.

We can also spread the slides object into an array and then call forEach on it:

const slides = document.getElementsByClassName("slide");
[...slides].forEach(slide => {
  console.log(slide);
})

We check if a date has the MM/DD/YYYY format with JavaScript with the test method.

For instance, we can write:

const dateRegex = /^(0\[1-9]|1\[0-2\])\/(0\[1-9]|1\d|2\\d|3\[01])\/(19|20)\d{2}$/;
console.log(dateRegex.test('2021-10-01'))
console.log(dateRegex.test('10/01/2021'))

We have the dateRegex regex that checks if a string is in the MM/DD/YYYY format.

The pattern (0[1–9]|1[0–2]) checks if the first number is between 01 and 12.

The pattern (0[1–9]|1\d|2\d|3[01]) checks if the second number is between 01 and 31.

And (19|20)\d{2} checks if the 3rd number starts with 19 or 20 and ends with 2 digits.

\/ checks whether slashes are between the numbers.

Therefore, the first console log is false and the 2nd one logs true .

We can use the document.body.scrollHeight to get the full height of the content, including the content off the screen.

document.body.clientHeight has the height of the content on the screen.

Therefore, we can check if the page has a vertical scrollbar by comparing the 2.

To do this, we write:

const hasVScroll = document.body.scrollHeight > document.body.clientHeight;  
console.log(hasVScroll)

We can create a button that refreshes the page on click with JavaScript by listening to the click event that the button triggers.

For instance, we can write the following HTML:

<input type="button" value="Reload Page">

Then we can add a click listener to it by writing:

const input = document.querySelector('input')  
input.addEventListener('click', () => {  
  window.location.reload();  
})

We get the input with document.querySelector .

Then we call addEventListener with 'click' to add a click listener.

The callback runs when the button is clicked.

And we call window.location.reload to reload the page.

We can replace window.location.reload with history.go(0) , which will also reload the page.

To do that, we write:

const input = document.querySelector('input')  
input.addEventListener('click', () => {  
  history.go(0);  
})

to do the reloading.