Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Object.assign and Shallow Copying | Modern Object Composition and Best Practices
Objects and Prototypes in JavaScript

bookObject.assign and Shallow Copying

Object composition is a powerful technique in JavaScript that lets you build new objects by combining properties from existing ones. This approach is useful when you want to create objects that share behavior or configuration without relying on inheritance. As your codebase grows, you will often need to copy or merge objectsβ€”perhaps to add configuration options, extend defaults, or combine user input with system settings. JavaScript provides several ways to do this, but one of the most common and flexible tools is Object.assign.

12345
const defaults = { theme: "light", showSidebar: true }; const userSettings = { theme: "dark" }; const finalSettings = Object.assign({}, defaults, userSettings); console.log(JSON.stringify(finalSettings)); // { theme: "dark", showSidebar: true }
copy

In the code above, Object.assign creates a new object by copying properties from defaults and userSettings into an empty object ({}). If a property exists in more than one source, the last value winsβ€”so in this case, the theme property from userSettings overwrites the one from defaults. This is a common pattern for merging configuration objects.

However, it's important to understand that Object.assign performs a shallow copy. This means it copies property values directly, but if a property value is itself an object or array, only the reference to that object or array is copiedβ€”not the object or array itself. Changes to nested objects in one place can affect other objects that share those references. Always be cautious when working with nested data structures to avoid unexpected side effects when using shallow copying.

question mark

What happens to cart.items.apple after running the code above?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 7.69

bookObject.assign and Shallow Copying

Swipe to show menu

Object composition is a powerful technique in JavaScript that lets you build new objects by combining properties from existing ones. This approach is useful when you want to create objects that share behavior or configuration without relying on inheritance. As your codebase grows, you will often need to copy or merge objectsβ€”perhaps to add configuration options, extend defaults, or combine user input with system settings. JavaScript provides several ways to do this, but one of the most common and flexible tools is Object.assign.

12345
const defaults = { theme: "light", showSidebar: true }; const userSettings = { theme: "dark" }; const finalSettings = Object.assign({}, defaults, userSettings); console.log(JSON.stringify(finalSettings)); // { theme: "dark", showSidebar: true }
copy

In the code above, Object.assign creates a new object by copying properties from defaults and userSettings into an empty object ({}). If a property exists in more than one source, the last value winsβ€”so in this case, the theme property from userSettings overwrites the one from defaults. This is a common pattern for merging configuration objects.

However, it's important to understand that Object.assign performs a shallow copy. This means it copies property values directly, but if a property value is itself an object or array, only the reference to that object or array is copiedβ€”not the object or array itself. Changes to nested objects in one place can affect other objects that share those references. Always be cautious when working with nested data structures to avoid unexpected side effects when using shallow copying.

question mark

What happens to cart.items.apple after running the code above?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 3. ChapterΒ 2
some-alt