Arrays

Primitives

We have already seen that JavaScript has 7 primitive data-types : number, string, boolean, undefined, null, symbol and bigint. These data types are the fundamental types we use in the JavaScript. However, it would become increasingly difficult to manipulate groups of data if the language only permitted the use of primitive data types.

Storing multiple items

Consider a situation where we want to create multiple variables that represents a list of data:

const item0 = 'apple';
const item1 = 'banana';
const item2 = 'strawberry';

We could continue to create variables in this way: however, we would have to keep declaring new variables every time we wanted to add something to this list. Instead we can think of storing this data in a single data structure

Arrays

A JavaScript array is an ordered collection of data.

Declaring arrays

JavaScript arrays are written using [ and ] with each item inside the square brackets separated by a comma. We can create an array in the following way:

const items = ['apple', 'banana', 'strawberry'];

items is an array containing 3 elements, an element being an item inside the array. The strings, "apple", "banana" and "strawberry" are said to be the 3 elements making up the array items.

Zero indexing

In computer science, zero indexing means that we start counting ordered collections from zero. All JavaScript arrays are zero-indexed. We can use the index position together with square bracket notation in order to access an array element at a specific position:

const letters = ['a', 'b', 'c'];
letters[0]; // evaluates to 'a'
letters[1]; // evaluates to 'b'

An array can be accessed with a position that is bigger than the array length: however, in this case the access will evaluate to undefined:

const letters = ['a', 'b', 'c'];
// only 3 items
letters[5]; // evaluates to undefined

.length

All arrays have a .length property indicating the number of items present inside the array. In other languages, arrays and ordered collections of data have limitations on the amount of data they can store. In JavaScript, the physical limitations of an array length are usually far beyond what will normally be needed. In addition, Javascript arrays can hold items of multiple data types, this makes them extremely flexible data structures. The .length property of an array will be updated when an arrays contents are altered. Javascript arrays are said to be mutable as we can update their contents over time.

const items = ['apple', 'banana', 'strawberry'];
items.length; // will be 3
items[3] = 'kiwi'; // this will insert an item "kiwi" at index position 3
items.length; // will now be 4

Methods

We will frequently want to update arrays by adding or removing items. JavaScript arrays come with some inbuilt methods (i.e. functions) that can be chained onto arrays themselves: .push() is a mutating array method. It will mutate an array by adding an item to the end of an array.

const letters = ['a', 'b', 'c'];
letters.push('d');
// letters is now ["a", "b", "c", "d"];

.pop() is a mutating array method that acts by removing an item from the end of an array.

const letters = ['a', 'b', 'c'];
const lastLetter = letters.pop(); // lastLetter is now 'c'
// letters is now ["a", "b"];

.shift() and unshift() work similarly to push and pop, but act at the beginning of the array:

const letters = ['a', 'b', 'c'];
// shift to remove an item from the front of an array, and return its value
const firstLetter = letters.shift(); // firstLetter is now 'a'
// letters is now ["b", "c"];
// unshift to add a value to the front of an array
helpers.unshift('z');
// letters is now ["z", "b", "c"];

There are many more methods listed in the Arrays MDN Documentation (opens in a new tab)

Nested arrays

Arrays can also contain other arrays. For example:

const bestTrilogies = [
  ['fellowship', 'twin towers', 'return of the king'],
  ['a new hope', 'empire strikes back', 'return of the jedi'],
  ['godfather I', 'godfather II', 'godfather III'],
];
const episode4 = bestTrilogies[1][0]; // 'a new hope'