Using the Slice, Splice and Split Array methods in JavaScript - Kevin Uriel Fonseca

What are Arrays?

In order to be able to work with these methods you should have a basic understanding of how an array works in JavaScript.

A regular array would only accept one data type for each single value stored in it such as this one below:

const myIntegerArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const myStringArray = ["One, Two, Three, and so on"]; // commas are part of the string as well.
const myDoubleArray = [1.10, 2.15, 3.20, and so on];
consy myCharArray = [a, A, b, B, c, C, d, D, and so on]

JavaScript’s Arrays are a bit different allowing us to have a powerful list of data. Here it’s the example above using JavaScript.

const myMultipurposeArrayYAY = [1, "Two", 3.0, F]; // Cool, is not it?

In the previous examples, the keyword const is being used for preference. These types of array can not be re-assigned/referenced to a new array. If you need them to have them re-assigned, please use let.

– Geeks for Geeks

Now that you have seen what an array looks like in JavaScript, let’s get ahead and continue with these powerful methods.

Slice()

It copies an array from an starting to ending point; to make it more clear, you control the range to take values from and then it returns them as a new array.

let mySliceArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Assuming that we have an array of 10 integers as shown above, we can then take the numbers from 5 – 9 and return them as a new array, let’s see how it would look like.

let mySliceArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let myNewSliceArray = mySliceArray .slice(4, 8); // This is how you get to use it
/*
* AND THIS WOULD BE THE RESULT
*/
[5, 6, 7, 8];

Worth to notice that slice() does not keep record of the last index/element. That’s the reason you only see the numbers taken from 5-8 instead of 5-9.

– Google developers tool

Hard to understand the previous concept? well, put it simple, slice() just takes two parameters, the starting index and the ending one; these can be read as slice(from, one before X) where X is the value you have declared.

Splice()

Similar in name with slice() but with a different approach in handling data stored in arrays. These approaches can be use to add and/or remove elements from an array.

This method works similarly to slice() but instead of defining a range of numbers to return in a new array, we define the index(starting point) and a second parameter(the ending point) which will work as the number of elements to remove.

To Remove.

Hopefully by now you have gotten yourself a very basic understanding of the different data types an array can be built off. As mentioned before, splice() looks exactly as slice() but instead of defining the range of numbers to return in a new array, we define the starting and last indexes to tell the browser/terminal to remove the elements found between the specified elements.

let myRemovableArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // We declare our initial array.
myRemovableArray.splice(0, 5); // It takes the starting index and the number of elements you want to remove as a second parameter.
/*
* THIS WOULD BE THE RESULT AFTER USING SPLICE TO REMOVE.
*/
[1, 2, 3, 4, 5];

There’s a second approach in removing elements with this method and that’s by passing just one parameter but be cautious with this one as it wrongfully used can actually make you look bad!. Look at it:

let myRemovableArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // We declare our initial array.
myRemovableArray.splice(3); // All of the elements after the index will be removed.
/*
* THIS WOULD BE THE RESULT AFTER USING SPLICE TO REMOVE.
*/
[4, 5, 6, 7, 8, 9, 10];

To Add

Pretty much the same as we previously used it but with more than two parameters depending on how many we would like to add.

let myPopulateArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // We declare our initial array.
myPopulateArray.splice(10, 0, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20); // All of the elements created after the index 10 should have been added into the array when checked on the browser/terminal.
/*
* THIS WOULD BE THE RESULT AFTER USING SPLICE TO REMOVE.
*/
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

Did you see the second index as 0?, remember that’s the parameter to define how many elements we would like to remove which is something we don’t want right now, just leave it at zero!.

Secondly, the number 10 as the starting index is just telling you to add the elements from 11 – 20 after itself. If you want to put the new elements in the very beginning, then replace it with a 0!.

– Google Developers tool

Split()

This one is not exactly for arrays but I decided to put it on this post because you have to transform a declared array into a string to make it work with this method.

let myPopulateArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // We declare our initial array.
myPopulateArray.toString(); // We first need to transform our array into a string via the toString() method.
// Then it would return this:
["1, 2, 3, 4, 5, 6, 7, 8, 9, 10"]; // The same as before but now commas are part of the array if you put it that way.

Great!. Since our array is now a string, we can work with split(), YAY!. split() only takes two parameters and both of them are optional, is not it great?. The first one is the separator, it can be a comma, space, dot, a letter, char, whatever you define! and the second parameter is the limit in which you define how many sub-strings you would like to return from the array.

let myStringArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Our initial array
let newArray = myStringArray.toString(); // Which we transform into a string
let newStringArray = newArray.split(',', 5); // Then we tell it to split it by using commas and X number
/*
* THIS WOULD BE THE FINAL RESULT
*/
["1", "2", "3", "4", "5"];

That’s all regarding the split() method. As mentioned above, the two parameters are optional; you can also only pass an empty parameter also, see below:

let newStringArray = newArray.split('');

The outcome of this it’s a bit different but nothing wrong, it is actually useful in some cases but I will let you discover that by yourself!.

A Review!

Coding JavaScript is one of the best experiences you will ever learn as a developer. Take your time and evolve with it, its fun!.

– Kevin Fonseca.

Thanks for reading this long ass post. BYE-BYE 🙂 !.

Remember to read my previous post on React, I shared some shortcuts that I use every time I create a new app and/or component…this is the second post on the entire life of this blog that I think is useful to people, I thanks myself for doing the best I could in rephrasing this whole post. Peace out and see you later guys!.

If you want to know more about Web Development with NodeJS, take a look into this book: