1.Adding/removing elements
push()
- Adds one or more elements at the end of an array
- Returns the new array’s length.
- Modifies the original array and returns the new length property.
Examples:
Append one element to an array
let numbers = [10, 20, 30];
const length = numbers.push(40);
console.log({ numbers });
console.log({ length });
Output:
{ numbers: [ 10, 20, 30, 40 ] }
{ length: 4 }
Add multiple elements to the end of an array
let numbers = [10, 20, 30];
const length = numbers.push(40, 50);
console.log({ numbers });
console.log({ length });
Output:
{ numbers: [ 10, 20, 30, 40, 50 ] }
{ length: 5 }
Append elements of an array to another array
// Using a for...of loop
let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];
for (const color of cmyk) {
colors.push(color);
}
console.log(colors);
Output:
['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']
// Using a spread operator (...)
let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];
colors.push(...cmyk);
console.log({ colors });
unshift()
- Adds one or more elements to the beginning of an array
- Returns the new array’s length.
- It is slow for large arrays because it needs to reindex the existing elements.
Examples:
Prepend an element to an array
let numbers = [30, 40];
const length = numbers.unshift(20);
console.log({ length });
console.log({ numbers });
Output:
{ length: 3 }
{ numbers: [ 20, 30, 40 ] }
Prepend multiple elements to an array
let numbers = [30, 40];
const length = numbers.unshift(10, 20);
console.log({ length });
console.log({ numbers });
Output:
{ length: 4 }
{ numbers: [ 10, 20, 30, 40 ] }
Prepend elements of an array to another array
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const weekends = ['Sat', 'Sun'];
for (const weekend of weekends) {
days.unshift(weekend);
}
console.log(days);
Output:
['Sun', 'Sat', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
To make it more concise, you can use the spread operator like this:
let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
let weekends = ['Sat', 'Sun'];
days.unshift(...weekends);
console.log(days);
pop()
- Removes the last element from an array
- Returns the removed element.
- Modifies the original array by changing its
lengthproperty. - If the array is empty, the
pop()returnsundefined.
Examples:
Removing the last element of an array
const numbers = [10, 20, 30];
const last = numbers.pop();
console.log({ last });
console.log({ length: numbers.length });
Output:
{ last: 30 }
{ length: 2 }
Calling the pop() method on an empty array
const numbers = [];
const last = numbers.pop();
console.log({ last });
console.log({ length: numbers.length });
Output:
{ last: undefined }
{ length: 0 }
shift()
- Removes the first element from an array
- Returns that element.
Example:
const numbers = [10, 20, 30];
let number = numbers.shift();
console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
Output:
{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }
slice()
-
slice()is used to clone an array - Returns a new array that contains the elements of the original array.
Syntax:
slice(start, stop); // start includes, stop excluding..
Example:
Clone an array
var numbers = [1,2,3,4,5];
var newNumbers = numbers.slice();
Copy a portion of an array
var colors = ['red','green','blue','yellow','purple'];
var rgb = colors.slice(0,3);
console.log(rgb); // ["red", "green", "blue"]
splice()
- To delete existing elements, insert new elements, and replace elements in an array.
- Modifies (or muate) the original array.
- To create a new array from the original with some element inserted, deleted, and replaced, you can use the
toSpliced()method.
Example:
let scores = [1, 2, 3, 4, 5];
let deletedScores = scores.splice(0, 3);
console.log({ scores });
console.log({ deletedScores });
Output:
{ scores: [ 4, 5 ] }
{ deletedScores: [ 1, 2, 3 ] }
References:
https://www.javascripttutorial.net/javascript-array-methods/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array