JavaScript > Object Oriented Programming

Object in JavaScript

Object in JavaScript Object-Oriented Programming


Object

As we studied earlier object is nothing but an entity which has state, shape, behaviour, etc.

Creating simple Object

<script>
    var simpleObject = { myName: "SheoNarayan", favoriteSport: "Cricket" };
</script>

In the above code snippet we created an object by declaring name of the person and his favourite sport.

The names of the property (method) must and should be a string or a number. If it is a string no problem we can write directly like mentioned in the above code snippet, in case if it is a number it has to be accessed with the bracket notation. 

Object when the property name is number

<script>
    var rankList = { 50: "Students", 5: "Toppers" };
    console.log(rankList.50)  // This is an Error
        
    console.log(rankList["50"]) //This is how we need to access the value of the property
</script>

When the property name is number

In the above code snippet we have crated an object with the property name as a number, here console.log(rankList.50) will through an error, console.log(rankList["50"]) is the correct way of accessing the value of the property.

NOTE: It is better to avoid using numbers as property names.

Difference between Reference Data Type and Primitive Data Types

One of the main differences between refernce data type and primitive data types is, reference data type stored a value as a reference and it is not stored directly on the variable as a value. Where as primitive data types can stored directly on the variable as a value.

Primitive data type String is stored as a value

<script>
    var name = "Sheo";
    var anotherName = name;  // i.e anotherName = the value of name
    name = "Narayan";  // value of name changed

    console.log(anotherName); // Sheo
    console.log(name); //Narayan
</script>

Primitive data type string is stored as a value

In the above code snippet we have given value 'Sheo' to the name variable, value name (i.e Sheo) to the anotherName variable and given value 'Narayan' to the name. The above code snippet value changed nothing and returns the same value that name had. 

<script>
    var name = "Sheo";
    var anotherName = name; 
    name.person = "Narayan";  

    console.log(anotherName.person); // Narayan
    console.log(name.person); //Narayan
</script>

URL

In the above code snippet we copied the name object to anotherName, beacuse the value in name was stored as a reference and not an actual value, when we changed the name.person property to "Narayan", the anotherName reflected the change because it never storred the actual copy of its own value of the name properties.

Object data properties have Attributes

Each data property has three attributes, those are

  • Configurable Attribute: Specifies whether the property can be deleted or changed.
  • Enumerable Attribute: Specifies whether the property can be returned in a for/in loop.
  • Writable Attribute: Specifies whether the property can be changed.

Creating Objects

Creating objects in Object-Oriented programming can be done in two ways,

  1. Object Literals
  2. Object Constructor

1. Object Literals

The easist way to create objects is object literal. 

<script>
    var myDresses = {};

    var shoe = {
    color: "blue",
    type: "sports",
    size: 8,

    HowComfortableAmI: function(){        
    console.log("Very Very Comfortable");
    }

    }
</script>

Creating object by using object literals

In the above code snippet we have created an objects by using object literal.

2. Object Constructor

Creating objects with the Object constructer is the second most way. For initializing the new object we can use the constructor (function).

<script>
    var shoe = new Object();
    shoe.color = "blue";
    shoe.type = "sports";
    shoe.size = 8;

    shoe.howComfortAmI = function () {
        console.log("Very Very Comfortable");
    }
</script>

Creating object by using object constructor

In the above code snippet we created an objects by using object constructor.

NOTE: Objects may be other data type like Numbers, Arrays, etc.

 Views: 4782 | Post Order: 199



Write for us






Hosting Recommendations