JavaScript Rest Properties — What does this output?

Why This Question Matters

If you've spent any time with modern JavaScript, you've used the spread operator (...). It's everywhere. We use it to clone arrays, merge objects, and pass props in React. But there is a subtle difference between *spreading* an object and using *rest properties* during destructuring.

This specific snippet tests whether you actually understand how JavaScript handles the "remaining" data when you pull a few properties out of an object. It's a classic interview question because it separates people who have memorized the syntax from those who understand how the engine actually processes the assignment.

Understanding the Code

Let's look at the snippet again:

const obj = { a: 1, b: 2, c: 3 }
const { a, ...rest } = obj
console.log(rest)

At first glance, it looks simple. We have an object with three keys. We're destructuring it.

Here is what's happening under the hood:

1. Destructuring Assignment: The line const { a, ...rest } = obj tells JavaScript to look at obj and find a property named a. It assigns the value 1 to a new variable called a.
2. The Rest Pattern: The ...rest part is the "rest element." It tells the engine: "Take everything else that wasn't explicitly picked out and bundle it into a new object."
3. Shallow Copy: JavaScript creates a *new* object. It doesn't just point to the old one. It gathers b and c and puts them into a fresh object assigned to the variable rest.

It's important to realize that rest is not a keyword; it's just a variable name. You could call it ...others or ...remainingStuff, and it would behave exactly the same.

Finding the Correct Answer

The correct answer is Option B: { b: 2, c: 3 }.

Why? Because a was already extracted. Since the rest operator collects all remaining enumerable own properties, only b and c are left to be gathered.

Why other options are wrong:

Common Mistakes Developers Make

The biggest trip-up here is confusing Spread with Rest. They use the same three dots, but they do opposite things.

Another edge case is trying to put the rest element anywhere other than the end. You cannot do this:
const { ...rest, a } = obj; // SyntaxError

JavaScript requires the rest element to be the last part of the destructuring pattern. If it weren't, the engine wouldn't know where the "rest" actually ends.

Also, keep in mind that this is a shallow copy. If b was another object instead of a number, rest.b would still point to the same memory reference as obj.b. Changing a nested property in rest would mutate the original obj.

Real-World Usage

You'll see this pattern constantly in production code, especially when managing state or handling API responses.

A very common use case is removing a specific property from an object without mutating the original one. In the old days, we used the delete keyword, but delete mutates the object and can be slow. Now, we do this:

const user = { id: 1, username: 'dev_guy', password: 'secret_password' };
// We want to send the user data to the frontend, but NOT the password

const { password, ...userPublicData } = user;
return userPublicData; // { id: 1, username: 'dev_guy' }

This is clean, functional, and prevents accidental data leaks. You'll also see this in React components when you want to separate a specific prop from the rest of the attributes to pass them down to a DOM element:

const Button = ({ label, ...props }) => {
  return {label};
};

Key Takeaways