Array Destructuring
It's a busy week for everyone at KLRU. A good portion of our external relations team is moving facilities to a temporary workspace for the next year or so. Furniture is being moved around, people are being displaced, messes are being made. Meanwhile I'm working on my first collaborative project with Calle, our new web developer. We're redesigning the website for Decibel, KLRU's news and public affairs show. We're building it in Gatsby, with the hopes of getting it to an easy deployment setup with Netlify. Gatsby is just a dream to work with. I'm also getting to utilize a bunch of these array and object methods I've been writing about over the last few weeks, and I gotta say sometimes I feel like a web development wizard when I reach for a spread operator or map function and get it to just work. So, busy as things are, I'm keeping the momentum up. Today I'm taking a look at Array Destructuring.
Array Destructuring gives us an easy, concise way to unpack items within an array and store them into variables. Let's give ourselves an array of ingredients to play around with.
const ingredients = ['spaghetti', 'garlic bread', 'tomato sauce', 'onion', 'garlic', 'mushroom'];Now when I was first learning JavaScript, I was told I had to use bracket notation to reach into an array to assign one of the items to a variable.
const ingredients = ['spaghetti', 'garlic bread', 'parmesan cheese', 'red wine', 'tomato sauce', 'onion', 'garlic', 'mushroom'];
const pasta = ingredients[0];
const side = ingredients[1];
console.log(pasta, side);
// expected result: "spaghetti garlic bread"But that's no way to live our lives. Instead, we can use a different sort of bracket notation to destructure the array.
const ingredients = ['spaghetti', 'garlic bread', 'parmesan cheese', 'red wine', 'tomato sauce', 'onion', 'garlic', 'mushroom'];
const [pasta, side] = ingredients;
console.log(pasta, side);
// expected result: "spaghetti garlic bread"So in one easy line, we were able to reach into the array, grab the first two items (the ones we knew we wanted to use), and assign them as variables. We can also skip items with empty spaces in the destructure assignment syntax if we so wanted:
const ingredients = ['spaghetti', 'garlic bread', 'parmesan cheese', 'red wine', 'tomato sauce', 'onion', 'garlic', 'mushroom'];
const [pasta, side, , beverage] = ingredients;
console.log(pasta, side, beverage);
// expected result: "spaghetti garlic bread red wine"To take things even further, we can group items at the end of the array using Rest notation (read more on Rest Syntax in this blog post). This will give those array items in their own array. How tidy!
const ingredients = ['spaghetti', 'garlic bread', 'parmesan cheese', 'red wine', 'tomato sauce', 'onion', 'garlic', 'mushroom'];
const [pasta, side, , beverage, ...sauce] = ingredients;
console.log(sauce);
// expected result: ["tomato sauce", "onion", "garlic", "mushroom"]Lastly, a very cool thing that destructuring lets us do is swap variables.
let first = "one";
let second = "two";
[first, second] = [second, first];
console.log(first);
// expected result: "two"
console.log(second);
// expected result: "one"From MDN: The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
See more examples and documentation here.
More Spread Syntax
Read more about Spread Syntax, Destructuring, and Rest here: