Object Literals tutorial in Advance JavaScript

October 15, 2024
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Object Literals tutorial Advance JavaScript</title>
    <link rel="stylesheet" href="">
</head>

<body>
    <script>
        //Simple Object Example
        let name = "Hello World";
        let course = "BTech";

        var obj = {
            name: name,
            course: course
        };
        console.log(obj);
        document.write(obj);

        //Example 1 : Object Literal
        let name2 = "Hello World";
        let course2 = "BTech";

        //If object's property name and the value of that property name both are same then we can declare as shown below :
        var obj = {
            name,
            course
        };
        console.log(obj);

        //Example 2 : Object Literal
        //If we want to take property name(In Object) same as above(above of Object) declared variable value(Here, "name")
        //then we can perform as shown below :
        let n = "name";
        var obj = {
            [n]: "Hello World",    //Here "name" will store in "[n]"
            course: "BTech"
        };
        console.log(obj);
        console.log(obj.name);  //Here we can direct access "name" property

        //Example 3 : Object Literal
        let n2 = "student";
        var obj = {
            [n2 + "name"]: "Hello World",  //Here Property name will be "studentname"
            course: "BTech"
        };
        console.log(obj);

        //Example 4 : Object Literal
        let n3 = "student";
        var obj = {
            [n3 + "name"]: "Hello World",
            course: "BTech",
            detail: function () {       //First way for declaring Function in Object
                return `${this.studentname} is student of ${this.course}`;
            },
            detailTwo() {               //Second way for declaring Function in Object
                return `${this.studentname} is second student of ${this.course}`;
            },
            //If we want to add space in Function name then we can do as shown below :
            "detail show"() {
                return `${this.studentname} is third student of ${this.course}`;
            }
        };
        console.log(obj);
        console.log(obj.detail());  //First way for Function Calling
        console.log(obj["detailTwo"]());    //Second way for Function Calling
        console.log(obj["detail show"]());

        // Example 5 : Object Literal
        //Returning Object by Calling Function as shown below :
        let name3 = "Hello World";
        let course3 = "BTech";

        function student(name3, course3) {
            return { name3, course3 };
        }
        console.log(student(name3, course3));

        //Example 6 : Object Literal
        let fname = "Hello";
        let lname = "World";
        let courseTwo = "BTech";

        function student(fname, lname, courseTwo) {
            let fullname = fname + " " + lname;
            return { fullname, courseTwo };
        }
        console.log(student(fname, lname, courseTwo));

        //Example 7 : Object Literal
        let fnameTwo = "Hello";
        let lnameTwo = "World";
        let courseThree = "BTech";

        function student(fnameTwo, lnameTwo, courseThree) {
            let fullname = fnameTwo + " " + lnameTwo;
            return { fullname, courseThree };
        }
        let s = student(fnameTwo, lnameTwo, courseThree);
        console.log(s.fullname);    //For getting Single Value of Object which is returning by Calling above Function
        console.log(s.courseThree); //Getting Single Value
    </script>
</body>

</html>