Javascript Guide: 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