When to use Object.assign()

I have discussed about the shallow copy & working of Object.assign() in this article, if you wish to get to know it in-depth then be sure to check it out.

Here we shall discuss about a possible use-case scenario where Object.assign() will shine i.e. passing objects as arguments.

Passsing objects as arguments

Assume we have a function that takes ton of arguments like this

function func(name, weight, height, isCrazy){
  //Some logic to use these arguments
  
}
//Do you feel the pain during calling this function?
func("Raj", 85, 5.11, false);

What! you don’t feel the pain, OK but trust me you will at some point let’s see why

• We will need to remember the order of arguments when calling the function every flucking time.
• We can’t miss any arguments in the middle, but only in the end (if we are using any default arguments).
• It’s messy to set default arguments in the main function if we wish to.

Solution

Let’s package all the arguments in an object neatly, and pass that object as argument to the function.

function func(args){
// now we can use the arguments in the function like this
  //since args is an object with our arguments as properties
  
  console.log(args.name);
  console.log(args.weight);
  console.log(args.height);
  console.log(args.isCrazy);
}
var person = {
  name: "Raj",
  weight: 85,
  height: 5.11,
  isCrazy: false
}
//Do you see how painless this function call is
func(person);
//or we can call directly like this
func({
  name: "Raj",
  weight: 85,
  height: 5.11,
  isCrazy: false
});

OK, there’s that overhead of making an object “person” but trust me it works out so beautifully with Object.assign() in setting up default values when we are dealing with weird cases of function calls.

Set up default arguments inside function using Object.assign()

function func(args){
  //our default arguments
  let defaultArgs = {
    name: "default",
    weight: 80,
    height: 5.10,
    isCrazy: true
  }
  //let's overwrite our defaultArgs if any values were passed
  let requiredArgs = Object.assign({}, defaultArgs, args);
  //Now we shall use requiredArgs in our code logic
  console.log(defaultArgs);
  console.log(requiredArgs);
}

OK what’s the job of Object.asign() in the above code ?

So glad you asked let’s see one by one by doing weird function calls using the above function.

1. function call without any arguments

func();
//defaultArgs
//{ name: 'default', weight: 80, height: 5.10, isCrazy: true }
//requiredArgs
//{ name: 'default', weight: 80, height: 5.10, isCrazy: true }

Since there was no passed object hence just defaultArgs was used and passed to the requiredArgs object for future use. That’s why we are getting the complete default arguments.

2. function call with partial arguments

func({
  name: "Raj",
  isCrazy: false
});
//defaultArgs
//{ name: 'default', weight: 80, height: 5.10, isCrazy: true }
//requiredArgs
//{ name: 'Raj', weight: 80, height: 5.10, isCrazy: false }

So sweet! do you see we are actually overwriting the defaultArgs with our passed partial arguments args and the final overwritten value is passed to requiredArgs, and we don’t even need to worry about the order of the arguments as well when its inside an object.

3. function call with all the arguments

func({
  name: "Raj",
  isCrazy: false,
  weight: 200,
  height: 6.1
});
//defaultArgs
//{ name: 'default', weight: 80, height: 5.10, isCrazy: true }
//requiredArgs
//{ name: 'Raj', weight: 200, height: 6.1, isCrazy: false }

Since this time we passed all the custom arguments therefore all the parameters were overwritten in defaultArgs.

4. function call with unknown(new) arguments

This one’s my favourite, suppose if you wish to pass some other arguments that was not thought of before or that cannot have a default value. Even then we can incorporate it in our requiredArgs by using Object.assign(), check it out.

func({
  name: "Raj",
  hasSixPacks: true
});
//defaultArgs
//{ name: 'default', weight: 80, height: 5.10, isCrazy: true }
//requiredArgs
/*{ name: 'Raj',
  weight: 80,
  height: 5.1,
  isCrazy: true,
  hasSixPacks: true }*/

So beautiful! do you see we are using all the default values except name, since no values were passed for them, plus it has also appended the new “hasSixPacks” to our working object ain’t that a beauty.

Disclaimer: My six packs is under construction but it is little visible I think when I pull in my family pack lol

Words of Caution for best use

1. Object.assign() was introduced in ECMAScript 2015 so you might want to include the polyfill(function definition for the new functions) in your production code from here for best browser support.
2. We know that it does not performs deep copy hence you might get weird results if objects contain embedded objects or arrays, as they wont be copied but a reference will be used instead, so stay alert for that.