Table of contents
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...