DEV Community

Inee Ader 🐌
Inee Ader 🐌

Posted on • Edited on

Destructive Array Methods

giphy

Not long ago when I was FIRST dippin' my toes into learning some basic JavaScript coding, I was introduced to 4 common methods of destructive array manipulation! In just a second, I'll go over my silly ways of remembering the difference between PUSH, POP, SHIFT, and UNSHIFT array methods...THROUGH SONG! It's a powerful thing. (Oh yeah, these methods will also work in Ruby arrays too.) Hopefully you'll just read this blog once, and remember this wisdom forever because of how well this page is written.

First of all, an array is a list of single items contained with square brackets []. The data could be in a string ("word(s) contained in quotes"), integer (2), float (3.14), or even an object {with key-and-value pairs}. Each item in the array is called an "element". An example array is like so: ["I want", 2, "waffles", {in my: mouth}, 40.596, "SECONDS AGO."]

Second of all, what's "destructive" mean, anyway? Sounds pretty bad, do we want to be doing this stuff to our code? No, silly goose, it means that the method will permanently alter the original array, so use these babies with caution! ((BTW, non-destructive methods will output the changes to the array, but not tarnish the glory of your original array.))

Ok, so I always got confused with the naming of these methods and came up with weird ways of remembering them. "Push" and "Pop" kind of make sense, but what in heck does "Shift" and "Unshift" mean? If this helps you, I'll be quite surprised but also delighted! Without further ado, it's time for me to get some songs stuck in your head.

=====================================================
PUSH: "Push it real good!"

I think about the song "Push It" by Salt-N-Pepa. Most people think this song was meant to be sexual...and I will admit I thought it was too. HOWEVER, on doing some research (you get really good at googling when you're a programmer apparently), I learned that Salt-N-Pepa neva actually meant this song to be sexual!!! They meant for this song to be about PUSHIN' IT ON THE DANCE FLOOR. I think about how you can "add to your dance moves via wiggly booty movement", ergo "adds an element to the back end" of your array.

Example:

array = [0, 1, 2, 3]
array.push("PUSH IT REAL GOOD")
array is now [0, 1, 2, 3, "PUSH IT REAL GOOD"]

This method needs you to specify what element to add. In this case, it's adding a string to the end of our pretend array. Mr. Bean's got a good PUSH signature move, try it out!
1cc079fab52c8a1bf3457fbd20f3030a

=====================================================
POP: "Pop, lock and drop it!"
So for this one, I think "Pop, Lock and Drop It" by Huey. In my mind...it'll pop, lock, and drop it...OFF THE END. This method "removes an element off the back end"! Just pop that thing right off. Get it out of here. Easy-peasy-to-remember-squeezy.

Example:

array = [0, 1, 2, 3, 4]
array.pop
array = [0, 1, 2, 3]

Since it is just removing the last element, you don't need to designate that element...its just gonna be like array.pop and it knows how to do its thaaang. "Pop, lock, and drop it, get low, aight?"
I2HRFA

=====================================================
SHIFT: "We gotta get schwifty in here!"
This method "removes an element off the front end" of the array. This one's kind of round-about...I think about Rick and Morty's song "Let's Get Schwiftyyy". It's a pretty great song, but I remember how Rick's adventures usually blow the top off Morty's head, kind of. So losing something off the front of the array is like having the top of your head explode.

Example:

array = [0, 1, 2, 3, 4]
array.shift
array = [1, 2, 3, 4]

Holy Sh*ft, Morty! It's mind blowing, Morty! It's gonna explode your little b-b-brain out of your head, Mortyyy. It looks like this: array.shift and doesn't need to know what to remove, Morty. It just knows to take off the first thing, forever.
source

=====================================================
UNSHIFT: "Unshift my heart..."
Ok...I admit, this one's a long-shot, but it worked for me.
I remember Toni Braxton's "Unbreak My Heart"...which is like...undo it. Put- put it back...PUT THAT THING BACK WHERE IT CAME FROM OR SO HELP ME! I view the heart-area as part of the upper body, so this method will "add an element to the front" of the array.

Example:

array = [0, 1, 2, 3, 4]
array.unshift(5) "Unshift my heeeaaaaart..."
array = [5, 0, 1, 2, 3, 4]

For this method though, you need to tell it WHAT piece (element) to add back, so make sure you put that in parenthesis after the method. It'll look something like array.unshift(3), get it? I'm adding an integer to the front of the array...like I had 3 missing pieces of my heart to add back.
tenor

=====================================================
So let's review these odd-ball musings:

  1. PUSH IT REAL GOOD: adds element to the back.
  2. POP, LOCK & DROP IT: removes element from the back. You have to tell it WHAT to nix.
  3. YOU GOTTA GET SHIFTY IN HERE(, MORTYYY): /Morty's brain explodes/ removes element from the front.
  4. UNSHIFT MY HEART: adds element to the front, you have to tell it WHAT to add in front.

Can you hear the songs in your head? Can you? I hope they're stuck in your head, but also helpful and amusing. Do YOU have weird techniques to remember these too, or am I just bonkers?

((Also, I'm still a super baby beginner at code, so if there are glaringly horrific mistakes in what I'm saying, please try to leave a nice-ish comment and I'll fix it!))

Thanks for reading!

Top comments (2)

Collapse
 
jwokiri profile image
Joe Oketch

So nice

Collapse
 
ineeader profile image
Inee Ader 🐌

😭 Thank you!
--🐌