Arrays in JavaScript - Arrays[0]

I wanted to write about arrays because I find them fun and a great entry point for developers to “play” with data. We’ll cover some background, get through the basics and then begin diving deeper. I would be remissed if I didn’t mention and encourage everyone to check out the MDN documentation.

BACKGROUND

Array

The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.

Description

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array’s length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.

PLAYGROUND

First, a couple ways to make an empty array. Good news is: they all return the same empty array. And to clarify, not the same object/instance of that array!

And just to look a little deeper, we see four empty arrays and each has the all the methods from Array.prototype available.

While we’re doing that, let’s utilize “Array.isArray()” as another way to see if these are each an array. We have to take the Array class, chain the .isArray() method and pass in the object we want to check in this method. Check to see if the object is an array. Returns boolean (true/false)

BASICS

Let’s begin playing with our array. We’ll throw some numbers in there, but this could be just about anything.

.push()

Adds one or more elements to the end of an array, and returns the new length of the array.

So note that when you call the .push() method, the return is the length as a number. We can check this by comparing it with the triple equals operator and chaining “.length”

.unshift()

Adds one or more elements to the front of an array, and returns the new length of the array.

Just like above, when you call the .unshift() method, the return is the length as a number. We can check this by comparing it with the triple equals operator and chaining “.length”

.splice(start, deleteCount)

Adds and/or removes elements from an array.

.splice(start) The index at which to start changing the array. If you enter a number without a second parameter, it will delete everything in the array, but it does not mutate the original array.

.splice(start, deleteCount) This will return the deleted values and mutate the array.

.slice(start, end)

Extracts a section of the calling array and returns a shallow copy of the array.

Accessing values

Arrays are built starting at the zeroth item, meaning the first item in the array has an index value of 0

In the last line from above, we’re actually doing a little bit of logic to get the last item in the array. Broken down, it’s this:

testArray2.length is 5 because there are currently 5 items in the array. So 5 minus 1 equals 4, and that value in testArray2 gives us the last item.

This will lead to more involved logic later when diving into loops and recursion.

More to come…