JavaScript Enhance Object Literals (ES6)

JavaScript/ES6 has added a shorter syntax to enhance the object literals when defining properties, methods, and using computed property names. Thus, we are going to take a closer look at these topics, hope you enjoy it.

In this blog post, we are going to look at the enhanced object literals added to JavaScript/ES6. We are going to explore the following topics: 

• Defining properties
• Defining methods
• Computed Property Names

Defining Properties

 

Before diving into the ES6 syntax, let us look back on how it was made in the old days.

function exampleOfDefiningPropertiesOldWay(){

    var firstName = "Jin Vincent",
        lastName = "Necesario";

    var customer = {
        firstName: firstName,
        lastName: lastName
    }

   return customer;
}

console.log(exampleOfDefiningPropertiesOldWay());

Output

 

{ firstName: "Jin Vincent", lastName: "Necesario" }

 

As you can see in the example above it shows how it was done before ES6. Looks good to me and very declarative in a way. However, there's a better way and ES6 comes to the rescue. Let us look at an example using ES6. 

function exampleOfDefiningProperties(){

    let firstName = "Jin Vincent",
        lastName = "Necesario",
        age = 38;

    let customer =  {firstName, lastName, age};

    return customer;
}

console.log(exampleOfDefiningProperties());

Nice, this example looks much simpler compared to the old way of defining properties.

 

Defining Methods

 

Let us see the old way of defining a method within the object literal. 

var customers = {
    getCustomerInfo: function() { ... }
};

If you did like the first example, you'll probably like this feature too. Let us see it in action. 

function exampleOfDefiningPropertiesWithMethods(){

    let genderSelect = ['M', 'F'];

    let firstName = "Jin Vincent",
        lastName = "Necesario",
        gender = genderSelect[0],
        age = 38;

    let customer =  {   firstName,
                        lastName,
                        gender,
                        age,
                        getCustomerInfo(){
                            return this.lastName + " " + this.firstName;
                        }
                    };

    console.log(customer);
    console.log(customer.getCustomerInfo());
}

exampleOfDefiningPropertiesWithMethods();

Output

 

{ firstName: "Jin Vincent", lastName: "Necesario", gender: "M", age: 38, getCustomerInfo: getCustomerInfo() }

Necesario Jin Vincent

 

How's that?  It looks pretty straightforward to me and you'll probably be thinking I can no longer use the old way of doing it. But you can still if you want to.

 

Computed Property Names 

 

Before jumping to the examples, I would like to point out that the reason it is called computer property names is because it is evaluated during runtime.

 

Let us see the previous way of doing compute property names.

function exampleOfComputerPropertyNamesOldWay(){

    var customer = {};

    customer["first" + "Name"] = "Jin Vincent";

    console.log(customer["first" + "Name"]);

    return customer["firstName"];
}

console.log(exampleOfComputerPropertyNamesOldWay());

The example above will output two "Jin Vincent" without the quotes. 

 

As you can see, after creating the customer object, we have attached the properties to it. However; today ES6, we can add the properties while creating an object. Let us see this in action. 

function exampleOfComputerPropertyNamesES6(){
    var customer = {
        ["first" +"Name"]: "Jin Vincent",
        ["last" + "Name"]: "Necesario",
        ["current" + "Age"]: 38
    };

    return customer;
}

console.log(exampleOfComputerPropertyNamesES6());

Output

 

{ firstName: "Jin Vincent", lastName: "Necesario", currentAge: 38 }

 

Summary

 

In this blog post, we have discussed enhanced object literals added to JavaScript/ES6. I hope you have enjoyed this blog post, as much as I have enjoyed writing and coding the examples. Until next time, happy programming.