Implement shallowClone() in JavaScript

easy

By FrontendAtlas Team · Updated Jul 7, 2026

Implement shallowClone(value) in JavaScript. Your function should accept an object or array and return a new top-level container while preserving nested object and array references. Primitives, null, and unsupported root values should throw TypeError. This challenge includes starter code, tests, examples for object and array cloning, shallow vs deep clone edge cases, and interview follow-ups around Object.assign(), spread syntax, prototypes, descriptors, and structuredClone().

Expected behavior

Your shallowClone(value) implementation should:

Accept only objects and arrays as root inputs.
Arrays return a new array reference with the same top-level items.
Objects return a new object reference with the same own enumerable properties.
Top-level primitive property and item values are copied by value inside the cloned container.
Nested objects and arrays remain shared references.
Updating a top-level property or array slot on the clone does not mutate the original container.
Mutating a nested object or nested array through the clone is visible through the original.
null and primitive root inputs throw TypeError.
The base solution copies own enumerable string and symbol properties.
Prototype chains and property descriptors are not preserved.

Arguments

value: Object | Array — The object or array to clone.

Returns

Object | Array — A new shallow-cloned object or array.

Examples

// Array shallow clone
const original = [1, { count: 2 }];
const copy = shallowClone(original);

copy === original; // false
copy[1] === original[1]; // true

copy[0] = 99;
original[0]; // 1

copy[1].count = 3;
original[1].count; // 3

// Object shallow clone
const user = { name: 'Ada', meta: { active: true } };
const cloned = shallowClone(user);

cloned === user; // false
cloned.meta === user.meta; // true

Solution

Overview

Interview answer: the base prompt is to create a new top-level container while preserving nested references. Guard null and primitive values first. For arrays, use slice(). For objects, use Object.assign({}, value), which copies own enumerable string and symbol properties while ignoring inherited prototype properties. Deep cloning, structuredClone(), JSON cloning, prototypes, descriptors, Maps, Sets, Dates, and circular references are follow-ups, not part of the minimal shallowClone(value) contract.

Shallow clone vs deep clone: A shallow clone creates a new top-level object or array but keeps nested references shared. A deep clone recursively creates new nested objects and arrays. This challenge is intentionally shallow; deep clone behavior belongs in the related deep clone challenge.

Approach: Branch on array vs object

Guard unsupported root values before cloning: null and primitives should throw a TypeError. Then branch on arrays with value.slice(); otherwise clone the object with Object.assign({}, value). Object.assign copies own enumerable string and symbol properties, ignores inherited prototype properties, runs in O(n) time over top-level properties or items, uses O(n) space for the new top-level container, and preserves nested references by design.

Notes & Pitfalls

Pitfalls

This is a shallow clone: nested objects and arrays are still shared by reference.
`null` is an object in JS, so guard `value === null` before the object branch.
`Object.assign({}, value)` copies own enumerable string and symbol properties, but it does not preserve descriptors or prototypes.
Avoid `for...in` for the base solution because it can walk inherited prototype properties.

Edge cases

`[]` returns a new empty array (different reference).
`{}` returns a new empty object (different reference).
Nested objects remain the same reference in the clone.

Techniques

Array copying with `.slice()`.
Object copying with `Object.assign({}, value)`.
Guard-first input validation before branching.

Common interview follow-ups:

How would structuredClone() change the behavior for nested references?
When would you preserve prototypes or descriptors?
How would Maps, Sets, Dates, class instances, or circular references change the contract?
When is Object.assign({}, value) preferable to object spread, or vice versa?

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse JavaScript interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open JavaScript mastery study plan Open Company Prep Open JavaScript Framework Prep Guide

export default function shallowClone(value) {
  throw new Error('Not implemented');
}

import shallowClone from './file';

describe('shallowClone', () => {
  test('clones arrays shallowly', () => {
    const nested = { x: 2 };
    const arr = [1, nested];
    const copy = shallowClone(arr);

    expect(copy).toEqual(arr);
    expect(copy === arr).toBe(false);
    expect(copy[1]).toBe(nested);
  });

  test('clones objects shallowly', () => {
    const nested = { c: 2 };
    const obj = { a: 1, b: nested };
    const copy = shallowClone(obj);

    expect(copy).toEqual(obj);
    expect(copy === obj).toBe(false);
    expect(copy.b).toBe(nested);
  });

  test('returns a different array reference', () => {
    const arr = [1, 2, 3];
    const copy = shallowClone(arr);

    expect(copy).toEqual(arr);
    expect(copy === arr).toBe(false);
  });

  test('returns a different object reference', () => {
    const obj = { a: 1, b: 2 };
    const copy = shallowClone(obj);

    expect(copy).toEqual(obj);
    expect(copy === obj).toBe(false);
  });

  test('preserves nested object references', () => {
    const nested = { count: 1 };
    const obj = { nested };
    const copy = shallowClone(obj);

    expect(copy === obj).toBe(false);
    expect(copy.nested).toBe(nested);
    expect(copy.nested).toBe(obj.nested);
  });

  test('preserves nested array references', () => {
    const nested = [1, 2];
    const obj = { nested };
    const copy = shallowClone(obj);

    expect(copy === obj).toBe(false);
    expect(copy.nested).toBe(nested);
    expect(copy.nested).toBe(obj.nested);
  });

  test('top-level mutation on the clone does not mutate the original', () => {
    const obj = { a: 1, nested: { count: 1 } };
    const copy = shallowClone(obj);

    copy.a = 99;

    expect(obj.a).toBe(1);
    expect(copy.a).toBe(99);
  });

  test('nested mutation through the clone is visible through the original', () => {
    const obj = { nested: { count: 1 } };
    const copy = shallowClone(obj);

    copy.nested.count = 2;

    expect(obj.nested.count).toBe(2);
  });

  test('handles empty arrays and objects', () => {
    const arr = [];
    const obj = {};

    const arrCopy = shallowClone(arr);
    const objCopy = shallowClone(obj);

    expect(arrCopy).toEqual([]);
    expect(arrCopy === arr).toBe(false);
    expect(objCopy).toEqual({});
    expect(objCopy === obj).toBe(false);
  });

  test('throws TypeError for null and primitives', () => {
    expect(() => shallowClone(null)).toThrow(TypeError);
    expect(() => shallowClone(42)).toThrow(TypeError);
    expect(() => shallowClone('x')).toThrow(TypeError);
    expect(() => shallowClone(true)).toThrow(TypeError);
    expect(() => shallowClone(undefined)).toThrow(TypeError);
  });

  test('does not mutate the original container while cloning', () => {
    const arr = [1, { count: 1 }];
    const obj = { a: 1, nested: { count: 1 } };
    const arrBefore = arr.slice();
    const objKeysBefore = Object.keys(obj);

    shallowClone(arr);
    shallowClone(obj);

    expect(arr).toEqual(arrBefore);
    expect(Object.keys(obj)).toEqual(objKeysBefore);
    expect(obj).toEqual({ a: 1, nested: { count: 1 } });
  });

  test('copies own enumerable symbol properties', () => {
    const key = Symbol('id');
    const obj = { a: 1, [key]: 123 };

    const copy = shallowClone(obj);

    expect(copy[key]).toBe(123);
  });

  test('does not copy prototype properties', () => {
    const proto = { inherited: true };
    const obj = Object.create(proto);
    obj.own = true;

    const copy = shallowClone(obj);

    expect(copy.own).toBe(true);
    expect(copy.inherited).toBe(undefined);
    expect('inherited' in copy).toBe(false);
  });
});

Run tests to see results.