Modern JavaScript Destructuring

Welcome back to the course. In our first lesson, we learned how modern variables like const and let help us keep our data safe and organized. We also looked at arrow functions as a cleaner way to write logic. Now that you know how to store data and write functions, we need a better way to work with the information inside objects and arrays.

In older versions of JavaScript, if you wanted to get several values out of an object, you had to write a new line of code for every single property. This led to repetitive code where you would type the name of the object over and over again. Modern JavaScript introduces destructuring, which is a special syntax that lets you "unpack" values from objects or arrays and assign them to variables instantly. This keeps your code clean and makes it much easier to read at a glance.

When we work with objects, we often need to pull out specific pieces of information to use in our logic. Object destructuring allows us to create variables that match the names of the properties inside an object. Instead of accessing a property using a dot, such as account.balance, we can use curly braces on the left side of our assignment.

"use strict";

const account = {
  balance: 1250.75,
  currency: "USD",
};

const { balance, currency } = account;

console.log(balance);
console.log(currency);

Output:

1250.75
USD

In this code, JavaScript looks inside the account object for properties named balance and currency. It then creates two new variables with those exact names and assigns the corresponding values to them. This is much faster than writing const balance = account.balance and const currency = account.currency on separate lines. It reduces the amount of typing you have to do and makes it clear exactly which pieces of data your code cares about.

Sometimes the property names in an object are not the names you want to use in your code. You might already have a variable with that name, or you might simply want a shorter name. You can rename a variable during destructuring by using a colon. Additionally, you can provide a default value using an equals sign. This ensures that your code does not break if a property is missing from the object.

const account = {
  currency: "USD",
};

const { 
  currency: moneyType, 
  country = "Unknown" 
} = account;

console.log(moneyType);
console.log(country);

Output:

USD
Unknown

In this example, we used currency: moneyType to tell JavaScript to take the value of currency but store it in a new variable called moneyType. We also looked for a property called country. Since country does not exist in our object, JavaScript assigns it the default value of "Unknown". This pattern is very helpful for making your code more resilient when dealing with data from external sources like a database or an API.