Open In App

JavaScript(ES6) Object Literal Enhancement

Improve
Improve
Like Article
Like
Save
Share
Report

Object literal enhancement is used to group variables from the global scope and form them into javascript objects. It is the process of restructuring or putting back together.

Example 1:




<script>
// variable declaration
var name = "Duke";
var color = "Brown";
var age = 5;
  
// Using Object Literal Enhancement
// Combines all variables into a dog object
var dog = {name, color, age};
console.log(dog);
</script>


Output : The name, color and age are now keys of dog object.

{
    name:"Duke",
    color:"Brown",
    age:5
}

Example 2: We can also create object methods with object literal enhancement.




<script>
// variable declaration
var name = "Tike";
var color = "Black";
var age = 7;
  
// function declaration
var bark = function(){
    console.log("Woof Woof!!");
}
  
// Using Object Literal Enhancement
// combines all variables into an anotherDog object
var anotherDog = {name, color, age, bark};
anotherDog.bark();
</script>


Output:

Woof Woof!!

Example 3: We can also use “this” keyword to access the object keys.




<script>
    // Variable declaration
    var name = "Lilly";
    var color = "White";
    var age = 3;
  
    // function declaration 
    // using "this" keyword to access the object keys.
    var barkWithName = function(){
        console.log('Woof Woof!!, I am '
        +this.name+' and I am a '
        +this.age+' years old, '
        +this.color+ ' coloured dog.Woof Woof!!');
    }
  
    // Using Object Literal Enhancement
    // combines all variables into a yetAnotherDog object
    var yetAnotherDog = {name, color, age, barkWithName};
    yetAnotherDog.barkWithName();
</script>                    


Output :

Woof Woof!!, I am lilly and I am a 3 years old,
white coloured dog.Woof Woof!!

Example 4: When defining object methods, it is no longer necessary to use the function keyword. Object literal enhancement allows us to pull global variables into objects and reduces typing by making the function keyword unnecessary.




<script>
// Old syntax
var driver1 = {
    name: "John",
    speed: 50,
    car:"Ferrari",
    speedUp: function(speedup){
         this.speed = this.speed + speedup;
         console.log("new speed = "+ this.speed)
    }
}
  
// New syntax without function keyword
const driver2 = {
    name: "Jane",
    speed: 60,
    car:"McLaren",
    speedUp(speedup){
         this.speed = this.speed + speedup;
         console.log("new speed = "+ this.speed)
    }
}
</script>




Last Updated : 03 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads