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 ✅:

42 

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.