Skip to content
-
JavaScript Object assign() Method
Last Updated :
12 Jul, 2024
The Object.assign() method is used to copy the values and properties from one or more source objects to a target object. It invokes getters and setters since it uses both [[Get]] on the source and [[Set]] on the target.
Syntax:
Object.assign(target, ...sources);
Parameters:
- target: It is the target object to which values and properties have to be copied.
- sources: It is the source object from which values and properties have to be copied.
Return Value:
Object.assign() returns the target object.
Example 1: In this example, the properties of the object "obj1" i.e. { a: 10 } is copied to the target object "new_obj".
JavaScript
// creating an object constructor
// and assigning values to it
const obj1 = { a: 1 };
// creating a target object and copying values and
// properties to it using object.assign() method
// Here, obj1 is the source object
const new_obj = Object.assign({}, obj1);
// Displaying the target object
console.log(new_obj);
Output:
Object { a: 1 }Example 2: In this example, the properties of three source objects "obj1, obj2, obj3" are copied to the target object "new_obj". The value of any pre-existing key-value pair that existed in the previous object will be over-written. For example, obj1.b which has a value of 10 will now be overwritten with obj2.b which has a value of 20
JavaScript
// creating 3 object constructors and assigning values to it
let obj1 = { a: 10 };
let obj2 = { b: 20 };
let obj3 = { c: 30 };
// Creating a target object and copying values
// and properties to it using object.assign() method
let new_obj = Object.assign({}, obj1, obj2, obj3);
// Displaying the target object
console.log(new_obj);
Output :
Object { a: 10, b: 20, c: 30 }Example 3: In this example, the properties of three source objects "obj1, obj2, obj3" are copied to the target object "new_obj" and the target object gets the overwritten values.
JavaScript
// Creating 3 object constructors and assigning values to it
let obj1 = { a: 10, b: 10, c: 10 };
let obj2 = { b: 20, c: 20 };
let obj3 = { c: 30 };
// Creating a target object and copying values and
// properties to it using object.assign() method
let new_obj = Object.assign({}, obj1, obj2, obj3);
// Displaying the target object
console.log(new_obj);
Output:
Object { a: 10, b: 20, c: 30 }Explanation:
In the above code the properties are overwritten by other objects that have the same properties later in the same order of parameters.
Applications:
- Object.assign() is used for cloning an object, to merge objects with the same properties.
Errors and Exceptions:
- A TypeError is raised if the property is non-writable.
- The target object can be changed only if the properties are added before the error is raised.
- Object.assign() does not throw on null or undefined source values
We have a complete list of JavaScript Object methods, to check those please go through this JavaScript Object Complete Reference article.
Supported Browsers:
- Google Chrome
- Mozilla
- Opera
- Safari
JavaScript Object assign() Method
Similar Reads
JavaScript Constructor Method A constructor in JavaScript is a special function used to create and initialize objects. It sets up object properties and is typically invoked using the new keyword. Constructors allow for the creation of multiple instances with similar properties and methods.In JavaScript, constructors can be defin
7 min read
JavaScript Object assign() Method The Object.assign() method is used to copy the values and properties from one or more source objects to a target object. It invokes getters and setters since it uses both [[Get]] on the source and [[Set]] on the target.Syntax:Object.assign(target, ...sources);Parameters:target: It is the target obje
4 min read
JavaScript Object create() Method JavaScript object.create() method is used to create a new object with the specified prototype object and properties. Object.create() method returns a new object with the specified prototype object and properties.Syntax:Object.create(prototype[, propertiesObject])Parameters:prototype: It is the proto
3 min read
JavaScript Object defineProperty() Method The Object.defineProperty() method in JavaScript is a Standard built-in object which defines a new property directly on an object or it can also modify the existing property of an object and return the object. Syntax:Object.defineProperty(obj, prop, descriptor)Parameters:This method accepts three pa
3 min read
JavaScript Object defineProperties() Method The Object.defineProperties() method in JavaScript is a standard built-in Object that defines a new or modifies existing properties directly on an object and it returns the object.Syntax:Object.defineProperties(obj, props) Parameters:Obj: This parameter holds the object on which the properties are g
2 min read
JavaScript Object entries() Method The Object.entries() method in JavaScript is used to retrieve an array of an object's enumerable property [key, value] pairs. This method is particularly useful for transforming and iterating over objects in situations where array-like manipulation is needed.Syntax:Object.entries(obj);Parameters:obj
4 min read
JavaScript Object freeze() Method The Object.freeze() method is used to freeze an object. Freezing an object does not allow new properties to be added to the object and prevents removing or altering the existing properties. Object.freeze() preserves the enumerability, Configurability, writability, and prototype of the object. It ret
3 min read
JavaScript Object getOwnPropertyDescriptor() Method The Object.getOwnPropertyDescriptor() method in JavaScript is a standard built-in object that enables the full information on a property to be accessed and returns a property descriptor for the own property of a given object. Syntax: Object.getOwnPropertyDescriptor( obj, prop ) Parameters: This meth
2 min read
JavaScript Object getOwnPropertyNames() Method The Object.getOwnPropertyNames() method in JavaScript is a standard built-in object which returns all properties that are present in a given object except for those symbol-based non-enumerable properties.Syntax:Object.getOwnPropertyNames(obj)Parameters:This method accepts a single parameter as menti
3 min read
JavaScript Object getOwnPropertySymbols() Method The Object.getOwnPropertySymbols() method in JavaScript is a standard built-in object which returns an array of all symbol properties that are present in a given object. An empty array is returned until symbol properties are set on the object. Syntax: Object.getOwnPropertySymbols(obj) Parameters: ob
2 min read
`;
$(commentSectionTemplate).insertBefore(".article--recommended");
}
loadComments();
});
});
function loadComments() {
if ($("iframe[id*='discuss-iframe']").length top_of_element && top_of_screen articleRecommendedTop && top_of_screen articleRecommendedBottom)) {
if (!isfollowingApiCall) {
isfollowingApiCall = true;
setTimeout(function(){
if (loginData && loginData.isLoggedIn) {
if (loginData.userName !== $('#followAuthor').val()) {
is_following();
} else {
$('.profileCard-profile-picture').css('background-color', '#E7E7E7');
}
} else {
$('.follow-btn').removeClass('hideIt');
}
}, 3000);
}
}
});
}
$(".accordion-header").click(function() {
var arrowIcon = $(this).find('.bottom-arrow-icon');
arrowIcon.toggleClass('rotate180');
});
});
window.isReportArticle = false;
function report_article(){
if (!loginData || !loginData.isLoggedIn) {
const loginModalButton = $('.login-modal-btn')
if (loginModalButton.length) {
loginModalButton.click();
}
return;
}
if(!window.isReportArticle){
//to add loader
$('.report-loader').addClass('spinner');
jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', {
PRACTICE_API_URL: practiceAPIURL,
PRACTICE_URL:practiceURL
},function(responseTxt, statusTxt, xhr){
if(statusTxt == "error"){
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
}else{
window.scrollTo({ top: 0, behavior: 'smooth' });
$("#report_modal_content").show();
}
}
function closeShareModal() {
const shareOption = document.querySelector('[data-gfg-action="share-article"]');
shareOption.classList.remove("hover_share_menu");
let shareModal = document.querySelector(".hover__share-modal-container");
shareModal && shareModal.remove();
}
function openShareModal() {
closeShareModal(); // Remove existing modal if any
let shareModal = document.querySelector(".three_dot_dropdown_share");
shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" }));
document.querySelector(".hover__share-modal-container").append(
Object.assign(document.createElement('div'), { className: "share__modal" }),
);
document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" }));
const socialOptions = ["LinkedIn", "WhatsApp","Twitter", "Copy Link"];
socialOptions.forEach((socialOption) => {
const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" });
const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` });
const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` });
const shareLink = (socialOption === "Copy Link") ?
Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) :
Object.assign(document.createElement('a'), { className: "link-container" });
if (socialOption === "LinkedIn") {
shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`);
shareLink.setAttribute('target', '_blank');
}
if (socialOption === "WhatsApp") {
shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
if (socialOption === "Twitter") {
shareLink.setAttribute('href', `https://twitter.com/intent/tweet?url=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
shareLink.append(icon, socialText);
socialContainer.append(shareLink);
document.querySelector(".share__modal").appendChild(socialContainer);
//adding copy url functionality
if(socialOption === "Copy Link") {
shareLink.addEventListener("click", function() {
var tempInput = document.createElement("input");
tempInput.value = window.location.href;
document.body.appendChild(tempInput);
tempInput.select();
tempInput.setSelectionRange(0, 99999); // For mobile devices
document.execCommand('copy');
document.body.removeChild(tempInput);
this.querySelector(".share__option-text").textContent = "Copied"
})
}
});
// document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu"));
}
function toggleLikeElementVisibility(selector, show) {
document.querySelector(`.${selector}`).style.display = show ? "block" : "none";
}
function closeKebabMenu(){
document.getElementById("myDropdown").classList.toggle("show");
}