1. CRUD in Objects

const User = {
  name: "John",
  age: 12,
  job: "Software Developer",
  hobby: "Movies",
};

User.place = "London";
console.log(User.age); // 12
User.name = "Arjunan";
delete User.hobby;

console.log(User);

{
  name: 'Arjunan',
  age: 12,
  job: 'Software Developer',
  place: 'London'
}

2. Delete inside function

Delete will only work for Objects

const fn = (function (num) {
  delete num;
  return num;
})(5);

console.log(fn); // 5

3. What if our keys are sentences with gaps

Use string to store and array to access it.

const User = {
  name: "Arjunan",
  "My home is at": "London",
};

console.log(User["My home is at"]); // London

4. Add dynamic values

let property = "name";
let value = "Arjunan";

const User1 = {
  property: value,
};
User1.value = property;
console.log(User1); // { property: 'Arjunan', value: 'name' }

const User2 = {
  [property]: value,
};
User2[value] = property;
console.log(User2); // { name: 'Arjunan', Arjunan: 'name' }

5. How to iterate through a Object

const User = {
  name: "Arjunan",
  age: 12,
  place: "London",
};

for (let key in User) {
  console.log(key, User[key]);
}
name Arjunan
age 12
place London

6. What is the output?

The key value will be updated but position remains same.

const User = {
  a: "One",
  b: "Two",
  a: "Three",
};

console.log(User);
// { a: 'Three', b: 'Two' }

7. Multiply by Two

Create a function multiplyByObject(User), that multiply all the numeric values of Object by 2.

const User = {
  a: 100,
  b: 200,
  name: "Arjunan",
};

function multiplyByTwo(User) {
  for (let key in User) {
    if (typeof User[key] === "number") {
      User[key] *= 2;
    }
  }
}

multiplyByTwo(User);
console.log(User);
// { a: 200, b: 400, name: 'Arjunan' }

8. What is the output?

const a = {};
const b = { key: "b" };
const c = { key: "c" };

a[b] = 123;
a[c] = 456;

console.log(a[b]);
console.log(a);
// 456
// { '[object Object]': 456 }

9. What is JSON Stringify & Parse

Use case is for storing in localStorage. In localStorage we cant save Objects directly.

const User = {
  name: "Arjunan",
  age: 12,
};

const strUser = JSON.stringify(User);
console.log(strUser); // {"name":"Arjunan","age":12}
console.log(strUser.name); // undefined
localStorage.setItem("data", strUser);

console.log(JSON.parse(strUser)); // { name: 'Arjunan', age: 12 }
console.log(JSON.parse(strUser).name); // Arjunan
console.log(localStorage.getItem("data")); // {"name":"Arjunan","age":12}
console.log(JSON.parse(localStorage.getItem("data"))); // {name: 'Arjunan', age: 12}

10. What is the output?

console.log([..."Arjunan K"]); // [ 'A', 'r', 'j', 'u', 'n', 'a', 'n', ' ', 'K' ]

const user = { name: "Lydia", age: 21 };
const admin = { admin: true, ...user };
console.log(admin); // { admin: true, name: 'Lydia', age: 21 }

const settings = {
  name: "Arjun",
  age: 12,
  place: "London",
};

// It will stringify the provided keys in array
const data = JSON.stringify(settings, ["age", "place"]);
console.log(data); // {"age":12,"place":"London"}
console.log(JSON.parse(data)); // { age: 12, place: 'London' }

11. What is the output?

this in arrow function points to window object.

const shape = {
  radius: 10,
  diameter: function () {
    return this.radius * 2;
  },
  perimeter: () => {
    return 2 * Math.PI * this.radius;
  },
};

console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NaN

12. What is Destructuring in Objects?

const User = {
  name: "Arjun",
  age: 12,
  place: {
    country: "India",
    locality: "Mencil",
  },
};

const name = "John";

const {
  name: myName,
  age,
  place: { country },
} = User;

console.log(myName, age, name, country);
// Arjun 12 John India

13. Output of Rest Operation

function getItems1(firstFruits, ...args, favoriteFruit) {
  console.log([...firstFruits, ...args, favoriteFruit]);
}

getItems1(["banana", "apple"], "pineapple", "orange");
// SyntaxError: Rest parameter must be last formal parameter

function getItems2(firstFruits, favoriteFruit, ...args) {
  console.log([...firstFruits, ...args, favoriteFruit]);
}

getItems2(["banana", "apple"], "pineapple", "orange");
// [ 'banana', 'apple', 'orange', 'pineapple'

14. What is the Output?

Pass by reference will effect both the values.

let c = { greeting: "Hello" };
let d;
d = c;
c.greeting = "Hi";
d.name = "Arjun";

console.log(d); // { greeting: 'Hi', name: 'Arjun' }
console.log(c); // { greeting: 'Hi', name: 'Arjun' }

15. What is the Output?

We are setting the person in 0th index. So setting it null wont effect cause any issues. But values inside the object are passed by reference.

let person1 = { name: "Lydia" };
const members1 = [person1];
person1 = null;
console.log(members1);
// [ { name: 'Lydia' } ]

let person2 = { name: "Lydia", age: 12 };
const members2 = [person2];
person2.age = 20;
console.log(members2);
// [ { name: 'Lydia', age: 20 } ]

16. What is the Output?

In first two calls we are cloning it, More like pass by value. In next 2 calls we are passing the actual value as reference.

const value = { number: 10 };

const multiply = (x = { ...value }) => {
  console.log((x.number *= 2));
};

multiply(); // 20
multiply(); // 20
multiply(value); // 20
multiply(value); // 40

17. What is the Output?

In the function we are first making a change to a value inside object. That will act as reference. But completely changing object it also equalent to making it null. So it wont effect it.

function changeAgeAndReference(person) {
  person.age = 25;
  person = {
    name: "John",
    age: 50,
  };

  return person;
}

const person1 = {
  name: "Baki",
  age: 30,
};

const person2 = changeAgeAndReference(person1);

console.log(person1); // { name: 'Baki', age: 25 }
console.log(person2); // { name: 'John', age: 50 }

18. What is Shallow Copy & Deep Copy of a Object?

If the New Copied Object has reference to some parts of object it is called Shallow Copy.

If we completely clone a object with no reference, it is called Deep Copy.

const User = {
  name: "Arjunan",
  age: 12,
};

// Shallow Copy
let shallowCopy = Object.assign({}, User);
console.log(shallowCopy); // { name: 'Arjunan', age: 12 }

// Deep Copy
let deepCopy1 = { ...User };
let deepCopy2 = JSON.parse(JSON.stringify(User));
console.log(deepCopy1); // { name: 'Arjunan', age: 12 }
console.log(deepCopy2); // { name: 'Arjunan', age: 12 }