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 b = a;
b = [4, 5, 6];
a.push(4);
console.log(a);
console.log(b);
output ✅:
[ 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 newObj = Object.assign({}, obj);
newObj.b.c = 3;
console.log(obj.b.c);
console.log(newObj.b.c);
output ✅:
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 arr2 = arr1.map(x => x * 2);
arr1.push(4);
console.log(arr1);
console.log(arr2);
output ✅:
[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 obj2 = { b: 2 };
let obj3 = { …obj1, …obj2 };
obj1.a = 3;
console.log(obj3);
output ✅:
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 arrCopy = JSON.parse(JSON.stringify(arr));
arr.push(4);
arrCopy.push(5);
console.log(arr);
console.log(arrCopy);
output ✅:
[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
Object.freeze(obj);
obj.a = 3;
delete obj.b;
console.log(obj);
output ✅:
Explanation 💡:
Object.freeze(obj) makes obj immutable.
Any attempts to change properties or delete them are ignored.
Example 7:
Code
const arr2 = […arr1];
arr2.push(3);
console.log(arr1);
console.log(arr2);
output ✅:
[1, 2, 3]
Explanation 💡:
The spread operator creates a shallow copy of arr1 into arr2.
Modifying arr2 does not affect arr1.
Example 8:
Code
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 obj2 = { …obj1, a: 3 };
obj2.b = 4;
console.log(obj1);
console.log(obj2);
output ✅:
{ 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 y = { …x };
y.y.z = 2;
console.log(x.y.z);
console.log(y.y.z);
output ✅:
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.