Unlike other data types we've seen so far, we can't compare two arrays by using the
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. Be careful, though, because there are edge cases where this doesn't work correctly. Let's take a look at an example where we can effectively compare two arrays - and then let's tweak one of the arrays to make it a gotcha:
> const a = [1,2,3]; > const b = [1,2,3]; > a === b; false > a.toString(); "1,2,3" > a.toString() === b.toString(); true
Great! This works. But what if one of the arrays includes strings?
> const a = [1,2,"3"]; > const b = [1,2,3]; > a === b; false > a.toString(); "1,2,3" > a.toString() === b.toString(); true
According to the rules of strict equality (
===), strings and numbers are different - as well they should be.
As with many things in computer programming, we've found a fairly effective solution that doesn't work all of the time. As a developer, a big part of your job is to find things that work - but also to understand the little ways and circumstances where things don't work.
Here is another scenario where arrays operate differently than we might expect.
Suppose we have an array that we want to keep in its original form. We also need to manipulate this array in some way. 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:
> const originalArray = [1,2,3,4,5]; > originalArray; [1, 2, 3, 4, 5] > let cloneArray = originalArray; > cloneArray; [1, 2, 3, 4, 5] > cloneArray.push(6); 6 > cloneArray; [1, 2, 3, 4, 5, 6]
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'll see the following:
>originalArray; [1, 2, 3, 4, 5, 6]
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:
const cloneArray = originalArray.slice();
Note that we use the
Array.prototype.slice() here in a slightly different way than we learned in the last lesson - without arguments. This just "slices" the whole array so we can save it in a new variable. This ensures that the new array really is an entirely separate entity instead of simply a pointer to the original array.
For more details on how the
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:
let cloneArray = originalArray;). This will only create a pointer to the original array.
To properly clone array (ie: not simply create a pointer to existing array):
const cloneArray = originalArray.slice()
To compare arrays by transforming them into strings:
const a = [1,2,3]; const b = [1,2,3]; a.toString() === b.toString();
For more details on how the
Lesson 7 of 42
Last updated May 26, 2022