JavaScript Objects

    Objects are the most important features of JavaScript, and most of JavaScript is all about objects and their usages. In this JavaScript tutorial, we will learn the basics of JS objects and how can we use them.

    What are objects in JavaScript?

    Objects are the variables or built-in data structures in JavaScript that are used to hold multiple values. As the name suggests objects are generally used to implement real-world objects using variables. For example, if you want to define a man using a variable then you can use the object variable that will store all the characteristics and functions for the man. Example 

    let man = {
        name : "Rahul",
        age  :  20,
        gender : "Male",
        height : "6(ft)", 
       }

    defining objects

    In the above example, you can see that we can define or declare an Object variable like a normal variable. We can either use the var, let, or const keyword to declare an object variable. syntax 

    declaration_keyword  object_name = { name1:value1, name2:value2, name3:value3 };

    The object can store multiple values in the form of name:value pairs separated with a comma, inside curly brackets {} . The name can be a variable name and the value can either be a data value or a function expression. Example 

    let student = { fname: "Ravi", lname:"Singh", age:14, class:7}

    In the above example, we declared an object by the name student , and it contains 4 name:value pairs. Every name in the student object has a value associated with it, for example fname name has a value of "Ravi", age has a value of 14 and so on. Inside the object to assign a value to a name we use the colon (:) symbol, and to separate the name:value pairs use the comma , .

    Object Properties

    All the name:value defined inside the object curly brackets are known as object properties which means they are the property of an object. From the name:value pairs of the object, the name can be treated as the property name and the value can be treated as the property value. Property is a technical term used to refer to Object name:value pairs. Example 

    let man = {
       name : "Rahul",
       age  :  20,
       gender : "Male",
       height : "6(ft)", 
   }

    In the above example

    Property Name Property Value
    name Rahul
    age 20
    gender Male
    height 6(ft)

    Accessing object properties

    We can access the specific property and value from an object, and there are two ways to do that. using . operator 

    object_name.property_name

    OR, using brackets 

    object_name["property_name"]

    Example 

    <script>

    let man = {
        name : "Rahul",
        age  :  20,
        gender : "Male",
        height : "6(ft)", }

         // using . dot operator
        console.log(man.name);  // "Rahul"
   
        // using square bracket
        console.log(man["name"]); //Rahul
</script>

    Object methods By far we have been only using the data object as a value for the property values, but we can also use the function expression as a property value. And if a property value is a function then it is called the object method. methods are nothing but the function defined inside an object. Syntax 

    <script>
    var man = {
        name : "Rahul",
        age  :  20,
        gender : "Male",
        height : "6(ft)",
        is_adult: function(){
                        if (this.age>=18)
                        { return true }
                        else{ return false } 
                        }
        }
</script>

    In the above example, is_adult property is the method of man object, becaue it is a function, which returns true if the man age is greater than or equal to 18, or else it returns false. In the function expression, you can also see that there I have used this.age instead of age . We will be discussing this keywords in further in the next section. Just to break the above code, we use this keyword to access the property value within the object.

    Accessing object methods

    To access the method we use the dot operator on the object and call the method like a normal function calling. Syntax 

    object_name.method_name()

    Example 

    <script>
    var man = {
        name : "Rahul",
        age  :  20,
        gender : "Male",
        height : "6(ft)",
        is_adult: function(){
                        if (this.age>=18)
                        { return true }
                        else{ return false } 
                        }
        }
        document.write(man.is_adult()); // true
</script>

    Output 

    true

    JavaScript this keyword

    this is the very important keyword of an object. It refers to the main object of the function or method. When we define a method inside an object, and we wish to access the object's other properties values inside the method, then we need to call those properties using this keyword. We can not directly access the defined values inside the function or with any other property. We have to use this keyword to access the defined property and its value else we receive an error. Example 

    <script>
   var man = {
       name : "Rahul",
       age  :  20,
       gender : "Male",
       height : "6(ft)",
       is_adult: function(){
                       if (this.age>=18)
                       { return true }
                       else{ return false } 
                       }
       }
       document.write(man.is_adult()); // true
</script>

    Behind the code In the above example inside he is_adult method we have used the this.age statement to access the age:20 property of the object man . the this keyword tell the function/method that we are trying to access the property of this object itself where the function is declared.

    Summary

    • An object is a data structure that can store multiple values.
    • The object store values in the form of name:value pairs.
    • The name can be a variable name and value can be a data value or function expression.
    • The name:value pairs of the object are known as object properties.
    • The function defined inside the object is known as object methods.
    • this keyword is used to access the defined property of the object within the object.
    Previous Tutorial Next Tutorial