Lesson Weekend

Comparing Arrays

Unlike other data types we've seen so far, it is not possible to compare two arrays by using the === comparison operator. In JavaScript, two primitive data type values can be the equal: For example, "abc" is the same as any other "abc". But arrays are different - no two arrays are the same, even if they have the same elements inside.

If you need to compare the contents of two arrays, one way to accomplish this is to transform the arrays into strings using the toString() function on each and comparing the return values. This will work when the elements are all data types that we have worked with previously, such as strings, numbers, and booleans.

Try this example in the console:

> var a = [1,2,3]
> var b = [1,2,3]
> a === b
false
> a.toString();
"1,2,3"
> a.toString() === b.toString();
true

Cloning Arrays

Here is another scenario where arrays may operate differently than we expect.

Suppose we have an array, and we want to keep in its original form; but we also need to manipulate in some ways. We might have one variable hold the original array and another variable with a copy of the same array that we can change.

Try this in the console:

>var originalArray = [1,2,3,4,5]
> originalArray
[1, 2, 3, 4, 5]
>var cloneArray = originalArray
>cloneArray
[1, 2, 3, 4, 5]
>cloneArray.push(6)
6
>cloneArray
[1, 2, 3, 4, 5, 6]

What does originalArray look like now? We haven't touched it, so we may assume it would retain its original value of [1,2,3,4,5]. But if we check it again in the console, we see:

>originalArray
[1, 2, 3, 4, 5, 6]

In JavaScript, the array is stored in memory, and the two variables originalArray and cloneArray are called pointers. A pointer references an object in memory but is not the object itself. Therefore, as the array is changed, the new value is reflected in all of the variables that point to it.

The way to clone an array without simply making another pointer is to create a new variable set to a new array:

var cloneArray = originalArray.slice()

This ensures that the new array really is an entirely separate entity, instead of simply a pointer to the original array.

Additional Resources

For more details on how the slice method works, check out MDN's Javascript documentation on the Array.prototype.slice method.

Terminology


  • Pointer: A reference to an object in memory but not the object itself; for example, a variable that is set to an array does not contain the array itself but rather a pointer to the saved array.

Tips


  • No two arrays are the same, even if they have the exact same contents inside!

  • Arrays cannot be compared with the === operator. However, they may be transformed into strings with .toString(), and those strings may be compared with ===.

  • Arrays cannot be cloned by setting a new variable name to the original array (ie: var cloneArray = originalArray;). This will only create a pointer to the original array.

Examples


To properly clone array (ie: not simply create a pointer to existing array):

var cloneArray = originalArray.slice()

To compare arrays by transforming them into strings:

var a = [1,2,3]
var b = [1,2,3]

a.toString() === b.toString();

Additional Resources


For more details on how the slice method works, check out MDN's Javascript documentation on the Array.prototype.slice method.