JavaScript, often regarded as the oracle of web development, relies on arrays as a fundamental data structure for organizing and storing elements. It also employs helper methods, such as slice and splice, to access and modify arrays.

In this article, we will learn more about the fundamentals of using these helper functions in our day-to-day activities.

Javascript Array Slice

The slice method creates a new array of an element without modifying the original array. It can also be used to replicate or clone a subset of elements. It takes one or two arguments.

const newArray = array.slice(startIndex, endIndex)

• startIndex: This is where the extraction begins(inclusively). If omitted, the slice automatically begins at index 0.

• endIndex: This is where the extraction stops(exclusively). if omitted it extracts all the elements from the startIndex to the end of the array.

Example:

const number = [1, 2, 3, 4, 5]

const newArray = number.slice(1, 3)

console.log("newArray===", newArray) //[2, 3]

In this example the slice method starts from an index of 1 which is the first index and later run calls the last index 3. So, let's get it clear there are 5 elements in the array right, now you know counting an index in an array is primarily starting from 0, 1, 2, 3....etc. In this example, the array contains elements ranging from 1 to 5 like this- [1, 2, 3, 4, 5], When counting the index, It should start from 0, 1, 2, 3, 4. Therefore, in the number.slice(1, 3) the number.slice(1) counts from index 0, 1, represents 2 and number.slice(3) counts from an index of 1, 2, 3 excluding the initial index 0.

Cloning Elements with slice:

const number = [1, 2, 3, 4, 5]

const newArray = number.slice()

console.log("newArray===", newArray)

In this example, the slice method clones a new array of number and insert it in another array called newArray.

If only the beginning index is passed, the ending will be assumed to be the maximum index.

Example:

const number = [1, 2, 3, 4, 5]

const newArray = number.slice(1)

console.log(newArray) //[2, 3, 4, 5]

Javascript Array Splice

The splice() method modifies the contents of an array by removing existing elements or adding new elements.

Removing Elements Using Js Splice()

The splice() method in JavaScript can be used for removing or deleting elements in an array.

const names = array.splice(position, num)

position: The index where the operation starts.

num: The number of elements to be removed starting from the position index.

Example:

const names = ['Jack', 'Ade', 'Sandra', 'Bruno', 'Amos']

const newArray = number.splice(1, 2)

console.log(newArray) // ['Ade', 'Sandra']

Adding Elements Using Js Splice()

The splice() method in JavaScript can be used for adding elements in an array.

const names = array.splice(position, deletecount, element1, element2, ...element10)

position: The index where the operation starts.

deletecount: The number of elements to be removed starting from the position index.

element1, element2, ...element10: Elements to be inserted at the position index.

Example:

const names = ['Jack', 'Ade', 'Sandra', 'Bruno', 'Amos']

const removedElement = number.splice(2, 2, 'Akin', 'Samuel')

//console.log(removedElement) // ['Sandra', 'Bruno'] 
//names: ['Jack', 'Ade', 'Akin', 'Samuel', 'Amos']

Differences between the Slice and Splice method

slice: method creates a new array of an element without modifying the original array.

const newArray = array.slice(startIndex, endIndex)

Example:

const number = [1, 2, 3, 4, 5]

const newArray = number.slice(1, 3)

console.log("newArray===", newArray) //[2, 3]

splice: modifies the contents of an array by removing existing elements or adding new elements.

const names = array.splice(position, deletecount, element1, element2, ...element10)

Example:

const names = ['Jack', 'Ade', 'Sandra', 'Bruno', 'Amos']

const removedElement = number.splice(2, 2, 'Akin', 'Samuel')

//console.log(removedElement) // ['Sandra', 'Bruno'] 
//names: ['Jack', 'Ade', 'Akin', 'Samuel', 'Amos']

Conclusion

JavaScript array methods like slice and splice plays a vital role in Data Structures and Algorithms. slice is literally for creating new arrays without modifying the original, while splice does the work of modifying the contents of an array by removing existing elements or adding new elements.