Understanding slice( ), splice( ), & split( ) methods in JavaScript

In this tutorial, we are going to learn slice( ), splice( ), & split( ) methods in JavaScript with examples. This methods are mostly used in react and react native application development, so i though to share my knowledge and some real time examples :

Point to remember : 

• Slice( ) and splice( ) methods are used for arrays.

• Split( ) method is used for strings.

Slice () :

The slice( ) method copies a given part of an array and returns that copied part as a new array. It doesn’t change the original array.

Syntax :

array.slice(from, until);

From: Slice the array starting from an element index
Until: Slice the array until another element index

Lets see the below example for slice method :

var employeeName = ['skptricks', 'sumit', 'amit', 'rakesh', 'anil'];

// Extract array element from index-2 
console.log(employeeName.slice(2));

// Extract array element from index 2 and n-1 index
console.log(employeeName.slice(2, 4));

// Extract array element from index 1 and n-1 index
console.log(employeeName.slice(1, 5));

Output:-
-----------------------

> Array ["amit", "rakesh", "anil"]
> Array ["amit", "rakesh"]
> Array ["sumit", "amit", "rakesh", "anil"]

Splice () :

The name of this function is very similar to slice( ). The splice( ) method changes an array, by adding or removing elements from it. Lets see how to add and remove elements with splice( ):

Syntax :

array.splice(index, number of elements);

index : starting element index.
number of elements: number of element to remove

Removing an element using splice method :

var months = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July'];

// removing by index
months.splice(6);
console.log(months)

// removing by index and number of element
months.splice(4, 3);
console.log(months)

// removing by index and number of element
months.splice(1, 3);
console.log(months)

Output:
------------------------------

> Array ["Jan", "Feb", "March", "April", "May", "June"]
> Array ["Jan", "Feb", "March", "April"]
> Array ["Jan"]

Adding an element using splice method :

var months = ['Jan','April', 'May', 'July'];

// adding by index, no element removed
months.splice(1, 0,'Feb', 'March');
console.log(months)

// adding by index, no element removed
months.splice(5, 0,'June');
console.log(months)

// adding by index , 5 elements removed
months.splice(2, 5,'Dec');
console.log(months)

Output:
------------------------------

> Array ["Jan", "Feb", "March", "April", "May", "July"]
> Array ["Jan", "Feb", "March", "April", "May", "June", "July"]
> Array ["Jan", "Feb", "Dec"]

Split ( ) :

Slice( ) and splice( ) methods are for arrays. The split( ) method is used for strings. It divides a string into substrings and returns them as an array. It takes 2 parameters, and both are optional.

Syntax:

string.split(separator, limit);

Separator: Defines how to split a string… by a comma, character etc.
Limit: Limits the number of splits with a given number

Lets see the below example :

var str = 'Hello everyone!! how are you ??';

// split value by pattern
var words = str.split(' ');
console.log(words);

// split value by limits
var words = str.split(' ', 3);
console.log(words);

Output:
------------------------------

> Array ["Hello", "everyone!!", "how", "are", "you", "??"]
> Array ["Hello", "everyone!!", "how"]

This is all about  slice( ), splice( ), & split( ) methods in JavaScript. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.