DEV Community

loading...
Cover image for The Unusual of JavaScript Arrays and their length Property

The Unusual of JavaScript Arrays and their length Property

bello profile image Bello ・3 min read


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])
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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" ]
Enter fullscreen mode Exit fullscreen mode

concat method

Below is the syntax:

array.concat(arg1, arg2, ..., argN)
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

The shift unshift push pop are all destructive methods.

Check the previous article to learn about the methods.

Happy coding


image.png


image.png

Discussion (0)

pic
Editor guide