1. Home
Technology / JavaScript

JavaScript Object Manipulation

Create, clone, merge, and transform JavaScript objects with modern syntax and practical patterns.

TL;DR

  1. 01Create objects with literals, classes, or Object.create for different needs.
  2. 02Clone shallow with spread or deep with structuredClone.
  3. 03Merge objects easily using spread syntax or Object.assign.
Jump to section

Tips

  1. 01Use structuredClone() instead of JSON.parse(JSON.stringify(obj)) to deep-clone, since it handles dates, maps, and other types correctly.
  2. 02Use Object.hasOwn(obj, 'key') instead of hasOwnProperty() directly, since it works safely even on objects created with Object.create(null).

Warnings

  1. 01Spread and Object.assign() only do shallow copies, so changes to nested objects in the copy will still affect the original.
  2. 02Checking a property with truthy logic like if (obj.key) misfires when the value is legitimately 0 or false.

Creating Objects

    Object Literal

    Builds an object directly from comma-separated key-value pairs in one line.

    const user = { name: 'Ava', age: 28 };
    class

    Defines a reusable blueprint with shared methods and a constructor.

    class User {
  constructor(name) { this.name = name; }
}
    Object.create()

    Creates an object that inherits directly from a given prototype object.

    const proto = { greet() { return 'Hi!'; } };
const user = Object.create(proto);
    Computed Property

    Sets a dynamic key name using bracket syntax inside an object literal.

    const key = 'role';
const user = { [key]: 'admin' };

Access and Modify

    Dot Notation

    Reads or writes a property using a fixed, known key name.

    console.log(user.name); // 'Ava'
    Bracket Notation

    Reads a property using a variable or a name with special characters.

    console.log(user['role']); // dynamic key ok
    Optional Chaining

    Safely reads a deeply nested property without throwing if it's missing.

    console.log(user?.address?.city);
    Nullish Coalescing

    Provides a fallback value only when the left side is null or undefined.

    console.log(user.phone ?? 'N/A');
    delete

    Removes a property from an object entirely, including its key.

    delete user.temp; // removes the property

Enumerate Properties

    Object.keys()

    Returns an array of an object's own enumerable property names.

    Object.keys({ a: 1, b: 2 }); // ['a', 'b']
    Object.values()

    Returns an array of just the object's own property values.

    Object.values({ a: 1, b: 2 }); // [1, 2]
    Object.entries()

    Returns an array of [key, value] pairs for looping or transforms.

    Object.entries({ a: 1 }); // [['a', 1]]
    for...in

    Loops over enumerable keys, including any inherited from the prototype.

    for (const key in user) {
  console.log(key);
}
    Object.hasOwn()

    Checks whether an object owns a given key, ignoring inherited ones.

    Object.hasOwn(user, 'name'); // true

Cloning

    Spread

    Creates a shallow copy with every enumerable own property copied over.

    const copy = { ...original };
    Object.assign()

    Copies properties into a new target object; also works for merging.

    const copy = Object.assign({}, original);
    structuredClone()

    Deep-clones nested objects, Dates, Maps, and Sets without shared references.

    const deep = structuredClone(original);

Merge and Transform

    Spread Merge

    Merges objects into a new one; later keys overwrite earlier matches.

    const merged = { ...base, ...extra };
    Object.assign(target, source)

    Merges source properties directly into an existing target object in place.

    Object.assign(base, extra); // mutates base
    Object.fromEntries()

    Builds an object from an array of [key, value] pairs for fast lookups.

    const map = Object.fromEntries(
  users.map(u => [u.id, u])
);
    entries() + map()

    Converts an object back into an array to transform or filter it.

    Object.entries(user).map(([k, v]) => `${k}:${v}`);

In Practice

FAQ