Javascript Array Methods Ep.1

#javascript #webdev #programming #firstpost

Hey There 👋
Welcome to Episode 1 of my Array Methods Explained Show.

If you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing four methods in this episode
POP / PUSH / SHIFT / UNSHIFT

THE BASICS

Push

1. Push is used to add an element to the array
2. can add multiple items once
3. It always add to the last of array
4. It returns the size of new array

let colors = ["Red", "Blue", "Yellow"];

// pushing to last of array
colors.push("White");
console.log(colors); // ["Red", "Blue", "Yellow", "White"]

// can be used to push multiple items
colors.push("Green", "Grey");
console.log(colors); // ["Red", "Blue", "Yellow", "White", "Green", "Grey"]

// returns the size of newly modified array
let value = colors.push("Black");   
console.log(value); // 7
console.log(colors); // ["Red", "Blue", "Yellow", "White", "Green", "Grey", "Black"]

Pop

1. Pop is used to remove element from an array
2. It always removes the last element of array
3. It returns the value of data removed

let colors = ["Red", "Blue", "Yellow"];

// poping from last of array
colors.pop();
console.log(colors); // ["Red", "Blue"]

// returns the data removed
let value = colors.pop();
console.log(value); // "Blue"
console.log(colors); // ["Red"]

Shift

1. Shift is used to remove element from an array
2. It always removes the first element of array
3. It also returns the deleted element

let colors = ["Red", "Blue", "Yellow"];

// deleting from front of array
colors.shift();
console.log(colors); // ["Blue", "Yellow"]

// returns the data removed
let value = colors.shift();
console.log(value); // "Blue"
console.log(colors); // ["Yellow"]

Unshift

1. Unshift is used to add element to the array
2. It always add to starting element of array
3. It also returns the added element
4. can add multiple items once

let colors = ["Red", "Blue", "Yellow"];

// pushing to starting of array
colors.unshift("White");
console.log(colors); // ["White", "Red", "Blue", "Yellow"]

// can be used to push multiple items
colors.unshift("Black", "Grey");
console.log(colors); // ["Black", "Grey", "White", "Red", "Blue", "Yellow"]

// returns the size of newly modified array
let value = colors.unshift("Pink");
console.log(value); // 7
console.log(colors); // ["Pink", "Black", "Grey", "White", "Red", "Blue", "Yellow"]

PERFORMANCE

push and pop are fast while shift and unshift are slow, why ?

this is because it is faster to work with the end of array then with beginning, lets see why this is so

if we are executing colors.shift();, then shift has to perform 3 things :

Remove the element with the index 0.
Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1 and so on.
Update the length property.

hence, the more elements in the array, the more time to move them, and more in-memory operations,

the similar thing happens with unshift

And what’s with push/pop? They do not need to move anything. To extract an element from the end, the pop method simply cleans the index and shortens length.

The pop method does not need to move anything, because other elements keep there indices. That’s why it is super fast.

The similar thing with happens with push method.