tutorial

1. Only keep first object in array with property value

To filter duplicate objects from an array by a property in JavaScript, use the filter() method to filter out elements that are not the first in the array having the property value.

For example:

JavaScriptCopied!

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

const unique = arr.filter(
  (obj, index) =>
    arr.findIndex((item) => item.location === obj.location) === index
);

/*
   [
     { name: 'John', location: 'Los Angeles' },
     { name: 'Kate', location: 'New York' }
   ]
 */
console.log(unique);

The Array filter() tests each element in an array against a condition specified by a callback function, and creates a new array filled with elements that pass the test. It doesn’t modify the original array.

JavaScriptCopied!

const arr = [1, 2, 3, 4];

const filtered = arr.filter((num) => num > 2);
console.log(filtered); // [ 3, 4 ]

The Array findIndex() method searches through elements in an array and returns the index of the first one that passes a test, specified by the callback function passed to it. We use it to find the first array element with the same property value as the object filter() is currently testing.

In our example, the filter() condition for the object is that its array index be the same as the result of findIndex(). If this condition is true, it will mean that the object is the first array element with the property value. If it’s false, it’ll mean that there’s already an array item with that property value, so the object is a duplicate and shouldn’t be included in the result.

JavaScriptCopied!

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

// true - first object with location of New York
console.log(1 === arr.findIndex((obj) => obj.location === 'New York'));

// false - will not be included in result
console.log(2 === arr.findIndex((obj) => obj.location === 'New York'));

Filter duplicate objects from array by multiple properties

Depending on your scenario, you may want an object to be considered a duplicate only if it has two or more properties that have the same value – multiple property values that are the same.

For that case, we’ll use filter() and findIndex() as before, but we’ll add extra comparisons between filter()‘s object and findIndex()‘s object for all the properties.

For example:

JavaScriptCopied!

const arr = [
  {
    name: 'Kate',
    location: 'New York'
  },
  {
    name: 'Mike',
    location: 'New York'
  },
  {
    name: 'Kate',
    location: 'New York'
  }
];

const unique = arr.filter(
  (obj, index) =>
    arr.findIndex(
      (item) => item.location === obj.location && item.name === obj.name
    ) === index
)

/*
   [
      { name: 'Kate', location: 'New York' },
      { name: 'Mike', location: 'New York' }
   ]
 */
console.log(unique);

2. Exclude duplicates from unique array

Here’s another way to filter duplicate objects from an array in JavaScript:

1. Create an empty unique array that will store the unique objects.
2. Loop through the objects in the array.
3. For each object, add it to the unique array if it isn’t a duplicate. Otherwise, ignore it.

For example:

JavaScriptCopied!

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

const unique = [];
for (const item of arr) {
  const isDuplicate = unique.find((obj) => obj.location === item.location);
  if (!isDuplicate) {
    unique.push(item);
  }
}

/*
   [
    { name: 'John', location: 'Los Angeles' },
    { name: 'Kate', location: 'New York' }
  ]
*/
console.log(unique);

We use the for...of loop to iterate over the array and perform an action for each object.

For each object, we use the find() method to check if it already exists in the unique array. Array find() searches for the first object in an array that passes a specified test, similar to findIndex(), but it returns the object itself instead of its array index.

JavaScriptCopied!

const nums = [2, 5, 8, 13, 19];

const doubleDigit = nums.find((num) => num > 9);

console.log(doubleDigit); // 13

If it’s not in the unique array, we simply add it with the push() method.

This method is not a one-liner like the first one, but you may find it easier to understand. It seems like the natural way you would go about removing duplicate items from a list as a human.

Filter duplicate objects from array by multiple properties

Like in the previous method, if multiple properties are used to determine if an object is a duplicate, you can simply add more checks for the properties – this time in the find() method:

JavaScriptCopied!

const arr = [
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
];

const unique = [];
for (const item of arr) {
  // 👇 "name" and "location" used for duplicate check
  const duplicate = unique.find(
    (obj) => obj.location === item.location && obj.name === item.name
  );
  if (!duplicate) {
    unique.push(item);
  }
}

/*
  [
    { name: 'Kate', location: 'New York' },
    { name: 'Mike', location: 'New York' }
  ]
 */
console.log(unique);

To round a number to 2 decimal places in JavaScript, call the toFixed() method on the number, i.e., num.toFixed(2). toFixed() will round and format the number to 2 decimal places.

For example:

JavaScriptCopied!

const num = 5.3281;

const result = num.toFixed(2);

console.log(result); // 5.33

const num2 = 3.1417

const result2 = num2.toFixed(2);

console.log(result2); // 3.14

The toFixed() method takes a number F and returns a string representation of a number with F number of digits after the decimal points. F here is determined by the first argument passed to toFixed(), the fractionDigits argument.

JavaScriptCopied!

const num = 5.3281;

console.log(num.toFixed(0)); // 5

console.log(num.toFixed(1)); // 5.3

console.log(num.toFixed(2)); // 5.33

console.log(num.toFixed(3)); // 5.328

console.log(num.toFixed(4)); // 5.3281

console.log(num.toFixed(5)); // 5.32810

Parse result of toFixed() to number

Remember, toFixed() returns a string representation:

JavaScriptCopied!

const num = 5.3281;

const result = num.toFixed(2);

console.log(result); // 5.33

console.log(typeof result); // string

But we can always convert the result to a number with the Number() constructor:

JavaScriptCopied!

const num = 5.3281;

const result = Number(num.toFixed(2));

console.log(result); // 5.33

console.log(typeof result); // number

If the string has trailing zeroes, they will be removed in the conversion:

JavaScriptCopied!

const num = 9.999999;

const strResult = num.toFixed(2);

const result = Number(strResult);

console.log(strResult); //10.00

console.log(result); // 10

The trailing zeros after the decimal point don’t change the value of a number, so 10.00 is the same as 10 or 10.00000000

JavaScriptCopied!

console.log(10.00 === 10); // true

console.log(10.00000000 == 10); // true

Round decimal string to 2 decimal places

Sometimes the input might be stored as a string. In this case, we’ll first need to convert the number to a float with the parseFloat() function before using toFixed() to round it to 2 decimal places.

For example:

JavaScriptCopied!

const numStr = '17.23593';

// 👇 convert string to float with parseFloat()
const num = parseFloat(numStr);

const result = num.toFixed(2); // 17.24

console.log(result);

Not all decimal numbers can be represented precisely in binary, so there are some rounding errors in JavaScript’s floating-point number system. For example:

JavaScriptCopied!

console.log(44.85 * 0.1); // 4.485

console.log(45.85 * 0.1); // 4.585

console.log(46.85 * 0.1); // 4.6850000000000005 (?)

In this example, 46.85 x 0.1 equals 4.6850000000000005 because 46.85 can’t be accurately represented in binary floating-point format.

JavaScriptCopied!

console.log((1.415).toFixed(2)); // 1.42

console.log((1.215).toFixed(2)); // 1.22

console.log((1.015).toFixed(2)); // 1.01 (?)

Like in the first one, here 1.015 is rounded down to 2 decimal places as 1.01 instead of 1.02, because 1.015 also can’t be represented accurately in the binary number system.

One of the most popular examples of this flaw is the classic 0.1 + 0.2:

JavaScriptCopied!

console.log(0.1 + 0.2 === 0.3); // false

console.log(0.1 + 0.2); // 0.30000000000000004

You can find this and more of other interesting JavaScript quirks in our Crazy JS Book.

To remove a class from all HTML DOM elements with JavaScript:

1. Get a list of all the elements in the DOM with document.querySelectorAll('*').
2. Iterate over the list with forEach().
3. For each element, call classList.remove(class) to remove the class from each element.

i.e.:

JavaScriptCopied!

const allElements = document.querySelectorAll('*');

// const allChildElementsOfParentWithClass = document.querySelectorAll('.class *');

// const allChildElementsOfParentWithId = document.querySelectorAll('#id *');

// const allChildElementsOfParentWithTag = document.querySelectorAll('tag *');

allElements.forEach((element) => {
  element.classList.remove('big');
});

For example:

HTMLCopied!

<p class="big bold text">Coding</p>
<p class="big bold text">Beauty</p>

<div class="container">
  <p class="big bold text">Dev</p>

  <button class="big btn">Visit</button>
</div>

<br />

<button id="remove">Remove class</button>

CSSCopied!

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.5em;
}

.text {
  font-family: Arial;
}

.btn {
  color: white;
  background-color: blue;
}

JavaScriptCopied!

const removeBtn = document.getElementById('remove');

removeBtn.addEventListener('click', () => {
  const elements = document.querySelectorAll('*');

  elements.forEach((element) => {
    element.classList.remove('big');
  });
});

This will be the HTML after the button is clicked:

HTMLCopied!

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>

<div>
  <p class="bold text">Dev</p>

  <button class="btn">Visit</button>
</div>

<br />

<button id="remove">Remove class</button>

We use the document.querySelectorAll() method to select all DOM elements.

We iterate over the elements in the list object with the forEach() method. This forEach() method works similarly to Array forEach().

classList.remove() method

We use the classList.remove() method to remove a class from the elements. You can remove multiple classes by passing more arguments to remove().

JavaScriptCopied!

const elements = document.querySelectorAll('*');

elements.forEach((element) => {
  element.classList.remove('big', 'bold');
});

If any of the classes passed to remove() doesn’t exist on the element, remove() will ignore it, instead of throwing an error.

Remove class from all children elements of element

The previous example works for removing a class from every single element in the DOM. What if you want to remove all elements that are children of a specific DOM element, for instance, just children of the .container element in our example?

To do this, just prefix the * with the element’s selector and separate them with a space. I mean:

JavaScriptCopied!

// Remove class from all children elements of .container div
const elements = document.querySelectorAll('.container *');

elements.forEach((element) => {
  element.classList.remove('big');
});

Add class to all elements

Just like the classList.remove() method removes one or more classes from an element, the classList.add() method adds one or more classes to an element. This means that we can use it in the forEach() method to remove a class from all DOM elements:

JavaScriptCopied!

const elements = document.querySelectorAll('.canvas *');

elements.forEach((element) => {
  element.classList.add('clickable', 'stylable');
});

The get the width of the browser window on resize in React, add a resize event listener to the window object, then access the innerWidth property in the listener.

For example:

JavaScriptCopied!

import { useState, useEffect } from 'react';

export default function App() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleWindowResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  });

  return (
    <div>
      <h2>Width: {windowWidth}</h2>
    </div>
  );
}

The innerWidth property returns the interior width of the window in pixels, including the width of the vertical scrollbar, if it is present.

The resize event is fired whenever the width or height of the window/document view changes.

We use the useState React hook to create a state variable that will update whenever the width of the window changes.

The useState hook returns an array of two values. The first is a variable that stores the state, and the second is a function that updates the state when it is called.

The useEffect hook is used to perform an action when a component first renders, and when one or more specified dependencies change. In our example, the action is to add the event listener for the resize hook with the addEventListener() method.

We pass an empty dependencies array to useEffect, so that it is called only once in the component’s lifetime, and the resize event listener is only registered once – when the component first renders.

JavaScriptCopied!

  useEffect(() => {
    const handleWindowResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  });

In the resize event listener, we update the state variable with the new window width.

Note: useEffect‘s cleanup function runs after every re-render, not only when the component unmounts. This prevents memory leaks that happen when an observable prop changes value without the observers in the component unsubscribing from the previous observable value.

Get window height on resize

We can do a similar thing to get the window’s height on resize, but we’ll use the window object’s innerHeight property instead in the resize event listener:

JavaScriptCopied!

import { useState, useEffect } from 'react';

export default function App() {
  const [windowHeight, setWindowHeight] = useState(window.innerHeight);

  useEffect(() => {
    const handleWindowResize = () => {
      setWindowHeight(window.innerHeight);
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  });

  return (
    <div>
      <h2>Height: {windowHeight}</h2>
    </div>
  );
}

innerHeight property returns the interior height of the window in pixels, including the height of the horizontal scrollbar, if it is present.