JavaScript Objects
Tags: javascript, webdev, vscode
Published: 2021-09-18 10:25:32

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



### Topics Covered :

1. What are JavaScript Objects.
2. Why to use them?
3. Three ways to create them.
4. 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 :

```js
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 :

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s381hi8tucy859vpdhrg.PNG)

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 :**

   i. ```js
      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 :**

   i. ```js
      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() :`**

   i. ```js
      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 :**

```js
let person = {
    name: "Shreyas Pahune"
}

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



**Bracket Notation is :**

```js
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 👇🏻

```js
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.   

 > PS :  I am publishing a new blog after a very long time so I'll try to be more regular xD! Till then... bye bye 👋🏻.