Array Manipulation

Once an array has been defined, it often becomes necessary to manipulate that array by adding, removing, and arranging the items of the array. Fortunately, JavaScript provides many methods for manipulating arrays.

NOTE

ALL of the following methods will alter the original array.

The push() Method

The push()open in new window method adds one or more items to the end of an array and returns the new length of the array.

const groceries = ['Apples', 'Milk']

console.log(groceries.push('Bread')) // 3
console.log(groceries) // ['Apples', 'Milk', 'Bread']


groceries.push('Yogurt', 'Bananas')

console.log(groceries)
// ['Apples', 'Milk', 'Bread', 'Yogurt', 'Bananas']

The pop() Method

The pop()open in new window method removes the last item from an array and returns the item removed.

const groceries = ['Apples', 'Milk', 'Bread']

console.log(groceries.pop()) // Bread
console.log(groceries) // ['Apples', 'Milk']

The shift() Method

The shift()open in new window method removes the first item from an array and returns the item removed.

const groceries = ['Apples', 'Milk', 'Bread']

console.log(groceries.shift()) // Apples
console.log(groceries) // ['Milk', 'Bread']

The unshift() Method

The unshift() method adds one or more items to the beginning of an array and returns the new length of the array.

const groceries = ['Apples', 'Milk']

console.log(groceries.unshift('Bread')) // 3
console.log(groceries) // ['Bread', 'Apples', 'Milk']


groceries.unshift('Yogurt', 'Bananas')

console.log(groceries)
// ['Yogurt', 'Bananas', 'Bread', 'Apples', 'Milk']

The splice() Method

The splice()open in new window method adds, removes, and/or replace items anywhere in the array, not just at the beginning or end. This method can take three parameters, start (the index of where to start), deleteCount (the number of items to remove from the array), and items (the item or items to add to the array)

const groceries = ['Apples', 'Milk', 'Bread']

// index 1 deleteCount 0 item Yogurt
// this will add item Yogurt at index 1
groceries.splice(1, 0, 'Yogurt')

console.log(groceries) // ['Apples', 'Yogurt', 'Milk', 'Bread']

// Removes item at index 2
groceries.splice(2, 1)

console.log(groceries) // ['Apples', 'Yogurt', 'Bread']

// Removes the first two items, Inserts a new item. 
groceries.splice(0, 2, 'Carrots')

console.log(groceries) // ['Carrots', 'Bread']

This YouTube video was created by Steve Griffith.

# Array Manipulation

# The push() Method

# The pop() Method

# The shift() Method