Skip to main content

How to Check if Two Arrays Have the Same Elements in JavaScript

Comparing two arrays for equality is a common task, but "equality" can mean two different things. You might need to check if two arrays are strictly equal (containing the same elements in the same order) or if they are loosely equal (containing the same elements, but possibly in a different order).

This guide will teach you the modern and robust methods for solving both of these problems. You will learn how to use functional methods like every() for strict checks and how to leverage the power of Set for high-performance unordered comparisons.

The Challenge: Why arr1 === arr2 Doesn't Work​

The first thing a beginner might try is the strict equality operator (===). This will almost always fail. In JavaScript, arrays are objects, and objects are compared by reference, not by value. The === operator only returns true if the two variables point to the exact same array in memory.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['a', 'b', 'c'];

console.log(arr1 === arr2); // Output: false (They are different arrays in memory)

const arr3 = arr1;
console.log(arr1 === arr3); // Output: true (They point to the same array)
note

To compare the contents of the arrays, we need to inspect their elements.

Scenario 1: Checking for Strict Equality (Order Matters)​

This is the most common check: are the arrays identical in length, content, and order? The most modern and readable way to do this is with the every() method.

The logic:

  1. First, check if the arrays have the same length. If they don't, they can't be equal, so we can exit early.
  2. If the lengths match, use the every() method to iterate through one array.
  3. For each element, compare it to the element at the same index in the second array.
  4. If any element doesn't match, every() will short-circuit and return false. If all elements match, it returns true.

Solution:

function areArraysEqualStrict(arr1, arr2) {
  // 1. Check if the lengths are the same
  if (arr1.length !== arr2.length) {
    return false;
  }

  // 2. Check if every element is the same at the same index
  return arr1.every((element, index) => element === arr2[index]);
}

// Example Usage:
console.log(areArraysEqualStrict(['a', 'b', 'c'], ['a', 'b', 'c'])); // Output: true
console.log(areArraysEqualStrict(['a', 'b', 'c'], ['c', 'b', 'a'])); // Output: false
console.log(areArraysEqualStrict(['a', 'b'], ['a', 'b', 'c']));      // Output: false

Scenario 2: Checking for Content Equality (Order Doesn't Matter)​

Sometimes you only care that two arrays contain the exact same elements, regardless of their order. This is a more complex problem. While sorting both arrays is an option, a more robust and often more performant solution uses a Set.

The logic:

  1. Again, first check if the arrays have the same length. If they don't, they can't have the same elements.
  2. Create a Set from the first array. A Set provides a fast way to check for the existence of an element.
  3. Use the every() method to iterate through the second array.
  4. For each element in the second array, check if it exists in the Set created from the first array.
  5. If all elements are found, the arrays are equal in content.

Solution:

function areArraysEqualUnordered(arr1, arr2) {
  // 1. Check if the lengths are the same
  if (arr1.length !== arr2.length) {
    return false;
  }

  // 2. Create a Set and check if every element of arr2 is in the set
  const set1 = new Set(arr1);
  return arr2.every(element => set1.has(element));
}

// Example Usage:
console.log(areArraysEqualUnordered(['a', 'b', 'c'], ['c', 'b', 'a'])); // Output: true
console.log(areArraysEqualUnordered(['a', 'b', 'c'], ['a', 'b', 'd'])); // Output: false
note

This solution assumes the arrays do not contain duplicate values (e.g., [1, 1, 2] vs [1, 2, 2]). For cases with duplicates, a more complex frequency counting algorithm is needed.

A Note on Fragile Methods to Avoid​

You might see solutions online that use JSON.stringify(). While this can seem like a clever shortcut, it is fragile and not recommended for production code.

Example of the problem with JSON.stringify():

function areEqual(arr1, arr2) {
  // This seems easy, but it has problems.
  return JSON.stringify(arr1) === JSON.stringify(arr2);
}
note

This method will fail with arrays that contain undefined, functions, or other complex data types that are not represented correctly in JSON. It is also a "strict equality" check (order matters) unless you sort the arrays first, which adds its own complexity and side effects. For these reasons, it's better to use the more explicit and reliable every() or Set methods.

Conclusion​

Comparing arrays in JavaScript requires a clear understanding of what "equal" means for your specific use case.

  • For strict equality (same elements, same order), the most readable and modern solution is to check the length and then use the every() method with an index comparison.
  • For unordered equality (same elements, any order), the most performant and robust solution is to check the length and then use a Set combined with the every() method.

Avoid fragile shortcuts like JSON.stringify() and choose the explicit method that best matches the logic you need.

Table of Contents