Modern JavaScript Destructuring | CodeSignal Learn

Modern JavaScript Destructuring | CodeSignal Learn

Skip to main content

Introduction: Unpacking Data The Modern Way

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.

Basic Object Destructuring

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.

Renaming And Default Values

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.

Nested Object Destructuring

Array Destructuring With Rest

Unpacking arrays works a bit differently from objects. Since arrays are ordered lists, we use square brackets [ ] instead of curly braces, and we assign variables based on their position in the list. We can also use the rest operator, which is the three dots ... we learned about in the previous lesson. While we previously used it to gather function arguments, here we use it to collect the "rest" of the array items into a new list. const transactions = [100, -50, 200, -30, 75]; const [first, second, ...others] = transactions; console.log("first:", first, "second:", second, "rest:", others); Output: first: 100 second: -50 rest: [ 200, -30, 75 ] In this example, JavaScript assigns the first item in the array to the variable first and the second item to the variable second . The ...others syntax tells JavaScript to take every remaining item in the array and put them into a new array called others . This is a very clean way to separate a few important items from a larger list without having to use complex array methods or manual loops.

Destructuring In Function Parameters

Summary And Next Steps

In this lesson, we explored how to unpack data using destructuring for both objects and arrays. You learned how to use curly braces to extract object properties, how to rename variables with colons, and how to provide default values to handle missing data. We also saw how the rest operator can collect remaining array elements and how to use these patterns inside function parameters to write cleaner code. These techniques are essential for modern JavaScript development because they make your code more expressive. Instead of seeing long lists of assignments, you can see the structure of your data right in the variable declarations. Now that you understand these patterns, you are ready to try them yourself. In the upcoming practice exercises, you will apply these destructuring techniques to solve problems and clean up messy code. When you are ready, head over to the practice exercises to start applying these destructuring techniques yourself.

Previous Lesson Next Lesson: Spread and Rest Operators

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Objects often contain other objects inside them. Modern JavaScript allows you to reach deep into these nested structures in a single step. You can even combine this with the renaming and default value techniques we just discussed. This is powerful because it allows you to extract deeply buried data without writing multiple nested checks.

JavaScript

const account = {
  owner: { firstName: "Ada", lastName: "Lovelace" },
  balance: 1250.75,
  currency: "USD",
};

const {
  owner: { firstName: fn, lastName: ln },
  balance,
  currency = "USD",
  country = "Unknown",
} = account;

console.log(`${fn} ${ln} — ${balance} ${currency} (${country})`);

Output:

text

Ada Lovelace — 1250.75 USD (Unknown)

In this piece of code, we are destructuring the owner object while it is still inside the account object. By using the colon after owner and opening another set of curly braces, we tell JavaScript to go one level deeper. We then rename firstName to fn and lastName to ln. All of this happens in one statement, demonstrating how much information you can organize and extract at once.

One of the most common places you will see destructuring is inside a function's parameters. Instead of passing an entire object to a function and then pulling it apart inside the function body, you can destructure the object right in the function signature. You can also provide default values for the entire object to prevent the code from crashing if no argument is passed at all.

JavaScript

const account = {
  owner: { firstName: "Ada", lastName: "Lovelace" },
  balance: 1250.75,
};

function describe({ owner: { firstName: name = "anon" } = {}, balance = 0 } = {}) {
  return `${name} — $${balance.toFixed(2)}`;
}

console.log(describe(account));
console.log(describe());

Output:

text

Ada — $1250.75
anon — $0.00

The function describe is designed to take an object. In the parameter list, we immediately dig into the owner property to get the firstName, rename it to name, and provide a default value of "anon". We also set balance to 0 if it is missing. Notice the = {} at the very end of the parameter list; this is a safety measure. It ensures that if the function is called with no arguments, like describe(), it defaults to an empty object instead of throwing an error. This makes your functions much more robust and safer to use.