Javascript Guide: Arrays

Codecademy Team
Use this guide to brush up on interacting with JavaScript arrays.

Arrays

Arrays are JavaScript’s ordered lists that can store any data types including Strings, Numbers, and Booleans.

Each item inside of an array is at a numbered position.

Syntax

  • An array is represented by square brackets and the content inside.
  • Elements within an array should be separated by commas.
let colors = ["red", "blue", "green", "yellow"];

Access & Update Elements

To access or change an individual item in an array, we use its numbered position. The positions in an array are zero-indexed, meaning the positions start counting from 0.

Syntax

Follow the name of the array with the index of the item within brackets to be accessed or updated.

console.log(colors[3]);

Output:

yellow

To update an item, set the array and index equal = to the new value.

colors[1] = "purple";
console.log(colors);

Output:

[ 'red', 'purple', 'green', 'yellow' ]

Arrays with let and const

The contents of an array declared with the keyword const and let can be changed; however the const declared array cannot be reassigned a new array or different value.

const capitals = ['Athens', 'Paris', 'London', 'Tokyo'];
capitals[1] = "Berlin";
console.log(capitals);

Output:

[ 'Athens', 'Berlin', 'London', 'Tokyo' ]

When we try to reassign capitals a new value, we get an error.

capitals = "Moscow";

Output:

TypeError: Assignment to constant variable.

Built-in Properties & Methods

Built-in Properties

Properties are used to retrieve certain information about the instance of a data type.

Syntax

To utilize a property, follow the name of the array with a period and the property name.

The length property returns the number of elements in the array capitals.

const capitals = ['Athens', 'Paris', 'London', 'Tokyo'];
console.log(capitals.length);

Output:

4

Built-in Methods

Methods are called on an array to execute certain tasks like adding and removing elements.

Syntax

To utilize a method, follow the name of the array with a period and the method name.

.push() is a method that adds items to the end of an array.

const seasons = ['Winter', 'Spring', 'Summer'];
seasons.push('Autumn');
console.log(seasons);

Output:

[ 'Winter', 'Spring', 'Summer', 'Autumn' ]

.pop() is a method that removes the last element of an array.

const seasons = ['Winter', 'Spring', 'Summer'];
seasons.pop();
console.log(seasons);

Output:

[ 'Winter', 'Spring' ]

Both .pop() and .push() mutate or change the array on which they are called.

Arrays and Functions

If an array is mutated within a function, that change will be maintained outside of the function as well.

const names = ['John', 'Maria', 'Will', 'Anna'];
function addName(arr) {
arr.push('Samuel');
}
addName(names);
console.log(names);

Output:

[ 'John', 'Maria', 'Will', 'Anna', 'Samuel' ]

Nested Arrays

Arrays can be nested or contain other arrays.

Syntax

To access the elements within the nested array, chain more bracket notation with index values.

const pizzaOrders = [['Pepperoni', 'Coke'], ['Margherita', 'Pepsi']];
console.log(pizzaOrders[1]);
console.log(pizzaOrders[1][0]);

Output:

[ 'Margherita', 'Pepsi' ] 
Margherita