Do you have enough knowledge about object References in JS ?

Introduction

Hey forks !
In this blog post, we are going to explore 10 tricky JavaScript questions that test your understanding of arrays, objects, and references. Each question comes with a detailed explanation to help you learn. Perfect for developers who want to improve their coding skills and understand JavaScript better.

Example 1:

Code

let a = [1, 2, 3];
let b = a;
b = [4, 5, 6];
a.push(4);

console.log(a);
console.log(b);

output ✅:

 [ 1, 2, 3, 4 ]
 [ 4, 5, 6 ]

Explanation 💡:

Initially, a and b both refer to the same array [1, 2, 3].
b is then reassigned to a new array [4, 5, 6].
When a.push(4) is called, it modifies the original array a, not the new array assigned to b.

Example 2:

Code

let obj = { a: 1, b: { c: 2 } };
let newObj = Object.assign({}, obj);
newObj.b.c = 3;

console.log(obj.b.c);
console.log(newObj.b.c);

output ✅:

 3
 3

Explanation 💡:

Object.assign() creates a shallow copy of obj.
Both obj.b and newObj.b refer to the same object { c: 2 }.
Changing newObj.b.c affects obj.b.c as well because they point to the same inner object.

Example 3:

Code

let arr1 = [1, 2, 3];
let arr2 = arr1.map(x => x * 2);
arr1.push(4);

console.log(arr1);
console.log(arr2);

output ✅:

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

Explanation 💡:

arr1 is [1, 2, 3].
arr2 is created by mapping arr1 to [2, 4, 6].
arr1.push(4) adds 4 to arr1, but does not affect arr2.

Example 4:

Code

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let obj3 = { …obj1, …obj2 };
obj1.a = 3;

console.log(obj3);

output ✅:

{ a: 1, b: 2 }

Explanation 💡:

obj3 is created using the spread operator, combining obj1 and obj2.
Modifying obj1.a does not affect obj3 because obj3 contains a copy of the properties of obj1 and obj2.

Example 5:

Code

let arr = [1, 2, 3];
let arrCopy = JSON.parse(JSON.stringify(arr));
arr.push(4);
arrCopy.push(5);

console.log(arr);
console.log(arrCopy);

output ✅:

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

Explanation 💡:

JSON.parse(JSON.stringify(arr)) creates a deep copy of arr.
Modifying arr does not affect arrCopy and vice versa.

Example 6:

Code

let obj = { a: 1, b: 2 };
Object.freeze(obj);
obj.a = 3;
delete obj.b;

console.log(obj);

output ✅:

{ a: 1, b: 2 }

Explanation 💡:

Object.freeze(obj) makes obj immutable.
Any attempts to change properties or delete them are ignored.

Example 7:

Code

const arr1 = [1, 2];
const arr2 = […arr1];
arr2.push(3);

console.log(arr1);
console.log(arr2);

output ✅:

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

Explanation 💡:

The spread operator creates a shallow copy of arr1 into arr2.
Modifying arr2 does not affect arr1.

Example 8:

Code

function mutateObj(obj) {
obj.a = 42;
}

let myObj = { a: 1 };
mutateObj(myObj);

console.log(myObj.a);

output ✅:

Explanation 💡:

mutateObj modifies the property a of the passed object.
The change is reflected in myObj.

Example 9:

Code

const obj1 = { a: 1, b: 2 };
const obj2 = { …obj1, a: 3 };
obj2.b = 4;

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

output ✅:

 { a: 1, b: 2 }
 { a: 3, b: 4 }

Explanation 💡:

The spread operator creates a shallow copy of obj1 into obj2, but with a overridden to 3.
Modifying obj2 does not affect obj1.

Example 10:

Code

let x = { y: { z: 1 } };
let y = { …x };
y.y.z = 2;

console.log(x.y.z);
console.log(y.y.z);

output ✅:

 2
 2

Explanation 💡:

The spread operator creates a shallow copy of x.
y.y and x.y refer to the same inner object { z: 1 }.
Modifying y.y.z affects x.y.z as well.