Arrays: Literals, Indexing, and Core Manipulation Methods

In JavaScript, an array is a special type of object that is used to store ordered collections of values. Each value (element) in an array has a numerical position called an index, starting from 0. Arrays are incredibly versatile and are used to manage lists of items, sequences of data, and much more.

This lesson covers how to create arrays, access their elements, and modify them using essential built-in methods.

1. Array Literals: Creating Arrays

The simplest and most common way to create an array is using an array literal.

Syntax: [value1, value2, value3, ...]

• Arrays can hold values of any data type, and you can mix types within a single array.
• Elements are separated by commas.

Example

2. Indexing: Accessing and Modifying Elements

Array elements are accessed using their index, which is their position in the array. Arrays are zero-indexed, meaning the first element is at index 0, the second at index 1, and so on.

a) Accessing Elements

Use square brackets [] with the index number.

const colors = ['red', 'green', 'blue'];
console.log(colors[0]); // 'red'
console.log(colors[1]); // 'green'

b) length Property

The length property returns the number of elements in an array. The last element's index is always array.length - 1.

const items = ['a', 'b', 'c'];
console.log(items.length);    // 3
console.log(items[items.length - 1]); // 'c'

c) Out-of-Bounds Access

Accessing an index that doesn't exist will return undefined.

const data = [10, 20];
console.log(data[2]); // undefined

d) Modifying Elements

You can change an element's value by assigning a new value to it using its index.

const names = ['John', 'Jane'];
names[0] = 'Jonathan'; // names is now ['Jonathan', 'Jane']

3. Adding and Removing Elements: push(), pop(), shift(), unshift()

These methods are specifically designed for adding or removing elements from the ends of an array.

a) push(): Add to End

• Adds one or more elements to the end of an array.

• Returns the new length of the array.

  const arr = [1, 2];
  arr.push(3);        // arr is [1, 2, 3]
  arr.push(4, 5);     // arr is [1, 2, 3, 4, 5]
  console.log(arr.push(6)); // 6 (new length)
  

b) pop(): Remove from End

• Removes the last element from an array.

• Returns the removed element.

• Modifies the original array.

  const arr = [1, 2, 3];
  const lastElement = arr.pop(); // lastElement is 3, arr is [1, 2]
  

c) shift(): Remove from Beginning

• Removes the first element from an array.

• Returns the removed element.

• Modifies the original array. All other elements' indices shift down.

  const arr = [1, 2, 3];
  const firstElement = arr.shift(); // firstElement is 1, arr is [2, 3]
  

d) unshift(): Add to Beginning

• Adds one or more elements to the beginning of an array.

• Returns the new length of the array.

• Modifies the original array. All existing elements' indices shift up.

  const arr = [3, 4];
  arr.unshift(2);       // arr is [2, 3, 4]
  arr.unshift(0, 1);    // arr is [0, 1, 2, 3, 4]
  console.log(arr.unshift(-1)); // 6 (new length)
  

4. splice(): The Versatile Array Manipulator

The splice() method is a powerful and versatile tool for modifying an array by removing, replacing, or adding elements at any specified position. It modifies the original array and returns an array containing the deleted elements (if any).

Syntax: array.splice(startIndex, deleteCount, item1, item2, ...)

• startIndex (Required): The index at which to start changing the array.
  • If negative, it counts from the end of the array.
• deleteCount (Optional): The number of elements to remove from startIndex.
  • If 0, no elements are removed.
  • If omitted or greater than array.length - startIndex, all elements from startIndex to the end of the array will be deleted.
• item1, item2, ... (Optional): The elements to add to the array, starting at startIndex. If no elements are specified, splice() only removes elements.

Returns: An array containing the deleted elements. If no elements are removed, an empty array is returned.

5. Iterating Over Arrays

You can iterate over array elements using various loop constructs:

• for loop: Traditional loop using an index.
• forEach() method: A higher-order array method that executes a provided function once for each array element.
• for...of loop (ES6+): A simpler, more readable loop for iterating directly over element values.

Exercise: Array Manipulation Challenge

Work through the following exercises to practice array creation, access, and modification methods.