How to compare arrays in JavaScript?

Comparing arrays in JavaScript might sound simple, but it can get tricky depending on whether you need a shallow comparison (checking if elements are identical in each index) or a deep comparison (handling nested objects and arrays). Below, we’ll explore various approaches, highlight some gotchas, and offer best practices so you can handle array comparisons with confidence.

1. Shallow Comparison Using Every Element

A quick way to verify if two arrays have the same length and identical elements in the same positions is:

function compareArraysShallow(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  return arr1.every((value, index) => value === arr2[index]);
}

// Example usage
const a = [1, 2, 3];
const b = [1, 2, 3];
console.log(compareArraysShallow(a, b)); 
// Output: true

When to Use: Perfect if your arrays contain only primitive values (numbers, strings, booleans). If there are objects or arrays nested inside, you’ll need a deeper check.

2. Deep Comparison with Recursion

For arrays that contain nested objects or arrays, a deep comparison approach is required:

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;

  // Check for null or undefined
  if (obj1 === null || obj2 === null) return false;
  if (typeof obj1 !== "object" || typeof obj2 !== "object") return false;

  // Check arrays and objects
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) return false;

  for (let key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}

function compareArraysDeep(arr1, arr2) {
  if (arr1.length !== arr2.length) return false;
  for (let i = 0; i < arr1.length; i++) {
    if (!deepEqual(arr1[i], arr2[i])) {
      return false;
    }
  }
  return true;
}

// Example usage
const array1 = [1, { a: 1 }, [2, 3]];
const array2 = [1, { a: 1 }, [2, 3]];
console.log(compareArraysDeep(array1, array2));
// Output: true

Key Idea: We break down each element. If it’s an object or another array, recursively compare their properties or elements.
Performance: Deep comparison can be expensive, especially with large, complex nested structures.

3. JSON Stringification (With Caution)

Another hacky method is to serialize both arrays to JSON strings and compare them:

function compareArraysJSON(arr1, arr2) {
  return JSON.stringify(arr1) === JSON.stringify(arr2);
}

Pros: Quick, especially for a quick check in test or debug code.
Cons:
- Doesn’t handle all edge cases (e.g., circular references, object methods).
- The order of properties matters in JSON—if your objects have the same properties but in different orders, they might appear identical in structure but fail string comparison if property order is not preserved.

4. Lodash or Other Utility Libraries

If you can use external libraries, Lodash provides _.isEqual() for deep comparisons:

// Using Lodash
import _ from 'lodash';

const array1 = [1, { a: 1 }];
const array2 = [1, { a: 1 }];
console.log(_.isEqual(array1, array2)); 
// Output: true

Note: Under the hood, Lodash’s isEqual or eq method uses a well-tested deep comparison. Still, for interviews or pure JS environments, it’s crucial to understand the manual approach.

When You Might Need Array Comparisons

State Management: Checking if state or props changed in frameworks like React.
Form Validation: Comparing form values before and after user input.
Unit Testing: Ensuring your functions return the exact array you expect, especially for deeply nested data.

Edge Cases

NaN: Remember, NaN === NaN is false. If you have NaN in your arrays, handle it separately if needed.
Sparse Arrays: An array like [1, , 3] has an empty slot that can complicate iteration.
Reference vs. Value: If your arrays contain objects, remember that equality is typically reference-based unless you do a deep comparison.

Big-O Notation and Complexity

Shallow Comparison: O(n), where n is the number of elements in the array.
Deep Comparison: Worst-case can be O(n * m), where m is the size of the deepest nested objects/arrays. For highly nested structures, it gets more complex.

Boost Your JavaScript Skills

If you want to sharpen your array manipulation and JavaScript fundamentals further, here are a few paths to explore at DesignGurus.io:

Grokking JavaScript Fundamentals – Strengthen your knowledge of core JavaScript, including advanced concepts that help you handle arrays, objects, and more.
Grokking the Coding Interview: Patterns for Coding Questions – Once you’re comfortable with the basics, master the key coding patterns that repeatedly show up in interviews.

For practical, hands-on experience, consider booking a Coding Mock Interview with ex-FAANG engineers, or subscribe to the DesignGurus YouTube Channel for free content on system design, coding best practices, and more.

Conclusion

Comparing arrays in JavaScript can be as simple or as involved as your data structures require. If you only have primitive data and you’re checking order and length, a shallow comparison using every() is fine. But if your arrays nest objects or other arrays, you’ll need a deep comparison solution—like a recursive function or a utility library—to ensure accuracy. Knowing these nuances not only avoids bugs but also impresses interviewers, showcasing your attention to detail and overall mastery of JavaScript. Happy coding!

CONTRIBUTOR

TechGrind