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.
Top comments (1)
Thanks for sharing ๐ก