JavaScript Shallow Copy

Introduction

A JavaScript shallow copy means that the Primitive datatype value of the new variable is disconnected from the original variable, and the Non Primitive datatype value of the new variable is connected to the original variable.

In this tutorial, you’ll learn what a shallow copy is, how it works, different methods to create one, real-life examples, common mistakes, interview questions, and best practices.

What is JavaScript Shallow Copy?

A shallow copy creates a new container, but nested objects still point to the same memory location.

A Shallow Copy is a copy of an object or array where:

  1. Primitive values are copied directly.
  2. References to nested objects or arrays are copied instead of creating new nested objects.

Syntax

There are several ways to create a shallow copy in JavaScript.

1. Using Spread Operator


let copy = { ...originalObject };

2. Using Object.assign()


let copy = Object.assign({}, originalObject);

3. Copying Arrays


let copy = [...originalArray];

Example 1: Shallow Copy Using Spread Operator

The copied object is independent for top-level properties.


let person = {
    name: "John",
    age: 35
};

let copiedPerson = { ...person };

copiedPerson.name = "Rom";

console.log(person.name);
console.log(copiedPerson.name);

Output:

John
Rom

Example 2: Shallow Copy with Nested Objects


let person = {
    name: "John",
    address: {
        city: "Delhi"
    }
};

let copiedPerson = { ...person };

copiedPerson.address.city = "Mumbai";

console.log(person.address.city);
console.log(copiedPerson.address.city);

Output:

Mumbai
Mumbai

Note: The nested object address is shared between both objects.

Shallow Copy Using Object.assign()

Another common method is Object.assign().


let car = {
    brand: "Toyota",
    year: 2025
};

let copiedCar = Object.assign({}, car);

copiedCar.year = 2026;

console.log(car.year);
console.log(copiedCar.year);

Output:

2025
2026

Shallow Copy Using Array Spread Operator

Arrays can also be copied using the spread operator.


let numbers = [1, 2, 3];

let copiedNumbers = [...numbers];

copiedNumbers.push(4);

console.log(numbers);
console.log(copiedNumbers);

Output:

[1, 2, 3]
[1, 2, 3, 4]

Note: The original array remains unchanged.

Shallow Copy of Nested Arrays


let data = [
    [1, 2],
    [3, 4]
];

let copiedData = [...data];

copiedData[0][0] = 100;

console.log(data);
console.log(copiedData);

Output:

[[100, 2], [3, 4]]
[[100, 2], [3, 4]]

Direct Assignment vs Shallow Copy

Direct Assignment

Both variables point to the same object. Changing one changes the other.


let obj1 = {
    name: "John"
};

let obj2 = obj1;
obj2.name = "Tom";

console.log(obj1.name);
console.log(obj2.name);
Tom
Tom

Shallow Copy

Creates a new object. Top-level properties become independent.


let obj1 = {
    name: "John"
};

let obj2 = { ...obj1 };

console.log(obj1.name);
console.log(obj2.name);
John
Tom

Shallow Copy vs Deep Copy

This is one of the most important interview topics.

Feature Shallow Copy Deep Copy
Top-level Properties Copied Copied
Nested Objects Shared Fully Copied
Memory Usage Less More
Performance Faster Slower
Independence Partial Complete

JavaScript Shallow Copy – Interview Questions

Q 1: What is a shallow copy in JavaScript?
Ans: A shallow copy copies object properties, but nested objects share the same reference.
Q 2: How do you create a shallow copy?
Ans: Using Object.assign() or spread operator {...obj}.
Q 3: What happens to nested objects in a shallow copy?
Ans: They are not copied; references are shared.
Q 4: Is the spread operator a shallow copy?
Ans: Yes.
Q 5: When should a shallow copy be used?
Ans: When an object has no nested structures.

JavaScript Shallow Copy – Objective Questions (MCQs)

Q1. A shallow copy copies ______.





Q2. Which method creates a shallow copy?





Q3. Spread operator {...obj} creates a ______ copy.





Q4. Changes in nested objects of a shallow copy will affect the ______.





Q5. Shallow copy works well for objects without ______.





Conclusion

JavaScript Shallow Copy is a fundamental concept that every developer should understand. It creates a new object or array while copying only the top-level values. Nested objects and arrays continue to share references with the original data, which can lead to unexpected behavior if not handled carefully.

Related JavaScript Tutorials