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. Thesplice
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. Theslice
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. Theconcat
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