DEV Community

Cover image for Javascript Array Methods Ep.1
Adesh Khanna
Adesh Khanna

Posted on

Javascript Array Methods Ep.1

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
Enter fullscreen mode Exit fullscreen mode

Push Syntax

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"]
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Pop Syntax

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"]
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Shift Syntax

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"]
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Unshift Syntax

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"]
Enter fullscreen mode Exit fullscreen mode

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 :

  1. Remove the element with the index 0.
  2. Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1 and so on.
  3. 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.

Oldest comments (2)

Collapse
 
arshahmad profile image
Arsh Ahmad

well explained

Collapse
 
theadeshkhanna profile image
Adesh Khanna

Thanks