Arrays Basic Concepts

Arrays are fun. They aren't difficult but can become if you don't know some basic concepts. Let's begin!

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, and thus makes it return a differently arranged collection of numbers - not a copy.

In other words, the sort() method utilises the mutable nature of arrays.

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 do return copies.

You may 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 shall 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.

Remember we said that array elements can be of any type in JavaScript, and so arrays are no exception. When you have arrays as array elements you have a multi-dimension array (more specifically 2d, 3d array depending on the dimensions).

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

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

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

So when we write arr[0][1] we fetch the first element of the array arr (at index 0) and since that element is itself an array we can further fetch elements by using indexes. So now we have access to the array [1, 2] and by specifying index 1 we access the second element in this array - and hence get 2 as the output.

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 complicating but once you cover the Objects unit you will understand this much much 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.