DEV Community

Mitesh Kamat
Mitesh Kamat

Posted on

Computed property names => ES6 !!!!

Introduction

Suppose we have a task to create an object with dynamic key value pairs. We would start with writing some logic to achieve it. But if we are aware of a feature name computed property of ES6, our life is sorted :P

Let's start with this....

What is an object?

Let us consider a real life scenario.
A car is an object. A car has properties like weight,color, height, width, etc.

Objects are like variables which can contain many values.
Like:

var obj = {};
OR
var car = {type:"Fiat", model:"500", color:"white"};
Enter fullscreen mode Exit fullscreen mode

The values are written as name:value pairs (name and value separated by a colon).

Accessing Object Properties

You can access object properties in two ways:
objectName.propertyName
OR
objectName["propertyName"]

Now, we can get to dynamic properties

var key = 'DYNAMIC_KEY',
    obj = {
        [key]: 'ES6!'
    };

console.log(obj);
// > { 'DYNAMIC_KEY': 'ES6!' }
Enter fullscreen mode Exit fullscreen mode

Suppose we have a task of creating an object from an array. We will have to create key value pairs.

Consider an array like:

const personsList = ["Alan", "Smith", "Kelly", "Jason", "Nicole"];
Enter fullscreen mode Exit fullscreen mode

Now to create an object out of this array with key value pairs, we can use computed property feature available in ES6 as below:

let personsObject = {};  //create an object

//Iterate over the personsList array
personsList.forEach((currentItem, index) => {
    personsObject[index] = currentItem;
});
console.log(personsObject);

// > {0: "Alan", 1: "Smith", 2: "Kelly", 3: "Jason", 4: "Nicole"}
Enter fullscreen mode Exit fullscreen mode

As you can see now we have an object with dynamic key-value pairs. You can give custom key name instead of index.

For example:

personsList.forEach((currentItem, index) => {
    // personsObject[index] = currentItem;
    personsObject["name"] = currentItem;
});
console.log(personsObject);

// > {name: "Alan", name: "Smith", name: "Kelly", name: "Jason", name: "Nicole"}
Enter fullscreen mode Exit fullscreen mode

Hope this helps you in some way.
Cheers !!!

Discussion (3)

Collapse
lukens profile image
lukens

Hi, sorry, but as far as I can see, your two examples have nothing at all to do with computed property names. Computed property names are about using dynamic names for properties in the object initialiser, not adding them afterwards, as you have always been able to do.

In your two examples your object initialiser specifies no fields at all, and you then add the fields afterwards in the forEach.

Collapse
seidkhan93 profile image
seidkhan93

You are wrong in last example! Javascript objects cannot have same property names. In your last example the result will be {name: "Nicole"}

Collapse
thesalafee profile image
Naasir Bush

Great tutorial, however @seidkhan93 is correct. That last example is mistaken bro. The output is exactly as he's described in his comment. Overall great job.