JavaScript Object Spread — What is the Final Output?

Why This Question Matters

If you've spent any time with modern JavaScript, you've seen the three dots ... everywhere. It's called the spread operator, and while it looks like magic, it's actually one of the most powerful tools for managing state in your apps.

The confusion usually kicks in when you start mixing spread operators with existing keys. Beginners often wonder: *Does the old value stay? Does the new value overwrite it? Does the order of the properties in the object change?*

Understanding how object spreading works isn't just about passing a technical interview; it's about avoiding bugs when you're updating a user profile or managing a Redux store. If you get the order wrong, you'll end up wiping out your data without realizing it.

Understanding the Code

Let's look at the snippet:

const a = { x: 1, y: 2 }
const b = { ...a, y: 99 }
console.log(b)

Here is what's happening under the hood. When you write { ...a }, JavaScript essentially says: *"Go through every enumerable property in object a and copy it into this new object."*

So, for a split second, the engine creates a new object that looks exactly like a: { x: 1, y: 2 }.

But then we have , y: 99.

In JavaScript objects, if you define the same key twice, the last one wins. Since y: 99 comes *after* the spread of a, it overwrites the previous value of y.

The result? b becomes { x: 1, y: 99 }.

Finding the Correct Answer

If this were a multiple-choice question, the correct answer is Option B: { x: 1, y: 99 }.

Why not the other options?

Common Mistakes Developers Make

The biggest mistake I see juniors make is getting the ordering wrong.

Check this out:

const user = { name: 'Dev', role: 'Junior' };

const updatedUser = { role: 'Senior', ...user }; 

// Result: { role: 'Junior', name: 'Dev' }

Another tricky part is shallow copying. The spread operator only goes one level deep. If your object has another object inside it, JavaScript doesn't copy that inner object; it copies the *reference* to it.

const original = { a: 1, nested: { b: 2 } };
const copy = { ...original };
copy.nested.b = 99; 

console.log(original.nested.b); // 99!

Real-World Usage

In a production environment, you'll use this constantly for immutability.

In frameworks like React, you should never mutate state directly. Instead of doing state.user.name = 'New Name', you do this:

setUser(prevUser => ({
  ...prevUser,
  name: 'New Name'
}));

This tells React: "Keep everything the old user had, but change the name." This allows the framework to detect that the object reference has changed, which triggers a re-render of the UI.

You'll also see this when merging default configurations. Imagine a function that takes a config object from a user but has its own defaults:

function createChart(userConfig) {
  const defaults = { width: 500, height: 500, color: 'blue' };
  const finalConfig = { ...defaults, ...userConfig };
  
  // Now finalConfig has the defaults, unless the user provided their own
}

Key Takeaways