Do you have enough knowledge about object References in JS ? 🤯
Tags: javascript, coding, interview, webdev
Published: 2024-07-03 06:04:56


## 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.