FreeCodeCamp and JavaScript: The Global Array Object

I can hear you now.  “You keep telling us that an array is not an Object!  What’s up with that post title???”

Well kind of.  The type of Object I was referring to was a Global Object.  An array is a built-in object – per MDN, they are “higher level, list-like objects” –  and the Global Array Object is used to create an array.  It has methods that can be used to traverse the list (more later) and mutate (change or modify) it, among other things.  Arrays can be changed, in other words – made longer, shorter, overwritten, and so on.  They can have empty elements, too – the first element could be a string, and the hundredth element a digit, and the 98 items between could be empty.  This is called their density and as you can see, the density of a JavaScript array can be very low.  This means something when you search, sort, and so on because it can a lot of time to go through the array, even though there are just two elements you are interested, because of all the empty ones.

Apparently there are some people debating on when to use and array vs. when to use an object, MDN notes, and includes several links.  We’re not going to worry about that here, since we’re just trying to understand what the Global Array Object even is and what we can do with it.

We’re going to go out of order from MDN’s article, because they list a bunch of things to do with an array before actually defining it.  So I’m going to start with the syntax:

[element0, element1, …, elementN]
new Array(element0, element1[, …[, elementN]])
new Array(arrayLength)

The first line is an actual array.  An example would be [1,2,3,…n];. You can declare an array this way, too. The second and third lines are alternate ways to create an an array.  As far as the parameters:

element followed by a number – This is whatever you want to populate your array with. You can have as many as you need, although if you create it this way with just one element that is a number, you’ll get an array that is that length rather than an array with that number as an element – it sees it as you doing the third line above.  You can circumvent this by doing it the way it’s done on the first line.  Don’t worry, there will be examples of all of these below.

arrayLength – this is how long you want the new array to be.  It can be any integer between 0 and 2exp32 – 1.  That’s a huge range, but if you put a number above or below it, you are going to get a RangeError.

Enough description already!  Let’s look at some examples…

First, let’s create an array, with two elements, and then check its length:

var fruits = [“Apple”, “Banana”];
console.log(fruits.length);// 2

Note that we used the first method of creating an array and assigned it to a variable named fruits.  fruits has two items in it, and so its length is 2, as we see.  But remember!  Arrays in JavaScript start with 0, so “Apple” is element[0] and “Banana” is element[1]!  That means your last element is going to be the length of the array – 1.  In our example, the length is 2, and 2 – 1 means our last element is element[1].  This is going to become very important when we use a for loop, among others things.

Now, just for fun, we’re going to try to access an array element like we would if it was an Object:

console.log(arr.0); // a syntax error

Nope, doesn’t work.  That should be console.log(arr[0]);.  Let’s get the first element (element[0}) and assign it to a variable:

var first = fruits[0];// Apple

Mind you, this is the same any time you have a property that starts with digit – it cannot be referenced with “dot notation”.  MDN gives an example to demonstrate this, where 3d is the property:

renderer.3d.setTexture(model, ‘character.png’); // a syntax error
renderer[‘3d’].setTexture(model, ‘character.png’); // works properly

3d is a string, and has to be referenced with quote marks.  You can do that with an array, e.g. element[‘0’], but you don’t need to do that.  JavaScript automatically converts it to a string for you.  This means you could theoretically do the following:

console.log(years[‘2′] != years[’02’]);

And you’d get back ‘true’.  In the same way, if for some crazy reason you decide to use a ‘reserved’ word from JavaScript as a property, you have to reference it with bracket notation and quotes instead of dot notation, as in the example below:

var promise = {
  ‘var’ : ‘text’,
  ‘array’: [1, 2, 3, 4]};

console.log(promise[‘array’]);

Now let’s get a little fancy.  Let’s get the last variable by subtracting 1 from the length.  We might use this, for example, when we don’t know what the length is.

var last = fruits[fruits.length – 1];// Banana

That’s enough for today.  We’ll look at some array methods in a future post!

Advertisements

2 thoughts on “FreeCodeCamp and JavaScript: The Global Array Object

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s