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

#webdev #javascript #beginners #tutorial

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" ]