---
# System prepended metadata

title: JavaScript Object.assign() Method - Scaler Topics

---

---
title: JavaScript Object.assign() Method - Scaler Topics
description: The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object. Let us learn more on Scaler Topics.
author: Twinkle Sharma
category: JavaScript
---

:::section{.abstract}

The `Object.assign()` method in javascript copies the values and properties from one or more source objects to the target object. It provides the target object after copy operations. It uses a getter and a setter for copying. It just assigns the properties instead of defining new ones, that's why it should not be used for the deep clone, because if the value of any property is referenced type then it will only be copied and still refer to the original referenced object. 

In case of duplicate keys in the target or source object, it follows the left to the right pattern to overwrite the values for those keys. 


:::
:::section{.main}
## Syntax of object.assign() JavaScript
The syntax of the object assigned in JavaScript is shown below,
```javascript
Object.assign(target, ...sources)
```
:::
:::section{.main}

## Parameters of JavaScript Object assign() Method
**Parameter Type:** `Object`
* The first parameter should be **Target Object** in which all sources will be copied. 
* Up next there is a **Rest Parameter** in syntax, which means we can have multiple source objects. 

:::
:::section{.main}

## Return Value of object.assign() JavaScript
**Return Type:** `Object`

It returns the same **Target Object** after copying the all sources.
:::
:::section{.main}
## Example of JavaScript Object assign() Method
```javascript
var sourceObj = { x: 10 };
var targetObject = Object.assign({}, sourceObj);
console.log(targetObject);
```
**Output:**
```plaintext
{ x: 10 }
```


**Explanation:**
* We have created the source object which contains a property having a key as `x` and a value as `10`.
* In the object `assign()` method, we have provided the source object and target object as empty objects.
* The source object will be copied to the target object which is provided by us `{}`. 
* The target object will be returned after copying.
* Next, `console.log()` is printing the target object.

:::
:::section{.main}

## Description of object.assign() JavaScript
The `object.assign()` method in javascript copies all properties from the source object to the target object.
* The properties must be **enumerable**, which means they should be enumerated by using the loop. We can check whether the property is enumerable or not by using `propertyIsEnumerable()` method.
* Also, the properties must be **own properties** of the object, which means they should not be inherited otherwise they will not be copied. We can check whether the object has a particular property or not by using `hasOwnProperty()` method.



:::
:::section{.main}

## More Examples of JavaScript Object assign() Method

### Merging the Objects
We can merge the objects with the method object assign in javascript.
```javascript
var sourceObj1 = { x: 10 };
var sourceObj2 = { y: 20 };
var sourceObj3 = { z: 30 };

var targetObject = Object.assign({w:40}, sourceObj1, sourceObj2, sourceObj3);
console.log(targetObject);
```

**Output:**
```plaintext
{ w: 40, x: 10, y: 20, z: 30 }
```
**Explanation:**
* Here we have three source objects which we want to merge with the target object.
* Also, now our target object is not empty but has a property instead.


:::section{.main}
### Property with the Same Key
If the objects have the same key then it will be overwritten from left to right as we have passed the source object in the method parameter.
```javascript
var sourceObj1 = { x: 10, y:20, z:30 };
var sourceObj2 = { w: 15, z: 45, x: 25 };
var sourceObj3 = { t: 45, x: 45, y:80 };

var targetObject = Object.assign({t:40}, sourceObj1, sourceObj2, sourceObj3);
console.log(targetObject);
```
**Output:**
```plaintext 
{ t: 45, x: 45, y: 80, z: 45, w: 15 }
```

**Explanation:**
* Here we have three source objects in which there are some properties with a common key.
* Also, the target object is having a common key with one of the source objects.
* Let's see how it will go,
    * Initially, our target object will be: `{t:40}`.
    * After copying the `sourceObj1` our target object will be: `{t:40, x:10, y:20, z:30}`.
    * Now as our `sourceObj2` contains the same keys, so all of those will be overwritten. Our target object will look like: `{ t: 40, x: 25, y: 20, z: 45, w: 15 }`.
    * Everything will be similar for `sourceObj3`.
    * Final target object will be: `{ t: 45, x: 45, y: 80, z: 45, w: 15 }`.

:::
:::section{.main}
### Reference object as Value
See this example to get an idea of how the reference object is copied internally by the method object assign in javascript.
```javascript
var sourceObj = { data:10, y: {
  message:"Hello World"
} };

var targetObject = Object.assign({}, sourceObj)
console.log(targetObject);

//Change one of the property
targetObject.y.message = "Hi There";

console.log(targetObject);
console.log(sourceObj);
```
**Output:**
```plaintext
{ data: 10, y: { message: 'Hello World' } }
{ data: 10, y: { message: 'Hi There' } }
{ data: 10, y: { message: 'Hi There' } }
```
**Explanation:**

* We have a normal source object which contains an integer value and others as reference-type objects.
* After copying the source object to the target object we can notice that everything is copied successfully.
* But, let's try to manipulate the reference object value by the target object.
* We can see, as our reference was copied only, hence the changes will be reflected in both `sourceObj` and `targetObject`.

:::
:::section{.main}

##  Browser Compatibility

This object assigned in javascript is supported by almost every top browser like chrome, edge, firefox, opera, safari, etc. 
The only exception is **Internet Explorer** which doesn't support this function.

:::


:::section{.summary}
## Conclusion

* `Object.assign()` function copies the properties from source objects to target object.
* It is used for cloning the object.
* It is also used for merging the object, if there are multiple keys then merged values will be overwritten from left to right order of parameters.
* Only `enumerable` and own properties will be copied with this function.


:::

:::section{.main}
## See Also

* `Object.freeze()`
* `Object.seal()`
* `Object.create()`

:::