Arrays Basic Concepts

Back when we were studying JavaScript strings in the Strings Unit, we used the term immutable to describe the fact that once a string is created, it itself can't be modified in place by any means i.e nothing can alter the original string - only copies of the actual string are returned.

The same isn't the case with arrays in JavaScript.

This is simply the exact opposite of being immutable - it means that arrays can be, indeed, modified in place, and that the original value can be altered without the need to make copies.

Following is an illustration:

var arr = [9, 5, 1];
console.log(arr); // [9, 5, 1]

arr.sort(); // a method utilising the mutability of arrays
console.log(arr); // [1, 5, 9]

Here we have the sort() method sorting the values inside the array arr. Notice how in line 5, we log the exact same variable arr, but get a different version returned than the one created (in line 1), without reassigning a value to arr.

This is because the sort() method makes changes to the actual array arr. Only because arrays are , mutable, it's possible for sort() to modify the original array.

This isn't the case with strings - no single string method can modify the original value. All string methods can only return new modified versions of the original string.

Now one important thing to realise in conjunction to array methods and the concept of mutability, is the fact that NOT all methods modify an array in-place - some even return copies.

You might think that this is in contradiction to the idea of mutability, but it isn't. We said that arrays are mutable, not that every method has to utilise this idea!

It's upto the developer whether he wants to modify the original array in-place, or not, and instead make a copy. There's no restriction on using one way or the other - it all depends on the purpose we want to achieve.

As an example, following we have the concat() method returning a copy of the array arr:

var arr = [9, 5, 1];
console.log(arr); // [9, 5, 1]

arr.concat([7, 2]); // a method not utilising the mutability of arrays
console.log(arr); // [9, 5, 1] -> the array hasn't changed

In all of the examples of arrays you have seen uptil now how many times did we need to specify an index? Once? Yes, absolutely and therefore all those arrays can be called single dimension arrays.

Recall the fact that array elements can be of any type in JavaScript - and arrays are no exception!

When we have arrays as array elements we have a multi-dimension array. More specifically the array can be two dimensional (2D), three dimensional (3D), and even further than that.

Take a look at the code below:

var arr = [[1, 2], [5, 3]]; // a 2d array

The array arr has two elements - both arrays themselves.

If we want to access the number 1 in the code above, we need to first refer to the first element of arr, and then to the first element of this selected array.

The following snippet logs all the four numbers in the code above:

console.log(arr[0][0]); // 1
console.log(arr[0][1]); // 2
console.log(arr[1][0]); // 5
console.log(arr[0][1]); // 3

When we write arr[0][1], arr[0] returns the first element of arr, and since this element is itself an array, we can further fetch elements by using the same notation.

The part [1], after arr[0], fetches the second element out of the array arr[0] which is [1, 2], and consequently returns 2.

Such simple!

If you want to check whether a given value is an array, you can surely do that in JavaScript, but at least not using the typeof operator. Can you recall the answer for why is typeof useless in conjunction with arrays back from the Data Types chapter?

Well the answer is simply because the operator returns "object" even for arrays!

var arr = [1, 2];
console.log(typeof arr) // "object"

So how can we check for an array? Well there are a couple of ways:

The Array.isArray() method

This first solution is the isArray() method on the global Array object. It returns true or false depending on whether the given parameter is an array or not.

Consider the following code:

var arr = [1, 2]; // an array
var obj = {text: "I am an object!"}; // an object

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

Here, since arr in an actual JavaScript array, the method returns true when the variable is passed to it. In contrast, since obj is not an array, the method returns false for it (in line 5).

The constructor property

You can also utilise the constructor property of arrays together with the indexOf() method of strings to check for arrays.

This might look complicated right now, but once you cover JavaScript Objects (specifically JavaScript Object Constructors), you will understand this far more better.

var arr = [1, 2]; // an array
var obj = {text: "I am an object!"}; // an object

console.log(arr.constructor.toString().indexOf("Array") !== -1); // true
console.log(obj.constructor.toString().indexOf("Array") !== -1); // false

Choose whatever you think is better!

Upto this point you have learned a ton of stuff on arrays in JavaScript which you can apply to other areas in your programming journey. One of those areas is luckily the next chapter and the upcoming quiz - both of which need this knowledge.