#13 JavaScript Code Snippets: Objects, References, Destructuring and Spread Operator

const a = { name: "JS" };

const b = a;

b.name = "React";

console.log(a.name);

Both variables reference the same object.

const obj = { count: 1 };

const copy = obj;

copy.count++;

console.log(obj.count);

The original object is modified because both variables point to the same reference.

let a = { value: 10 };

let b = a;

b = { value: 20 };

console.log(a.value);

Reassigning b creates a new object and does not affect a.

const a = { id: 1 };

const b = a;

console.log(a === b);

Both variables point to the exact same object reference.

const a = { id: 1 };

const b = { id: 1 };

console.log(a === b);

Objects with identical values are still different references.

const arr1 = [1, 2];

const arr2 = arr1;

arr2.push(3);

console.log(arr1);

Arrays are also reference types.

const user = {
    profile: {
        age: 20
    }
};

const copy = user;

copy.profile.age = 25;

console.log(user.profile.age);

The nested object is shared through the same reference.

function update(user) {
    user.name = "React";
}

const user = {
    name: "JS"
};

update(user);

console.log(user.name);

Objects are passed by sharing the reference.

const user = {
    name: "JS"
};

const copy = {
    ...user
};

copy.name = "React";

console.log(user.name);

Spread creates a new top-level object.

const obj = {
    a: 1,
    b: 2
};

const result = {
    ...obj,
    b: 10
};

console.log(result.b);

Later properties overwrite earlier ones.

const user = {
    profile: {
        age: 20
    }
};

const copy = {
    ...user
};

copy.profile.age = 30;

console.log(user.profile.age);

Spread performs a shallow copy. Nested objects remain shared.

const arr = [1, 2];

const copy = [...arr];

copy.push(3);

console.log(arr.length);

Spread creates a new array.

const result = [
    ...[1, 2],
    ...[3, 4]
];

console.log(result);

Spread merges arrays element by element.

const user = {
    name: "JS",
    age: 20
};

const { name } = user;

console.log(name);

Destructuring extracts matching properties.

const user = {
    name: "JS"
};

const { name: username } = user;

console.log(username);

Destructuring allows property renaming.

const user = {
    name: "JS"
};

const { name, age = 18 } = user;

console.log(age);

Default values are used when the property does not exist.

const user = {
    name: "JS"
};

const { age } = user;

console.log(age);

Missing properties produce undefined.

const user = {
    profile: {
        age: 25
    }
};

const {
    profile: { age }
} = user;

console.log(age);

Nested destructuring can extract deeply nested properties.

const arr = [10, [20, 30]];

const [a, [b]] = arr;

console.log(b);

Array destructuring supports nested patterns.

const user = {
    id: 1,
    name: "JS",
    age: 20
};

const { id, ...rest } = user;

console.log(rest);

The rest operator collects remaining properties.

const arr = [10, 20, 30];

const [first, , third] = arr;

console.log(third);

Commas can skip array elements during destructuring.

function printUser({ name }) {
    console.log(name);
}

printUser({
    name: "React"
});

Destructuring can be used directly in function parameters.

const user = {
    id: 1,
    name: "JS"
};

console.log(
    Object.keys(user)
);

Object.keys() returns an array of property names.

const user = {
    id: 1,
    name: "JS"
};

console.log(
    Object.values(user)
);

Object.values() returns property values.

const user = {
    id: 1,
    name: "JS"
};

console.log(
    Object.entries(user).length
);

Object.entries() returns key-value pairs.

const user = {
    name: "JS"
};

console.log(
    user.hasOwnProperty("name")
);

The property exists directly on the object.

const user = {
    name: "JS"
};

console.log(
    "name" in user
);

The in operator checks property existence.

const user = Object.freeze({
    name: "JS"
});

user.name = "React";

console.log(user.name);

freeze() prevents property modification.

const user = Object.seal({
    name: "JS"
});

user.name = "React";

console.log(user.name);

seal() allows updating existing properties.

const user = {
    name: "JS",
    age: 20
};

delete user.age;

console.log(user.age);

delete removes the property from the object.

const user = {
    name: "JS"
};

const copy = user;

copy.name = "React";

console.log(user.name);

Both variables reference the same object.

const user = {
    profile: {
        age: 20
    }
};

const copy = {
    ...user
};

copy.profile.age = 30;

console.log(user.profile.age);

Spread creates a shallow copy. Nested objects remain shared.

const users = [
    { age: 20 }
];

const copy = [...users];

copy[0].age = 30;

console.log(users[0].age);

The array is copied, but the object inside is still shared.

const target = {
    a: 1
};

const source = {
    b: 2
};

const result =
    Object.assign(target, source);

console.log(result);

Object.assign() copies properties into the target object.

const a = {
    id: 1
};

const b = {
    id: 1
};

console.log(a === b);

Different objects always have different references.

const a = [1, 2];
const b = [1, 2];

console.log(a === b);

Arrays are reference types.

const a = {};
const b = a;

console.log(a === b);

Both variables point to the same object.

const key = "name";

const user = {
    [key]: "JS"
};

console.log(user.name);

Computed property names evaluate the expression inside [].

const field = "age";

const user = {};

user[field] = 25;

console.log(user.age);

Bracket notation supports dynamic property names.

const user = {
    profile: {
        age: 20
    }
};

console.log(
    user?.profile?.age
);

Optional chaining safely accesses nested properties.

const user = null;

console.log(
    user?.profile?.age
);

Optional chaining stops evaluation when null or undefined is encountered.

const user = {
    age: null
};

console.log(
    user.age ?? 18
);

Nullish coalescing uses the right value for null or undefined.

const user = {
    age: 0
};

console.log(
    user.age ?? 18
);

0 is not null or undefined, so it is preserved.

const user = {
    id: 1,
    name: "JS"
};

const {
    id,
    ...rest
} = user;

console.log(rest.name);

The rest object contains all remaining properties.

const original = {
    user: {
        age: 20
    }
};

const copy = {
    ...original
};

copy.user = {
    age: 30
};

console.log(
    original.user.age
);

Reassigning the nested property creates a new object and breaks the shared reference.