JavaScript: Destructuring Arrays (80's & 90's Boy Bands Edition) | Janifer

In this post, I’ll be discussing the nature of destructuring arrays in Javascript programming, using the Feynman Method and 80’s and 90’s boy bands.

This is part of the Feynman Technique/20 hr Method challenge. For more information, click here.

If you’re curious about some personal trivia that ties me with some of these boy bands, head to the bottom of this post.

Arrays, Arrays, and More Arrays

In previous posts, we’ve spoken about arrays in general, but haven’t taken a deep dive into the topic. In this post and the next few JavaScript posts, we’ll be going into them in more detail.

We’ve explained that arrays are a grouping of stuff, whether it’s numbered, names, locations, etc. All that information is bunched up into one label. Deconstructing them, in our case, is taking elements out of these groups and allowing them to stand alone. To help with this process, we’ll be using 80’s and 90’s boy bands to set up our stage.

Destructuring Assignment

One of the simplest ways to deconstruct an array is by reassigning each element into their own label:

const bbMak = ['Mark', 'Christian', 'Stephen'];
const m = bbMak[0];
const a = bbMak[1];
const k = bbMak[2];
console.log(m, a, k);

In the above case, we establish within our code the name for the English boy band “BBMak”. In this array, we have the members of their trio: Mark, Christian, and Stephen. Whenever you see “[ ]”, anything within them is considered part of the array. When anything is in quotes, whatever inside them is considered a string. If there are no quotation marks, it usually denotes that it is a representation of something else, not the word itself.

When breaking down “const m = bbMak[0];”, what this means is the letter m by itself represents whatever is in the bbMak array, position 0. Most of the time, items within an array begin at position “0”. So whatever we consider as the first item, is actually observed by javascript as “element 0”.

We assign each member with a letter, and at the end, we ask for the console to log in what “(m, a, k);” stand for, we get the following result:

Mark Christian Stephen

Normally, if we just ask the console to log what the “bbMak” array looks like, it’d come back like this:

(3) ["Mark", "Christian", "Stephen"]

Breakdown: There are 3 people in this group, and their names are within the “[]”. When we assigned each member a different identifier, we made them separate from the group.

A much simpler way to have done this would have been to do the following:

const [m, a, k] = bbMak;
console.log(m, a, k);

Time to Get More Complicated

Most of the examples, moving forward, will use the “boybands” foundation code, with the exception of the final two groups.

const boybands = {
  nkotb: ['Jordan', 'Donnie', 'Danny', 'Jon', 'Joe'],
  boys2Men: ['Mike', 'Shawn', 'Nathan', 'Wayne'],
  backstreetBoys: ['Kevin', 'AJ', 'Brian', 'Howie', 'Nick'],
  nsync: ['Chris', 'Joey', 'JC', 'Lance', 'Justin'],

  bsbNsync: function (vocal1, vocal2) {
    return [this.backstreetBoys[vocal1], this.nsync[vocal2]];
  },
};

In this example, we’re going to do actually 3 things. We are going to assign names to two group members while skipping others (no hard feelings), swap the member’s titles while deconstructing them. This time, we’ll use the group NKOTB aka New Kids on the Block.

Array Destructuring Skip

let [lead, , , , harmony] = boybands.nkotb;
console.log(lead, harmony);

What the above is saying is:

“let” (let = temporarily named) array assigning element 0 (remember, arrays START with 0) have the name “lead”
skip positions 1, 2, 3
name element 4 “harmony” within the “boybands” group, in the subgroup of “nkotb”.

The nkotb array lives within the boybands group. To let JavaScript know we’re referring to this specific grouping, we needed to type in the <parent grouping> . <child grouping>. The “period” symbolizes the relationship between one to the other.

In the case of the code above, the console log issues us the following result:

Jordan Joe

Jordan was in position 0 and Joe was in position 4 and both of them are no longer confined within the nkotb array. Now to swap their values.

JavaScript Array Value Swap

Since we have established above that Jordan = lead and Joe = harmony, we can still use those values, even though they still live in the “nkotb” array, and not do any damage to the other members.

const temp = lead;
lead = harmony;
harmony = temp;
console.log(lead, harmony);

This is like the Die Hard 2 jug problem:

We get a third container, let it hold on to the “lead” title,
Have “lead” now have the value of “harmony”,
“harmony” finally get the “lead” value.

Now you would suspect that this shouldn’t work, but it does, because our outcome from this swap meet is this:

Joe Jordan

Now Joe = lead and Jordan = harmony. The reason this works is that Javascript holds on to the last value a name is assigned, even if that root assignment has changed.

Temp was assigned to lead (Jordan). Now temp = Jordan
Lead is now empty, so Lead is filled with Harmony’s value (Joe). Now Lead = Joe.
Harmony is now empty, so Harmony is filled with Temp’s value (Jordan).

This is how Joe and Jordan swapped titles.

JavaScript Array Value Swap (Easy Way)

This time, we’ll use Boys II Men.

As we did before, we’re pulling from out “boybands” grouping and using the subgroup “boys2Men” (boys2Men: [‘Mike’, ‘Shawn’, ‘Nathan’, ‘Wayne’]) and applied it to the following:

let [vocal1, , vocal2] = boybands.boys2Men;
console.log(vocal1, vocal2);

In this example positioning is EVERYTHING. Although we titled position 0 as vocal1, no matter what, because it sat there, it represents that position (Mike). And just like before, we skipped a position (Shawn), going straight to position 2 (Nathan). Although we have three positions in the array, what happened to Wayne in the last position? He’s still there, we just didn’t give him his own value (we’re not hating on you Wayne, honest).

The output from the above code shows we were able to destructure these two items from the array, as seen below:

Mike Nathan

To swap their values, we take both at once and do the switcher-roo:

[vocal1, vocal2] = [vocal2, vocal1];
console.log(vocal1, vocal2);

…and we come back with:

Nathan Mike

As I mentioned before, positioning is EVERYTHING. In the case above, vocal1 replaced its value with vocal2 and vise versa.

Before fans of N’Sync and BSB decide to riot, know that I’ve got you.

Destructuring Multiple Values from Different Arrays at the Same Time

This time, we will pull two values from two different arrays from the same “boybands” parent, using the function we added in our foundation code:

  backstreetBoys: ['Kevin', 'AJ', 'Brian', 'Howie', 'Nick'],
  nsync: ['Chris', 'Joey', 'JC', 'Lance', 'Justin'],

  bsbNsync: function (vocal1, vocal2) {
    return [this.backstreetBoys[vocal1], this.nsync[vocal2]];

If you recall from my “Javascript: Functions” post, I mentioned that functions won’t run unless they are called. They can also be set up within the code to automatically run. Here we created a function called bsbNsync. In it, we told JavaScript that when activated, the two arguments, within the “()” are to be pulled from the boybands.backstreetBoys array = vocal1, and the boybands.nsync array = vocal2. We trigger this by using the following code:

const [vocalA, vocalB] = boybands.bsbNsync(1, 2);
console.log(vocalA, vocalB);

What this says is:

Whatever comes out from position 1 will now be called vocalA.
Whatever comes out from position 2 will now be called vocalB.
Pull this info from the boybands.bsbNsync function, using the arguments (1,2).
Argument 1 comes from the Backstreet Boys array, at position 1, which is “AJ”. (remember, an array element STARTS with position 0)
Argument 2 comes from the N’sync array at position 2, which is “JC”.

So the final product is…

AJ JC

Destructuring Nested Arrays

Just like functions can live within other functions, arrays can live within arrays. In our next example, we use New Edition to explain nested destructuring.

We’ll establish the members of newEdition, and create the nested (sub) array for the members of BBD (Ricky Bell, Michael Bivins, and Ronnie DeVoe – for all you youngins out there).

const newEdition = ['Bobby', 'Ralph', 'Johnny', ['Ricky', 'Mike', 'Ronnie']];
const [ne, keep, it, hot] = newEdition;
console.log(keep, it, hot);

As in the BoysIIMen sample, the position is everything. In the code above, we declare the members of newEdition. We also give individual values to Bobby = “ne”, Ralph = “keep”, Johnny = “it”, but what about “hot”? Would it only include Ricky or would it envelop the boys from BBD? When we console log “keep, it, and hot”, this is what shows up:

Ralph Johnny (3) ["Ricky", "Mike", "Ronnie"]

…”hot” did envelope the three guys within the nested array, however, only Ralph and Johnny are restructured. Ricky, Mike, and Ronnie were still locked in a group.

Yes, I realized that I created a list of the remaining members of New Edition after Bobby was voted out of the group.

Ricky, Mike, and Ronnie can equally be destructured, even if they are nested. In the example below, we specifically add the nested element “[ ]” within the newEdition array and gave that member the name “off”.

const [hit, me, , [, off]] = newEdition;
console.log(hit, me, off);

The output that follows were the members of New Edition that had beef with Bobby Brown:

Bobby Ralph Mike

Mike, who was part of the nested group, who was named in the “const” was able to be pulled from the nested array and destructured.

Destructuring Arrays with Default Values

Finally, we get to our last stop on this destructing train with default values, and to help me out with this, I’m going to use the members of 98 Degrees.

This code is going to look far different from the previous ones because this time we are going to establish a value for each of these members while they live within the array. The const will look like math (and function similarly as well).

const [Nick = 1, Jeff = 1, Drew = 1, Justin = 1] = [9, 8, 'degrees'];
console.log(Nick, Jeff, Drew); 
console.log(Nick, Jeff, Drew, Justin);

Let’s break this down:

All the members of the group “= 1” each within the array.
That array is = to an adjacent array with the new values as such:
- 9=Nick
- 8=Jeff
- degress=Drew
- No new value for Justin (There’s no hate here man, I need you to be the special case)

In the first of these two console log calls, the first one (console.log(Nick, Jeff, Drew);) produces the following result:

9 8 "degrees"

The first three members that we called within the array are represented by their new value. Even though in their old array, they were all “=1”, the values were swapped and as you can see, are no longer represented in the array “[ ]” format.

When we call all four members of the group out (console.log(Nick, Jeff, Drew, Justin);), we get the following:

9 8 "degrees" 1

Because Justin didn’t receive a new value, he still retained his old value of “1”. The console log reflected that. Justin’s value of “1” came with him, and as with the other members of his group, he was represented as a stand-alone value, outside of the array.

Now go ahead and jam out to your favorite 90’s boy band song, or watch this documentary on Lou Pearlman by Lance Bass:

For more information about destructuring arrays, check out the links below:

Ok, as promised, here’s the skinny I have with some of these groups above:

When I was a teen, I was a member of the New Kids on the Block fan club.
In 1999, I won tickets to a Joey McIntyre concert when he released his first solo single “Stay the Same” at the Bowery Ballroom. Through that, I got the contact info of someone in HR. Eventually, I was hired by Sony Music from that experience and worked there for five years (not with Joey).
I was at Joey McIntyre’s Boston Millenium concert, where the electricity went out. Because of circumstances, I ended up backstage after one of the crew gave me a bouquet of roses to give to him, but I never got a chance to meet him. That night was a cluster.
In 2011, I was a contestant on the ABC show “Karaoke Battle USA” that Joey Fatone hosted, the pic below was a screenshot from the show where my friends were waving signs, supporting me.
The New Edition song “Hot 2Nite” that I have posted above was written by Ryan Leslie, who I auditioned for before I worked for Universal Music. Unfortunately, he had no idea what to do with my powerful vocals because he kept on asking me to be softer.
My fiance was once the bank manager for the bank that Joey Fantone, Shaq, and Tiger Woods personally used, but that was long before we met.
Lou Pearlman and I both come from Flushing, NY, but different parts, and ironically both landed ourselves in Central Florida. Although we both were in the entertainment business, I’m nowhere as skeevy and sure as heck would have never been able to handle the guilt for everything he did.

JavaScript: Destructuring Arrays (80’s & 90’s Boy Bands Edition)