DEV Community

Sarah Chima
Sarah Chima

Posted on • Updated on

Enhanced Object Literals in ES6

Object literals make it easy to quickly create objects with properties inside the curly braces. To create an object, we simply notate a list of key: value pairs delimited by comma. ES6 makes the declaring of object literals concise and thus easier. Three major ways it does this are :

  1. It provides a shorthand syntax for initializing properties from variables.
  2. It provides a shorthand syntax for defining function methods.
  3. It enables the ability to have computed property names in an object literal definition.

Let's examine each of them.

Shorthand for Initializing Properties
We will use an example to explain this. Let's create a getLaptop function. We are using a function here to make it easier for to pass variables. We are basically still creating an object. Prior to ES6, if we want to initialize a property in an object using object literals, we will do the following:

    //ES5
    function getLaptop(make, model, year) {
        return {
            make: make,
            model: model,
            year: year
        }
    }

    getLaptop("Apple", "MacBook", "2015");// {make: "Apple", model: "MacBook", year: "2015"}
Enter fullscreen mode Exit fullscreen mode

So in the above function, the object that is being returned is created using object literals. The properties of this object are created by assigning the value of the parameters passed to their corresponding keys. Did you notice the repetition there? I did too. ES6 removes all of that repetition. Here's how we will write our getLaptop function;

    function getLaptop(make, model, year) {
        return {
            make,
            model,
            year
        }
    }

    getLaptop("Apple", "MacBook", "2015"); // {make: "Apple", model: "MacBook", year: "2015"}
Enter fullscreen mode Exit fullscreen mode

Much more easier to write and read. What happens here is that it checks if the property key has a corresponding variable name and assigns the value of that variable to the property. Note that if no variable has the same name as the property key defined, we'll get an error. Let's move to the next enhancement then.

Shorthand for writing Methods
Prior to ES6, the syntax for writing methods in objects is this:

    //ES5
    function getLaptop(make, model, year) {
        return {
           sayModel : function() {
                return model;
            }
        }
    }

    getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"
Enter fullscreen mode Exit fullscreen mode

With ES6, we don't have to write much code just to get a method to work.

    //ES5
    function getLaptop(make, model, year) {
        return{
            sayModel() {
                return model;
            }
        }
    }

    getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"
Enter fullscreen mode Exit fullscreen mode

Did you notice the difference? The : and function are no longer necessary to define a method. So ES6 makes the syntax for creating methods concise.

Computed Properties and Object Literals
If you read my previous article on Object Destructuring, you might have come across this. Well, as you might already know, there are two ways to specify a key when accessing an object property: the dot notation and bracket notation. The bracket notation allows us to access a property using expressions. Computed property names allow us to write an expression wrapped in square brackets instead of the regular property name. Whatever the expression evaluates to will become the property name. This means that we can do this:

    var name = "make";
    const laptop = {
        [name]: "Apple"
    }

    console.log(laptop.make);//"Apple"
Enter fullscreen mode Exit fullscreen mode

The value of name was computed to make and this was used as the name of the property. This is why we can access the property using laptop.make;

Similarly, this will work.

    var name = "make";
    var i = 0;
    const laptop = {
        [name + ++i]: "Apple",
        [name + ++i]: "Dell",
        [name + ++i]: "HP"
    }

    console.log(laptop.make1);//"Apple"
    console.log(laptop.make2);//"Dell"
    console.log(laptop.make3);//"HP"
Enter fullscreen mode Exit fullscreen mode

In this case, the value of both name and i are computed and concatenated to get the name of the property. I think this is pretty cool, don't you?

That's all for enhanced object literals.

Got any question or addition? Leave a comment.

Thanks for reading. :)

Discussion (11)

Collapse
giliyoffe profile image
giliyoffe • Edited on

Thank you Sarah, I Liked it

typo:
think u meant to write es6 and not 5 in:

"
...
//ES5
function getLaptop(make, model, year) {
return{
sayModel() {
return model;
....
"

Collapse
sarah_chima profile image
Sarah Chima Author

Thank you for the correction. 😊

Collapse
niralekshitij profile image
kshitij nirale • Edited on

hey Sarah,
don't you think it's time you should update this informative article with functioning of 'this'
keyword inside new es6 method declaration inside objects.

Collapse
captainwiseman profile image
CaptainWiseman

Thanks! It was a great read!

Collapse
aydinakcasuatquickenloans profile image
aydinakcasuAtQuickenLoans

You could throw in a count, and the name, in case you want to iterate by index.

{
[name + ++i]: "Apple",
[name + ++i]: "Dell",
[name + ++i]: "HP",
count: i,
name
}

Collapse
jejuro profile image
Jupeter

Thank you, Sarah

Good reading

Collapse
rifaimartin profile image
Rifai Martin

thanks sarah

Collapse
sayopaul profile image
Sayo Paul

awesome post. Really really explanatory . Good examples that further explain the concepts discussed . Excellent !

Collapse
nahid570 profile image
Nahid Faraji

Thank you so much

Collapse
ibadeecodes profile image
Ibad Ullah Shaikh

Thanks Sarah for sharing such a good stuff..

Collapse
malib profile image
Ali

I liked it but i did not get the advantage of computed properties. It looks weird to me :(