JavaScript - Objects

Objects :

Anything in the real world having states & behaviours is called as objects. Otherwise In JavaScript, an object is a collection of related data and functions, known as properties and methods, respectively. Properties are “key: value” pairs that store data, while methods are functions associated with the object that can manipulate its properties
Syntax :

    new Object(value)
    Object(value)
    let object_name = {
        key_name : value,
        ...
    }

    Note : Object()  can be called with or without new. Both create a new object.

    Eg:
    < !DOCTYPE html>
    < html>
    < body>
    < h1>JavaScript Objects< /h1>
    < h2>Creating an Object< /h2>

    < p id="demo">< /p>

    < script>
    // Create an Object:
    const car = {type:"Kia", model:"Carens", color:"Imperial Blue"};

    // Display Data from the Object:
    document.getElementById("demo").innerHTML =
    "The car type is " + car.type;
    < /script>
    < /body>
    < /html>

Output :
js-obj-1

How to Define a JavaScript Object ?

Using an Object Literal

Using the new Keyword

Using an Object Constructor

Creating a JavaScript Object :
These examples create a JavaScript object with 4 properties: Eg:

    // Create an Object
    const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Spaces and line breaks are not important. An object initializer can span multiple lines:

    // Create an Object
    const person = {
    firstName: "Banu prakash",
    lastName: "Elapan",
    age: 25,
    eyeColor: "brown"
    };

This example creates an empty JavaScript object, and then adds 4 properties:

    // Create an Object
    const person = {};

    // Add Properties
    person.firstName = "Banu prakash";
    person.lastName = "Elapan";
    person.age = 25;
    person.eyeColor = "brown";

Using the new Keyword :
This example create a new JavaScript object using new Object(), and then adds 4 properties:

    // Create an Object
    const person = new Object();

    // Add Properties
    person.firstName = "Banu prakash";
    person.lastName = "Elapan";
    person.age = 25;
    person.eyeColor = "brown";


    Note:    The examples above do exactly the same. But, there is no need to use new Object(). 
    For readability, simplicity and execution speed, use the object literal method.

Accessing Object Properties :
You can access object properties in two ways:

    Syntax:
        objectName.propertyName
        objectName["propertyName"]

    Eg:
        person.lastName; //Elapan

        person["lastName"]; //Elapan

JavaScript Object Methods :
Methods are actions that can be performed on objects. Methods are function definitions stored as property values.

    const person = {
    firstName: "Banu prakash",
    lastName : "Elapan",
    id       : 5566,
    fullName : function() {
        return this.firstName + " " + this.lastName;
    }
    };

    Eg:
    < !DOCTYPE html>
    < html>
    < body>
    < h1>JavaScript Objects< /h1>
    < h2>Object Methods< /h2>
    < p>A method is a function definition stored as a property value.< /p>

    < p id="demo">< /p>

    < script>
    const person = {
        firstName: "Banu prakash",
        lastName: "Elapan",
        id: 5566,
        fullName: function() {
            return this.firstName + " " + this.lastName ;
            
        }
    };



        document.getElementById("demo").innerHTML = person.fullName();
        document.getElementById("demo").innerHTML = " Hi I'm : " + person.firstName  ;

        //Adding
        person.nationality = "Indian";
        document.getElementById("demo").innerHTML = person.firstName + " is " + person.nationality + ".";

        //deleting
        delete person.nationality;

        document.getElementById("demo").innerHTML =person.firstName + " is " + person.nationality + " is my nationality.";
    < /script>
    < /body>
    < /html>

Output :
obj-2

« Previous Next Topic » (JS - Functions)