Objects

Objects definition

• Objects are a collection of named values (key value pairs)
• It is common practice to declare them with the const keyword.
• The named values are called properties.
• Order the properties don't matter.

const person = {
  name: 'Steve Dsouza',
  age: 22,
  motherTongue: 'Konkani',
  techStack: ['HTML', 'CSS', 'Javascript'],
};

Retrieving data from objects

Dot & Bracket Notation

• values from objects can be retrieved using the . or []notation
• to retrieve values with ., It has to be the actual property name.
• to retrieve values with [],It can be computed values that correspond to the property name.

const person = {
  firstName: 'ABC',
  lastName: 'EFG',
  age: 22,
  motherTongue: 'Konkani',
  techStack: ['HTML', 'CSS', 'Javascript'],
};
// using the dot notation
console.log(person.firstName); // output => ABC
//  using the bracket notatiom
const nameKey = 'Name';
console.log(person['first' + nameKey]); // output => ABC

Object methods

Objects can have methods in them. As methods are just function expressions they can be stored in an object.

• There could be a possibility that a method calcAge can be called multiple times in the program. This would cause a lot of resource use if the function was big and complex.
• It is good practice to store the values back into the object, so it can be later accessed as a property.

const person = {
  firstName: 'ABC',
  lastName: 'EFG',
  birthYear: 2001,
  motherTongue: 'Konkani',
  techStack: ['HTML', 'CSS', 'Javascript'],

  calcAge: function () {
    this.age = 2023 - this.birthYear;
    return 2023 - this.birthYear;
  },
};

console.log(person.calcAge()); // output=> 22
console.log(person.age); // output=> 22

Object destructuring

• The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values properties from objects, into distinct variables.

  const object = { a: 10, b: 2 };
  const { a, b } = object;
  console.log(a); //output => 10
• We can have different variable name from the property names.

  const person = {
    name: 'Steve',
    surname: 'Dsouza',
  };
  const { name: firstName, surname: lastName } = person;
  console.log(firstName, lastName); //output => Steve Dsouza

Optional Chaining

• The optional chaining (?.) operator accesses an object's property or calls a function.
  • If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error.
• This is often used when using API's , when we don't know what are the property names.
• Can be used with arrays as well.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName); //output => undefined
const catName = adventurer.cat?.name;
console.log(catName); //output=> Dinah

Object Keys, values, entries

• Used to get object properties and values.
• Returns an array.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
};

console.log(Object.keys(object1)); // output=> ["a","b","c"]
console.log(Object.values(object1)); // output=>["somestring", 42, false]
console.log(Object.entries(object1));
// output => [ [ 'a', 'somestring' ], [ 'b', 42 ], [ 'c', false ] ]
// Entries returns it as a key value pair

Object Grouping

It is a newer feature of JavaScript. Can be used to used to group elements together. The condition of the grouping is given in the callback function. Can create the custom groups inside the callback function.

const books = [
  { title: 'The Catcher in the Rye', genre: 'Fiction' },
  { title: 'Sapiens', genre: 'Non-Fiction' },
];

const group = Object.groupBy(books, (book) => book.genre);

console.log(group); //Output: {Fiction: Array(1), Non-Fiction: Array(1)}