Understanding Object.assign() in JavaScript

Have you ever wished you could combine your favorite ingredients to create the ultimate snack? Imagine combining the crunchiness of potato chips, the spiciness of hot sauce, and the freshness of a cucumber. Sounds wild, right? In the JavaScript world, Object.assign() Let us do something similar but with objects.

Let's dive into this nifty method that's as cool as mixing a mocha with a milkshake (trust me, it's a thing!)

What is Object.assign()?

At its core, Object.assign() is like our blender in the kitchen. It allows us to take multiple source objects and blend (or merge) them into one target object. The result is an object that has properties from all the source objects.

let objA = {a: 1};
let objB = {b: 2};
let objC = {c: 3};

let combinedObj = Object.assign({}, objA, objB, objC);
console.log(combinedObj);  // {a: 1, b: 2, c: 3}

Notice how we passed an empty object {} as the first argument? This is to ensure we're not mutating (or changing) any of the original objects. It's like ensuring you still have your original ingredients after making that killer snack.

Overwriting Properties

Imagine you're trying to make the perfect playlist. You start with some jazz, add a bit of rock, but then decide to replace some jazz tunes with pop songs. Object.assign() works similarly. If two objects have the same property, the property from the latter object will overwrite the one from the former.

let objA = {music: "jazz", volume: 5};
let objB = {music: "rock"};
let objC = {music: "pop", volume: 10};

let playlist = Object.assign({}, objA, objB, objC);
console.log(playlist);  // {music: "pop", volume: 10}

So, always remember, the order in which you merge matters!

Gotchas and Things to Remember

1. Deep Copying: Object.assign() only does a shallow copy. This means if your source objects have nested objects, they will still reference the same object. It's like sharing a drink with a friend using two straws; you're both still sipping from the same beverage.

    let objA = {inner: {a: 1}};
    let objB = Object.assign({}, objA);
    objB.inner.a = 2;
   
    console.log(objA.inner.a);  // Oops! It's 2, not 1.
   

2. Prototypes: Object.assign() only copies enumerable and own properties from source objects to the target. It won't copy properties from the prototype. If you're scratching your head about prototypes, think of them as the DNA of objects. They define shared behaviors but aren't part of the individual object's own properties.

3. Non-Object Arguments: If you pass non-object arguments to Object.assign(), they will be converted to objects. It's like trying to add hot sauce to a milkshake; it might not be what you intended, but the blender (Object.assign()) will still give it a shot!

    let result = Object.assign({}, "hello");
    console.log(result);  // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
   

Wrapping Up

Object.assign() is a powerful tool in your JS toolbox. It's like that multi-purpose kitchen gadget that can chop, blend, and puree. But just like with any tool, you've got to understand its quirks and best use cases. So, the next time you're faced with juggling multiple objects, remember your friend Object.assign() and blend away!

If you have any questions or suggestions then, feel free to reach out to me on Twitter or LinkedIn. You can find me on Twitter DivyParekh and LinkedIn at LinkedIn. I look forward to connecting with you and discussing all things!