JavaScript Objects

#javascript #webdev #vscode

Hey developers 👋🏻, in this blog we will be discussing about JavaScript Objects.

Topics Covered :

What are JavaScript Objects.
Why to use them?
Three ways to create them.
How to access properties from Objects.

What are JavaScript Objects ?

JavaScript Objects are just as real world objects, for example:

A car is an object which has some property :

One Engine
4 Tiers
4 Doors
Company's Name
Color

and many more. We just have to express this in a syntactical way :

let car = {
    company: "Tesla",
    color: "Matte-Black",
    tiers: 4,
    doors: 4,
    engine: 1
}

Here as we can see there are 4 properties company, color, tiers and doors, where all of these properties are defined in a key : value pair and the key is the indicator of the value.

So if I console.log(car) I would get :

further in this blog, I will explain how to make an object in detail but before understanding that let's understand the need of objects.

Why to use Objects ?

Objects are non-primitive data types which means they are not meant to store a single data, rather it is meant to store more complex entities. We can store multiple data-types inside an object, even functions are accepted in them.

In a very layman's terms, objects is a mini version of class, which can be used to store multiple entities and can be used in multiple places though it would be wrong to compare objects and classes.

Three Ways to Create Objects :

Three ways to create objects are :

1. Object Literals :

      const person = {
          name: "Shreyas Pahune",
          age: 18,
          isMale: true,
          favLangs: [
              "JavaScript",
              "TypeScript",
              "Java",
              "Dart/Flutter"
          ]
      }

ii. Here in the above way, we just have to insert the key : value pair inside a pair of curly brackets.

2. New Keyword :

      const person = new Object()
      person.name = "Shreyas Pahune"
      person.age = 18
      person.isMale = true
      person.favLangs :  ["JavaScript", "TypeScript", "Java", "Dart/Flutter"]

ii. When using this way, the code gets unnecessarily long, while you can achieve the same result by using the Object Literal method (1st method).

3. Using Object.create() :

      const person = {
          name: "full-name",
          age: 0,
          isMale: true,
          favLangs: [
              "Lang1",
              "Lang2",
              "Lang3",
              "Lang4"
          ]
      }

      const shreyas = Object.create(person)
      shreyas.name = Shreyas Pahune"
      shreyas.age = 18
      shreyas.isMale = true
      shreyas.favLangs :  ["JavaScript", "TypeScript", "Java", "Dart/Flutter"]

ii. Object.create() always makes an new object whilst keeping the original object as an template to follow.

How to Retrieve Data from Objects ?

There are two ways of retrieving data from an object :

Dot Notation
Bracket Notation

Dot Notation is :

let person = {
    name: "Shreyas Pahune"
}

console.log(person.name) // expected output : Shreyas Pahune

Bracket Notation is :

let person = {
    name: "Shreyas Pahune"
}

console.log(person['name']) // expected output : Shreyas Pahune

Bonus 🎈 :

There is a thing called object constructor where we use a special type of function to create an object.

The special function is known as constructor function and it is somewhat like Object.create() but better.

Here in this function, we have to pass parameters and it is suggested to use this or the object literal type to create small-medium sized objects.

Here is the syntax for it 👇🏻

function Person(name, age, isMale, favLang) {
  this.name = name;
  this.age = age;
  this.isMale = isMale;
  this.favLang = favLang;

  this.displayInfo = () => {
    console.log(
      `My name is ${this.name}, I am ${this.age} years old and I like to code in 
      ${this.favLang}!`
    );
  };
}

const personOne = new Person("Shreyas", 18, true, [
  "Typescript",
  "JavaScript",
  "Java",
  "Dart/Flutter"
]);

personOne.displayInfo();

Here in the above example, we have made a function called person

NOTE: The first letter of a constructor function is to be kept capital. Nothing compulsory but just a convention!

The function takes 4 parameters/arguments, and the this keyword refers to the object it indicates, so here if I make another person named as personTwo and give them a name as Anushka then the object will use the new name instead of the old name passed in.

Here we have made a function which is defined as a property and after making an instance(personOne) of the Person Object we can call the function as usual.

Expected output of the function would be :

My name is Shreyas, I am 18 years old and I like to code in Typescript,JavaScript,Java,Dart/Flutter!

Thank you so much for reading the whole blog 👏🏻, I really appreciate it.