Author: John Au-Yeung

Sometimes, we want to addEventListener to multiple elements in a single line with JavaScript.

In this article, we’ll look at how to addEventListener to multiple elements in a single line with JavaScript.

How to addEventListener to multiple elements in a single line with JavaScript?

To addEventListener to multiple elements in a single line with JavaScript, we can loop through each element and call addEventListener on them.

For instance, we write

const elementsArray = [...document.querySelectorAll("input")];

elementsArray.forEach((elem) => {
  elem.addEventListener("input", () => {
    // ...
  });
});

to call querySelectorAll to select all input elements.

Then we use the spread operator to convert the returned node list to an array.

Next, we call elementsArray.forEach with a callback that calls elem.addEventListener to add an input event listener to each element elem.

Conclusion

To addEventListener to multiple elements in a single line with JavaScript, we can loop through each element and call addEventListener on them.

Sometimes, we want to remove a class from elements in pure JavaScript.

In this article, we’ll look at how to remove a class from elements in pure JavaScript.

How to remove a class from elements in pure JavaScript?

To remove a class from elements in pure JavaScript, we use the classList.remove method.

For instance, we write

Array.from(document.querySelectorAll(".widget.hover")).forEach((el) => {
  el.classList.remove("hover");
});

to select all elements with the widget and hover classes with querySelectorAll.

Then we call Array.from on the returned node list to convert it to an array.

Next, we call forEach with a callback that calls classList.remove to remove the hover class from each element el.

Conclusion

To remove a class from elements in pure JavaScript, we use the classList.remove method.

Sometimes, we want to make a "public static field" in a JavaScript class.

In this article, we’ll look at how to make a "public static field" in a JavaScript class.

How to make a "public static field" in a JavaScript class?

To make a "public static field" in a JavaScript class, we can create a static getter.

For instance, we write

class Agent {
  static get CIRCLE() {
    return 1;
  }
  static get SQUARE() {
    return 2;
  }
}

console.log(Agent.CIRCLE);

to define the CIRCLE and SQUARE getters in the Agent class.

Then we access them like Agent.CIRCLE.

Conclusion

To make a "public static field" in a JavaScript class, we can create a static getter.

Sometimes, we want to remove all properties from a object with JavaScript.

In this article, we’ll look at how to remove all properties from a object with JavaScript.

How to remove all properties from a object with JavaScript?

To remove all properties from a object with JavaScript, we can loop through each property and use delete to delete them.

For instance, we write

Object.keys(object).forEach((key) => delete object[key]);

to call Object.keys with object to get all string non-inherited keys in object as an array.

Then we call forEach with a callback to delete each property with delete.

Conclusion

To remove all properties from a object with JavaScript, we can loop through each property and use delete to delete them.

To mock a constructor like new Date() with Jest and JavaScript, we can use the setSystemTime method.

For instance, we write

beforeAll(() => {
  jest.useFakeTimers("modern");
  jest.setSystemTime(new Date(2022, 3, 1));
});

afterAll(() => {
  jest.useRealTimers();
});

to call useFakeTimers to use a mock timer.

Then we call setSystemTime to set the date and time in the test environment.

We make the calls in the beforeAll callback to run the code before any tests are run.

Then in the afterAll callback, we call useRealTimers to clear the mocked timers and use the real ones.

Conclusion

To mock a constructor like new Date() with Jest and JavaScript, we can use the setSystemTime method.