Articles

Javascript Guide: Arrays

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"];
Related Course

Learn JavaScript: Arrays and Loops

Create and manipulate arrays and execute efficient repetitions using loops to develop meaningful programs.Try it for free

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
Codecademy Team

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Meet the full team

Related articles

Learn more on Codecademy

Contents