Loading...

JavaScript Array methods - splice() and slice()


in this tutorials we are going to learn about splice() and splice() array methods in javascript.


Array.splice()


splice() is a built-in function in javasscript.
basically it is used to perform add/remove operations on the array.
syntax of splice() :
                                                    
splice(index, num, items)
                                                    
                                                
the splice() function requires three parameters in it.
index - refers to the starting position in the array.
num - it is used to remove items if we pass 0 then it doen't remove items in array.
for example :
if we pass 1 then remove 1 item.
if we pass 2 then it will remove 2 items.
items - it refers the items you want to add in the index position in the array.

splice() - add elements to the original array.
for example:
                                                    
var games = ["cricket", "baseball", "running", "fighting"];

/* steps
 * - start at position 1. where value is 'baseball'
 * - it will remove no item because pass 0
 * - then add 'volleyball' at position 1.
*/

games.splice(1, 0, "volleyball");

document.write(games);

output:

cricket, volleyball, baseball, running, fighting
                                                    
                                                
splice() - remove elements from the original array.
for example:
                                                    
var games = ["cricket", "baseball", "running", "fighting"];

/* steps
 * - start at position 1. where value is 'baseball'
 * - it will remove two items -> 'baseball', 'running' because pass 2
 * - then add 'volleyball' at position 1.
*/

games.splice(1, 2, "volleyball");

document.write(games);

output:

cricket, volleyball, fighting
                                                    
                                                


Array.slice()


slice() is a built-in function in javascript.
basically it is used to retrieve specific elements (items) from array.
whereas splice() performs the operations on the original array.
but splice() returns a new array object.

syntax of splice() :
                                                    
slice(start_index, end_index)
                                                    
                                                
the slice() function requires two parameters in it.
start_index - refers to the starting position in the array.
selection of the items start from this index postion.
end_index - it is optional.
it refers to upto the ending position.
selection of the items ends here (one position less than the end index position).

remember : the new array contains the items from the previous array based on their start position upto the end position.
if we doesn't pass the end_index position (which is optional) the the function going to the end of the array. it will extract the items and returns it to the new array.

slice() - retrieve or selects elements from the original array.
when both paramets are passed in slice(start_index, end_index)
for example :
                                                    
var games = ["cricket", "wrestling", "chess", "ludo", "racing", "tennis"];

/* steps
 * - start at position 1. where value is 'wrestling'
 * - end at position 3. because 4 means upto the position 4.
*/

var mygames = games.slice(1, 4);

document.write(mygames);

output:

wrestling, chess, ludo

                                                    
                                                
when one paramets is passed in slice(start_index)
for example:
                                                    
var games = ["cricket", "wrestling", "chess", "ludo", "racing", "tennis"];

/* steps : if not pas the end_index
 * - start at position 2. where value is 'chess'
 * - selection ends on the end of the array. where value is 'tennis.
*/

var mygames = games.slice(2);

document.write(mygames);

output:

chess, ludo, racing, tennis

                                                    
                                                


splice() vs slice() in javascript


splice() is used when we want to add/remove items in the original array.
whereas slice() is used when we want a sub-part of the original array.

splice() doesn't return a new array object but modifies or changes happens to the array on which we call the splice() function.
whereas slice() return a new array object which contains the elements extracts from the array on which we call the slice() function.