JavaScript Destructuring — What does this output?

Why This Question Matters

If you've been writing JavaScript for a while, you've probably used destructuring. It’s one of those ES6 features that makes our code look cleaner and saves us from writing const a = arr[0]; const b = arr[1]; over and over.

But there is a specific intersection where destructuring meets default values, and that's where things get trippy. Most developers assume they know how it works until they see a snippet like this in a technical interview or a weird bug in a production codebase. The confusion usually stems from a misunderstanding of when a default value actually kicks in.

Understanding the Code

Let's look at the snippet:

const [a = 5, b = 7] = [1]
console.log(a, b)

At first glance, it looks simple. We have an array on the right [1] and we're destructuring it into two variables, a and b, on the left. We've also provided default values: 5 for a and 7 for b.

Here is what's happening under the hood:

JavaScript iterates through the array on the right and maps the values to the variables on the left based on their index.

1. For a: JavaScript looks at index 0 of the array [1]. It finds the value 1. Since 1 is not undefined, the default value of 5 is ignored. a becomes 1.
2. For b: JavaScript looks at index 1 of the array [1]. There is nothing there. The value is undefined. Because the value is undefined, JavaScript triggers the fallback and uses the default value provided. b becomes 7.

The result? 1 7.

Finding the Correct Answer

The correct answer is Option A: 1 7.

If you were tempted by other options, you were likely thinking about the logic differently. For example, some might think that if the array is "incomplete," the whole operation fails or all defaults are triggered. That's not how JS works. Destructuring is granular. It evaluates every single variable independently.

If the input had been [1, 10], the output would be 1 10.
If the input had been [] (an empty array), the output would be 5 7.
If the input had been [undefined, undefined], the output would still be 5 7.

Common Mistakes Developers Make

The biggest "gotcha" here is the difference between null and undefined.

In JavaScript, default values in destructuring only trigger if the value is undefined. If you explicitly pass null, the default value is ignored because null is considered a deliberate value.

Check this out:

const [a = 5, b = 7] = [null, undefined]
console.log(a, b) // Output: null 7

In the example above, a stays null because the engine thinks, "The developer explicitly put null here, so I shouldn't overwrite it with the default." This is a frequent source of bugs when dealing with API responses where a backend might send null for an empty field instead of omitting it entirely.

Another mistake is assuming that the array length must match the destructuring pattern. It doesn't. You can destructure ten variables from a one-element array; the first will get the value, and the other nine will either be undefined or take their default values.

Real-World Usage

You'll see this pattern constantly in modern frontend development, especially when handling props in React or configuration objects.

Imagine you're writing a function that handles window coordinates. You might want to allow the user to pass an array of coordinates, but provide a fallback if they only provide one or none at all.

function setPosition([x = 0, y = 0] = []) {
  console.log(Setting position to ${x}, ${y});
}
setPosition([10]); // "Setting position to 10, 0"

setPosition([]);   // "Setting position to 0, 0"

setPosition();     // "Setting position to 0, 0" (thanks to the = [] at the end)

By combining array destructuring with default values, you create a robust function that doesn't crash when it receives partial data. It makes your code "defensive," which is exactly what you want when dealing with unpredictable user input or external API data.

Key Takeaways

- Destructuring is index-based: JavaScript maps values by their position in the array.
- Defaults are for undefined: Default values only kick in if the value at that index is undefined.
- null is not undefined: Passing null will override your default value.
- Partial matches are fine: You don't need the source array to be the same length as your destructuring pattern.

Understanding these nuances separates developers who "kind of" know ES6 from those who can debug complex data transformations without guessing.