JS | Array Mutations: push, pop, sort & splice Explained!

Hello my fellow frontend developer friends, today i will be discussing array methods on steroids. You must buckle your seatbelt as this journey is going to be a bit long. I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup. Additionally, I'll be including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results. i will be using scrib.show from scribbler.live, it is equivalent to console.log Let's dive in. Table of contents Mutating method Push Pop Unshift Shift Sort Reverse Splice Conditional push Conditional filtering Mutating array methods These methods modifies the original array itself instead of creating a new array for the result, these includes: push - adds a new element to the array at the end pop - removes an element from the end of the array unshit - adds a new element to the beginning of the array shift - removes an element from the beginning of the array sort - sort the array in ascending or descending order reverse - reverse the array from end to start splice - could add, remove or replace elements from any index fill - could bulk add the elements to the array with same value. Push method // push method const tags = ["html", "css", "javascript", "react"] tags.push("nextjs") scrib.show("Push - ",tags) // ["html","css","javascript","react","nextjs"] Pop method // pop method const tags = ["html", "css", "javascript", "react"] tags.pop() scrib.show("Pop - ",tags) // ["html","css","javascript"] Unshift method // unshift method const tags = ["html", "css", "javascript", "react"] tags.unshift("nextjs") scrib.show("Unshift - ",tags) // ["nextjs","html","css","javascript","react"] Shift method // shift method const tags = ["html","css", "javascript", "react"] tags.shift() scrib.show("Shift - ",tags) // ["css","javascript","react"] Sort method // sort method const tags = ["html", "css", "javascript", "react"] tags.sort() scrib.show("Sort - ",tags) // ["css","html","javascript","react"] Reverse method // reverse method const tags = ["html", "css", "javascript", "react"] tags.reverse() scrib.show("Reverse - ",tags) // ["react","javascript","html","css"] Splice method // splice method const tags = ["html", "css", "javascript", "react"] tags.splice(0,0,"HTML") // will replace first index element with HTML tags.splice(0,2,"HTML") // will delete first 2 elements and replace with HTML scrib.show("Splice - ",tags) // ["HTML","css","javascript","react"] Fill method const tags = ["html", "css", "javascript", "react"] tags.fill("Scribbler",0,2) // replace first elements with Scribbler scrib.show("Fill - ",tags) // ["Scribbler","Scribbler","javascript","react"] Conditional push // Methods on steroids - conditional push const tags = ["html", "css", "javascript", "react"] const addValidTags = (isTagValid) => { const invalidTag = "java" if(isTagValid !== invalidTag){ tags.push(isTagValid) } } addValidTags("nextjs") // will add this to the array addValidTags("java") // won't add this to the array scrib.show(tags) // ["html","css","javascript","react","nextjs"] Conditional filtering // Methods on steroids - conditional filtering const tags = ["html", "css", "javascript", "react"] const filters = (filterName) => { if(filterName === "sort"){ tags.sort() return tags } else if(filterName === "reverse"){ tags.reverse() return tags } else { return tags } } filters("sort") // first sort the tags filters("reverse") // then reverse it // [ "react", "javascript", "html", "css" ] Checkout this embed to run the code example mentioned above app.scribbler.live That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website. You can contact me on - Instagram - https://www.instagram.com/supremacism__shubh/ LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/ Email - shubhmtiwri00@gmail.com You can help me with some donation at the link below Thank you

Feb 27, 2025 - 06:47

JS | Array Mutations: push, pop, sort & splice Explained!

Hello my fellow frontend developer friends, today i will be discussing array methods on steroids. You must buckle your seatbelt as this journey is going to be a bit long.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I'll be including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
i will be using scrib.show from scribbler.live, it is equivalent to console.log

Let's dive in.

Mutating method
Push
Pop
Unshift
Shift
Sort
Reverse
Splice
Conditional push
Conditional filtering

Mutating array methods

These methods modifies the original array itself instead of creating a new array for the result, these includes:

push - adds a new element to the array at the end
pop - removes an element from the end of the array
unshit - adds a new element to the beginning of the array
shift - removes an element from the beginning of the array
sort - sort the array in ascending or descending order
reverse - reverse the array from end to start
splice - could add, remove or replace elements from any index
fill - could bulk add the elements to the array with same value.

Push method

// push method
const tags = ["html", "css", "javascript", "react"]

tags.push("nextjs")
scrib.show("Push - ",tags) // ["html","css","javascript","react","nextjs"]

Pop method

// pop method
const tags = ["html", "css", "javascript", "react"]

tags.pop()
scrib.show("Pop - ",tags) // ["html","css","javascript"]

Unshift method

// unshift method
const tags = ["html", "css", "javascript", "react"]

tags.unshift("nextjs")
scrib.show("Unshift - ",tags) // ["nextjs","html","css","javascript","react"]

Shift method

// shift method
const tags = ["html","css", "javascript", "react"]

tags.shift()
scrib.show("Shift - ",tags) // ["css","javascript","react"]

Sort method

// sort method
const tags = ["html", "css", "javascript", "react"]

tags.sort()
scrib.show("Sort - ",tags) // ["css","html","javascript","react"]

Reverse method

// reverse method
const tags = ["html", "css", "javascript", "react"]

tags.reverse()
scrib.show("Reverse - ",tags) // ["react","javascript","html","css"]

Splice method

// splice method 
const tags = ["html", "css", "javascript", "react"]

tags.splice(0,0,"HTML") // will replace first index element with HTML
tags.splice(0,2,"HTML") // will delete first 2 elements and replace with HTML
scrib.show("Splice - ",tags) // ["HTML","css","javascript","react"]

Fill method

const tags = ["html", "css", "javascript", "react"]

tags.fill("Scribbler",0,2) // replace first elements with Scribbler
scrib.show("Fill - ",tags) // ["Scribbler","Scribbler","javascript","react"]

Conditional push

// Methods on steroids - conditional push
const tags = ["html", "css", "javascript", "react"]

const addValidTags = (isTagValid) => {
  const invalidTag = "java"
  if(isTagValid !== invalidTag){
    tags.push(isTagValid)
  }
}
addValidTags("nextjs") // will add this to the array
addValidTags("java") // won't add this to the array
scrib.show(tags) // ["html","css","javascript","react","nextjs"]

Conditional filtering

// Methods on steroids - conditional filtering
const tags = ["html", "css", "javascript", "react"]

const filters = (filterName) => {
  if(filterName === "sort"){
    tags.sort()
    return tags
  }
  else if(filterName === "reverse"){
    tags.reverse()
    return tags
  }
  else {
    return tags
  }
}

filters("sort") // first sort the tags
filters("reverse") // then reverse it
// [ "react", "javascript", "html", "css" ]

Checkout this embed to run the code example mentioned above

app.scribbler.live

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you