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() 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() 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() 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() method adds, removes, and/or replacing 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']
// Insert item 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.