The Unusual of JavaScript Arrays and their length Property

We've used methods to add/remove items from the beginning (unshift(...items)/shift()) and end (push(...items)/pop()). We've also used the toString() method on an array to convert it to a string.

In this article, we will use more methods.

Below are the methods:

splice method

Below is the syntax:

array.splice(start[, deleteCount, elem1, ..., elemN])

See the example below:

const fruits = [ "Apple", "Orange", "Melon", "Banana", "Advocado" ]

console.log( fruits.splice(2, 2) ); // [ "Melon", "Banana" ]
console.log(fruits); // [ "Apple", "Orange", "Advocado" ]

start => index 0 is Apple, 1 is Orange and 2 is Melon.

deleteCount => delete count starts from where the start ends (2) which is Melon. This means the delete count is at Melon (1) and Banana (2).

See another example below:

const fruits = [ "Apple", "Orange", "Melon", "Banana", "Advocado" ]

console.log( fruits.splice(2, 2, "Mango", "Grape") ); 
// [ "Melon", "Banana" ]
console.log(fruits); 
// [ "Apple", "Orange", "Mango", "Grape", "Advocado" ]

elem1, ..., elemN => Melon and Banana are replaced with Mango and Grape.

See another example below:

const fruits = [ "Apple", "Orange", "Melon", "Banana", "Advocado" ]

console.log( fruits.splice(2, 0, "Cherry") ); // []
console.log(fruits); 
// [ "Apple", "Orange", "Cherry", "Melon", "Banana", "Advocado" ]

deleteCount => If the delete count is 0, < 0, more items (elem1, ..., elemN) are added before where the start ends.

See another example below:

const fruits = [ "Apple", "Orange", "Melon", "Banana", "Advocado" ]

console.log( fruits.splice(-2, 1, "Cherry") ); // [ "Banana" ]
console.log(fruits); 
// [ "Apple", "Orange", "Cherry", "Melon", "Cherry", "Advocado" ]

Notice that fruits is destructive as it returns the new items in the array. The splice is a destructive method.

-start => negative start means the start counts from the last index (where length - 1). In the example above, -1 is Advocado, -2 is Banana. This means Banana is replaced with Cherry.

slice Method

Below is the syntax:

array.slice(start, end)

start => start counts from index 0
end => end counts from index 0 to end - 1

See the example below:

const fruits = [ "Apple", "Orange", "Melon", "Banana", "Advocado" ]

console.log( fruits.slice(1, 3) ); // [ "Orange", "Melon" ]
console.log(fruits); 
// [ 'Apple', 'Orange', 'Melon', 'Banana', 'Advocado' ]

Notice that fruits is non-destructive as it still returns the original items in the array. The slice is a destructive method.

start => index 0 is Apple, 1 is Orange.

end => index 0 is Apple, 1 is Orange, 2 is Melon, 3 is Banana but excluded

Since the slice method is a non-destructive method, we need to store the removed items in a new variable.

See the example below:

const fruits = [ "Apple", "Orange", "Melon", "Banana", "Advocado" ]

const newFruits = fruits.slice(1, 3); 
console.log(newFruits); // [ "Orange", "Melon" ]

concat method

Below is the syntax:

array.concat(arg1, arg2, ..., argN)

Arguments (arg1, arg2, ..., argN) can be added to an array when the concat method is used.

See the example below:

const fruits = [ "Apple", "Orange", "Melon" ];

console.log( fruits.concat(Banana", "Advocado") );
// [ 'Apple', 'Orange', 'Melon', 'Banana', 'Advocado' ]
console.log(fruits); // [ 'Apple', 'Orange', 'Melon' ]

Notice that fruits is non-destructive as it still returns the original items in the array. The concat is a non-destructive method.

Since the concat method is a non-destructive method, we need to store the added items in a new variable.

See the example below:

const fruits = [ "Apple", "Orange", "Melon" ];
const newFruits = fruits.concat(Banana", "Advocado");

console.log(newFruits); 
// [ 'Apple', 'Orange', 'Melon', 'Banana', 'Advocado' ]

The shift unshift push pop are all destructive methods.

Check the previous article to learn about the methods.

Happy coding