Arrays: Basic methods

Learning Goals

At the end of this Tutorial, you will be able to:

• Add and remove an element at the start of an array.
• Add and remove an element at the end of an array.
• Adding or removing an element at a specified index position in an array.
• Copying out part of an array to a new array, based on index position.
• Converting an array to a string.

Arrays: working with the first element

JavaScript offers two methods for working with the first element in an array. That is, the element at the [0] index position.

The shift() method

This method removes the first array element. All other elements are 'shifted' downwards to a lower index position. For example, the element that was at [1] is now at position [0]. See below.

const fruits = ["Banana", "Orange", "Pineapple", "Mango"];
fruits.shift();
let fruitShifted = fruits.shift();

This method returns the value that was removed or ‘shifted out’. The array length will be decreased by one.

The unshift() method

This method adds a new element at the beginning (position [0]) of an array, which you enter as an argument in the parenthesis (). All other elements are moved up or 'unshifted' to a higher index position. For example, the element that was at [1] is now at position [2]. See below.

const fruits = ["Banana", "Orange", "Pineapple", "Mango"];
fruits.unshift("Lemon");
let arrLength = fruits.push("Kiwi");

As with shift(), this method returns the new array length, which will be one greater than before.

Arrays: working with the last element

JavaScript offers two methods for working with the last element in an array. That is, the element with the highest index number.

The pop() method

Use this method to remove the last element from an array. See the example below.

const fruits = ["Banana", "Orange", "Pineapple", "Mango"];
fruits.pop();
let fruitRemoved = fruits.pop();

This method returns the value that was removed or ‘popped out’. The array length will be decreased by one.

The push() method

This method adds a new element at the end of an array, which you enter as an argument in the parenthesis (). See below.

const fruits = ["Banana", "Orange", "Pineapple", "Mango"];
fruits.push("Kiwi");
let arrLength = fruits.push("Kiwi");

This method returns the new array length, which will be one greater than before.

Adding and removing array elements with splice()

JavaScript offers a splice() method for adding or removing an element at a specified index position in an array. It takes the following parameters:

• The first parameter (a number) specifies the position where new elements should be added (‘spliced in’).
• The second parameter (also a number) specifies how many elements should be removed.
• The remaining parameters (any data type) are optional. If included, they define the new elements to be added, in comma-separated format.

Adding an element with splice()

In the example below, new elements are added at index position [2], zero elements are removed, and two string elements are added.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2, 0, "Lemon", "Kiwi");

The method returns an array with the deleted items, if any.

Removing an element with splice()

You can use splice() to remove elements – without leaving ‘holes’ (elements with a value of undefined) in the array.

In the example below, the first element is deleted.

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(0, 1);

Copying out part of an array

You can create a new array based on a specified part of an existing array with the slice() method. The original array is unchanged.

This method takes two arguments.

• The first or start argument defines the index position where the method will begin its copy operation.
• The second or finish argument defines the index position up to which (but not including) the method will end its copy operation. If this end argument is omitted, the method slices out the rest of the array.

The example below slices out the elements "Orange" and "Lemon".

  const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  const slicedFruits1 = fruits.slice(1, 3);

The example below slices out all elements starting from array element [1] ("Orange").

  const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  const slicedFruits2 = fruits.slice(1);

Converting an array to a string

Use the toString method to convert all the elements to a comma-separated string variable. See the example below.

  const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  const newString = fruits.toString();