0Pricing
JavaScript Academy · Lesson

Cloning & Merging — spread and Object.assign

Clone and merge objects/arrays using spread and Object.assign; understand shallow copy and overwrite order.

Cloning & Merging — spread and Object.assign is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 2. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 2 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Intro

Goal: Clone and merge objects/arrays safely.

  • Spread for clone/merge
  • Object.assign
  • Overwrite order
  • Shallow copy caveat
Cloning & Merging — spread and Object.assign — illustration 1

Spread: object clone

Use {...obj} for a shallow clone. Editing the clone does not change top-level fields in the original.

// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };

clone.level = 2;

console.log("Original:", user);
console.log("Clone:", clone);
Cloning & Merging — spread and Object.assign — illustration 2

Object.assign: clone

Object.assign({}, obj) also makes a shallow clone. Avoid mutating the source by assigning into an empty object.

// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);

copy.compact = true;

console.log("Settings:", settings);
console.log("Copy:", copy);
Cloning & Merging — spread and Object.assign — illustration 3

Merge: order matters

Merging is order-sensitive: later sources overwrite earlier keys (b becomes 9 here).

// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);

console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
Cloning & Merging — spread and Object.assign — illustration 4

Array spread: clone & merge

[...arr] clones an array. Combine arrays with [...a, ...b] without mutating.

// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];

const more = [4, 5];
const mergedNums = [...nums, ...more];

console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
Cloning & Merging — spread and Object.assign — illustration 5

Shallow vs deep

Shallow copy: nested objects/arrays are shared. For deep structures, copy inner levels explicitly.

// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };

// Mutate nested object
shallow.user.name = "Lena";

console.log("Original:", original);
console.log("Shallow:", shallow);
Cloning & Merging — spread and Object.assign — illustration 6

Clone method quiz

Quick check: Shallow clone without mutation.

Cloning & Merging — spread and Object.assign — illustration 7

Recap

Recap: Clone with spread or Object.assign into an empty object, merge by placing later sources last, and remember: these are shallow copies.

Cloning & Merging — spread and Object.assign — illustration 8

Frequently asked questions

Is the “Cloning & Merging — spread and Object.assign” lesson free?

Yes — the full text of “Cloning & Merging — spread and Object.assign” is free to read here on the web, and the JavaScript Academy course includes 2 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Cloning & Merging — spread and Object.assign”?

Clone and merge objects/arrays using spread and Object.assign; understand shallow copy and overwrite order. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 2, so you can start here or from the beginning and move at your own pace.

How long does the “Cloning & Merging — spread and Object.assign” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Array CRUD, Iteration; Object Basics & Access
  2. Cloning & Merging — spread and Object.assign
← Back to JavaScript Academy