Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda 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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 7.69

bookObject.assign and Shallow Copying

Deslize para mostrar o 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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 2
some-alt