Understanding Objects in JavaScript is very important as Objects and Arrays will be used extensively while working with JavaScript. Objects are nothing but the collection of a bunch of variables also called properties and methods Objects are declared using a flower bracket let's see with an example.

let data = {} // empty object

As Objects also have properties let's add some properties. properties and values are separated using : and Properties and methods are separated using , this is the syntax for Objects. Remember that properties are also called key/value pairs. We can add any data type we want it can be array, boolean, number, string and an object also

data = {
    property1: "value1",
    property2: "value2",
}

Now let's add some Object methods also

data = {
  property1: "value1",
  property2: "value2",
  method1: function () {
    console.log("inside method 1");
  },
  method2: function () {
    console.log("inside method 2");
  },
};

There is a shorthand for declaring methods in which we can directly write the method name without giving value let's see how it looks

data = {
  property1: "value1",
  property2: "value2",
  method1() {
    console.log("inside method 1");
  },
  method2() {
    console.log("inside method 2");
  },
};

Now let's see how we can access these property values and methods. There are two ways to access these values.

Dot and Bracket Notation

In Dot notation we use . after the object name to access the properties and methods whereas in Bracket we simply use [] to access the values of the properties let's see them in action

console.log(data.property1)       // value1
console.log(data["property2"])    // value2
data.method1()                    // inside method 1

We can use dot and bracket notations to add new properties and methods also or to manipulate existing data

data["property2"] = "value2 is changed"
data.property3 = "value3"
data.method3 = function() {
    console.log("new method is added")
}

Now Let's create an actual object with the things we have learned

const obj = {
  fruit: "mango",
  otherFruits: ["orange", "apple", "grapes", "banana"],
  favFruit() {
    console.log("my favourite fruit it mango");
  },
  remainingFruit() {
    console.log("orange", "apple", "grapes", "banana");
  },
};

console.log(obj.fruit);               // mango
console.log(obj["otherFruits"][1]);   // apple
obj.favFruit();                       // my favourite fruit it mango
obj.remainingFruit()                  // orange apple grapes banana

Now the above code makes sense right? Everything looks great but wait there is a better way to write the above code let's see how

`this` keyword

this keyword in javascript refers to the current object we are in open the console in the browser and type this and enter it gives the window object which is available globally if we access the this in the above object we have created this refers to the object the keyword is in it means this keyword in the above object is obj let's refactor the above code

const obj = {
  fruit: "mango",
  otherFruits: ["orange", "apple", "grapes", "banana"],
  favFruit() {
    console.log(`my favourite fruit it ${this.fruit}`);
  },
  remainingFruit() {
    console.log(this.otherFruits);
  },
};

Above code works exactly as same as previous one. this keyword is used a lot in constructor functions and object-oriented programming in javascript understanding what it does is important. hope you learned something from this article

Thanks for reading...