← Back to Concepts

Arrays

Creating arrays: array literals

Array is a list of values in a specific order.
We usually use arrays to store many items of the same type (for example, a list of student names, or a list of prices). JavaScript allows mixed types, but it's discouraged.
Create an array with an array literal: square brackets []. Values inside the brackets are called elements, separated by commas. 

const shoppingList = [];

const scores = [88, 92, 76, 100];

const myCar = 'Mazda';
const dadsCar = 'Toyota';
const cars = [myCar, dadsCar];

Key Points:

  • Create arrays with [] (array literal)
  • Arrays are lists: elements stay in order
  • Arrays usually store many values of the same type
  • You can build an array from variables - the array stores their values

Accessing items: zero-based indexes and length

Each array item has a position number called an index. JavaScript starts counting at 0, so the first item is index 0. You can also ask an array how many items it has with the array.length property. 

const fruits = ['apple', 'banana', 'cherry', 'date'];
const apple = fruits[0];
const banana = fruits[1];

console.log(fruits[4]); // undefined - last index is 3

const fruitsAmount = fruits.length;

const lastFruit = fruits[fruits.length - 1];

Key Points:

  • Zero-based The first item is index 0, not 1
  • Missing index Out-of-range access gives undefined
  • Length array.length tells you how many items exist
  • Common use case: Get the last item with array[array.length - 1]

Changing items: modify array elements

Arrays are mutable, which means you can change existing elements. Use square brackets with an index to replace a value or update it based on the current one. 

const scores = [85, 90, 78];
scores[1] = 95;

scores[0] = scores[0] + 5;
scores[2] -= 8;

Key Points:

  • Mutable You can change array elements after creation
  • Replace value Assign a new value with array[index] = ...
  • Update from current Read the current value, adjust it, then write it back. Or use shorthand operators like += or -=
  • Common use case Apply adjustments like +5 or -8 to scores

Adding items: to the end, or to the beginning

Use push() to add a new item to the end of an array. This is perfect for growing a list as new data arrives.
Use unshift() to add a new item to the beginning of an array. 

const todoList = [];
todoList.push('Buy milk');
todoList.push('Walk dog', 'Homework');

const emergencyTask = 'Call doctor';
todoList.unshift(emergencyTask);

const evenNumbers = [];
for (let i = 0; i <= 4; i += 2) {
    evenNumbers.push(i);
}

Key Points:

  • Push Adds a value to the end of an array
  • Unshift Adds a value to the beginning of an array
  • Loop fill Combine push with loops to build arrays
  • Changes original array These methods modify the array they are called on
  • Common use case: Fill array gradually in the loop

Removing items: from the end or from the beginning

Use pop() to remove the last item and shift() to remove the first item. Both methods also return the removed value, so you can store it in a variable and use it later. 

const watchList = ['Avatar', 'Matrix', 'Titanic'];
const lastMovie = watchList.pop();

const tasks = ["Call doctor", "Walk dog", "Homework"];
const firstTask = tasks.shift();

const empty = [];
console.log(empty.pop()); // undefined

Key Points:

  • Pop Removes the last item and returns it
  • Shift Removes the first item and returns it
  • Empty arrays Removing from an empty array gives undefined
  • Changes original array These methods modify the array they are called on
  • Common use case Take the next or last item from a queue or stack