JavaScript Destructuring — What is logged?

Why This Question Matters

If you've spent any time with modern JavaScript, you've seen the [...] syntax everywhere. It's called destructuring, and it's one of those features that looks like magic until it doesn't work the way you expect.

For a lot of junior devs, the confusion starts when they see a comma with nothing between it. In most parts of JavaScript, trailing commas are fine, but an empty slot in a destructuring pattern feels like a syntax error or a mistake. You start wondering: *Does this skip the element? Does it return undefined? Does the whole thing crash?*

Understanding this isn't just about passing a quiz; it's about knowing how to cleanly extract data from APIs and arrays without writing tedious const first = arr[0] lines over and over.

Understanding the Code

Let's look at the snippet:

const arr = [1, 2, 3]
const [first, , third] = arr
console.log(first, third)

At first glance, it looks simple. We have an array with three numbers. Then we have this line: const [first, , third] = arr.

Here is what's actually happening: JavaScript is mapping the positions of the variables inside the brackets to the positions of the values in the array.

1. The first variable first maps to arr[0], which is 1.
2. Then we hit a comma. This tells JavaScript: "I know there's a value here, but I don't actually need it. Just skip it."
3. The next variable third maps to arr[2], which is 3.

The value 2 is still there in the original array, but since we didn't provide a variable name for that second slot, it just gets ignored. It's essentially a "hole" in our assignment pattern.

Finding the Correct Answer

If the options were:
A) 1 2
B) 1 3
C) 1 undefined
D) SyntaxError

The correct answer is Option B: 1 3.

Why? Because destructuring is position-based. The empty space between the commas acts as a placeholder. JavaScript sees the first comma, assigns 1 to first, sees the second comma, skips the next element (2), and then assigns the third element (3) to third.

If the code had been const [first, second, third] = arr, you'd get 1 2 3. By removing second, you aren't shifting the rest of the array to the left; you're simply opting out of capturing that specific value.

Common Mistakes Developers Make

The biggest mistake beginners make is thinking that the empty slot "collapses" the array. They assume that if they skip the second element, the third element will slide over and be assigned to the second variable.

JavaScript doesn't do that. Destructuring is a 1:1 map of indices.

Another common trip-up happens when the array is shorter than the destructuring pattern. For example:

const arr = [1, 2]
const [first, , third] = arr
console.log(third) // undefined

In this case, third doesn't throw an error. It just becomes undefined because there is no value at index 2.

Lastly, some people confuse this with the "comma operator" or think it's a typo. In a real codebase, if you see [a, , c], it's a deliberate choice by the developer to ignore the middle value.

Real-World Usage

You won't often see [first, , third] in a simple array of numbers, but you'll see this constantly when dealing with functions that return arrays or when working with coordinates.

A classic example is when a library returns a tuple (an array with a fixed number of elements) and you only need the first and last pieces of data.

Imagine a function that returns a user's status, a complex metadata object you don't need, and their ID:

const [status, , userId] = getUserData();

Writing const data = getUserData(); const status = data[0]; const userId = data[2]; is just noisy. Destructuring allows you to be explicit about what you actually care about.

You'll also see this a lot in React when using hooks. While useState only returns two elements, other custom hooks might return a larger array of utilities where you only need the first and third options.

Key Takeaways

- Destructuring is positional. The variable's place in the brackets corresponds exactly to the index in the array.
- Empty slots skip values. A comma without a variable name tells JS to ignore that specific index.
- Missing values are undefined. If you try to destructure more elements than the array actually has, JS won't crash; it will just give you undefined.
- Cleanliness over verbosity. Using this pattern is a great way to keep your code concise when you only need a subset of data from an array.