JavaScript – Beginning to work with arrays

Arrays are a data type that contain values. We can imagine an array of numbers like this:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Or we could have a list of fruits:

[ 'banana', 'strawberry', 'blueberry', 'grape' ]

An array contains other data types within itself. Each item can be referred to as an element. Let’s get the console open and start messing around with arrays.

Working with arrays

Arrays can contain any type of data within, for instance you could do something like this:

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ]

So as we see in the above example we have an array containing a bunch of different elements. One of the elements is even an array itself. The array syntax starts with an opening square bracket, [, followed by each item with a comma to separate. To close out the array we end with a closing square bracket, ]. To lookup the value at a certain position in an array we can use the lookup syntax.

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][0]
// Outputs undefined

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][1]
// Outputs 'string'

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][2]
// Outputs true

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][3]
// Outputs 3

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][4]
// Outputs [ 'array', 'inside', 'array' ]

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][0]
// Outputs 'array'

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][1]
// Outputs 'inside'

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][2]
// Outputs 'array'

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][5]
// Outputs 10

There are a couple of important things to note. The array starts at position 0, more commonly this is referred to as the index; index 0. The first element is at index 0, the second element at index 1. When we get to the array inside of an array, we use a double access array[4] grabs the inner array, then on that value we can grab any element in that so as seen above array[4][0] gives us the first inner element: 'array'.

Finding elements

Another important thing to do with arrays is to find if there is an element in one. If we had an array of numbers, we can find if a particular number exists or not like this:

[ 10, 30, 15, 1 ].indexOf( 1 )
// Outputs 3

[ 10, 30, 15, 1 ].indexOf( 10 )
// Outputs 0

[ 10, 30, 15, 1 ].indexOf( 13 )
// Outputs -1

When we try and search for 13, we get back a value of -1. This

Working with multiple arrays

Sometimes you will have two lists and need to merge them into one list. Here we have two lists of Bruce Willis movies:

[ 'Die Hard', 'Tears of the Sun', 'Sin City' ].concat( ['RED'] )
// Outputs [ 'Die Hard', 'Tears of the Sun', 'Sin City', 'RED' ]

There are definitely a lot more to arrays, but this covers the basics.

Wrapping up arrays

Arrays are a data type that contains a sequence/list of other elements. Each element has an index, and they start at 0 and count up. When you venture further into your JavaScript journey you will see how powerful arrays can be.