Object.assign() - weird behaviour need explanation

Question

I've got this code:

function margeOptions(options, passedOptions) {
  options = Object.assign(options, passedOptions); 
}

let passedOpts = {a: true};
let opts = {a: false};

margeOptions(opts, passedOpts); 
console.log(opts); // as expected returns {a: true} 

but when I change function a little bit, like this:

function margeOptions(options, passedOptions) {
  options = Object.assign({}, options, passedOptions); 
}

let passedOpts = {a: true};
let opts = {a: false};

margeOptions(opts, passedOpts); 
console.log(opts); // this time returns {a: false} <-- !

So what really happened in here?

Answer 1

The Object.assign() function modifies the contents of the first object parameter. Thus in the first function:

options = Object.assign(options, passedOptions); 

your code works because options is the first parameter. Note that the assignment back to the options parameter has no effect, or at least no useful effect. It will assign the return value of Object.assign to the options variable, but that's the value it already has.

The second function passes a newly-constructed empty object as the first parameter, so that means that the object passed as options won't be modified. The modified object is assigned back to options, but as it's just a function parameter that won't change the reference in the calling environment. If you wanted to do that, you'd have to return the value and assign it in the calling environment.

Answer 2

Object.assign sets properties on the object you give it as its first argument; it also returns that same object. So in your first example, since you're passing option as the first argument, it gets updated with new/updated properties. In your second example, you're not passing it as the first argument, it's just one of the "source" objects to read properties from, so it isn't updated.

---

If your confusion is why the assignment didn't change opts, it's because assigning to the parameter doesn't have any effect on anything outside the function. E.g.:

function foo(a) {
    a = 42;
}
var x = 67;
foo(x);
console.log(x); // Still 67

That's because foo(x) reads the value of x and passes it into foo. There is no connection between a and x other than that a's value originally came from x.

It's exactly the same with opts/options. mergeOptions(opts, passedOptions) reads the value of opts, which is an object reference, and passes that value into mergeOptions. There's no ongoing connection between that value and opts. The object reference points to the object, not to the variable opts.