JavaScript ES6 for Beginners #7: Object literal upgrades & symbols

In this article we will look at the many upgrades brought by ES6 to the Object literal notation.

Deconstructing variables into keys and values

This is our initial situation:

const name = "Alberto";
const surname = "Montalesi";
const age = 25;
const nationality = "Italian";

Now if we wanted to create an object literal this is what we would usually do:

const person = {
  name: name,
  surname: surname,
  age: age,
  nationality: nationality,
}

In ES6 we can simplify like this:

const person = {
  name,
  surname,
  age,
  nationality,
}
console.log(person);
// {name: "Alberto", surname: "Montalesi", age: 25, nationality: "Italian"}

As our const is named the same way as the properties we are using we can reduce our typing by a lot.

 

Add functions to our Objects

Let’s looks at an example from ES5:

const person = {
  name: "Alberto",
  greet: function(){
    console.log("Hello");
  },
}

If we wanted to add a function to our Object we had to use the the function keyword. In ES6 it got easier, look here:

const person = {
  name: "Alberto",
  greet(){
    console.log("Hello");
  },
}

person.greet();
// Hello;

No more function, it’s shorter and it does the same.

Remember that arrow functions are anonymous, look at this example:

// arrow functions are anonymous, in this case you need to have a key
const person1 = {
  () => console.log("Hello"),
};

const person2 = {
  greet: () => console.log("Hello"),
}

 

Dynamically define properties of an Object

This is how we would dynamically define properties of an Object in ES5:

var name = "name";
// create empty object
var person = {}
// update the object
person[name] = "Alberto";
console.log(person.name);
// Alberto

First we created the Object and then we modified it.

In ES6 we can do both things at the same time, look here:

const name = "name";
const person = {
  [name]:"Alberto",
};
console.log(person.name);
// Alberto

 

Symbols

ES6 added a new type of primitive called Symbols. What are they? And what do they do?

Symbols are always unique and we can use them as identifiers for object properties.

Let’s create a Symbol together:

const me = Symbol("Alberto");
console.log(me);
// Symbol(Alberto)

We said that they are always unique, let’s try to create a new symbol with the same value and see what happens:

const me = Symbol("Alberto");
console.log(me);
// Symbol(Alberto)

const clone = Symbol("Alberto");
console.log(clone);
// Symbol(Alberto)

console.log(me == clone);
// false
console.log(me === clone);
// false

They both have the same value, but we will never have naming collisions with Symbols as they are always unique.

As we mentioned earlier we can use them to create as identifiers for object properties, so let’s see an example:

const office = {
  "Tom" : "CEO",
  "Mark": "CTO",
  "Mark": "CIO",
}

for (person in office){
  console.log(person);
}
// Tom
// Mark

Here we have our office object with 3 people, two of which share the same name. To avoid naming collisions we can use symbols.

const office = {
  [Symbol("Tom")] : "CEO",
  [Symbol("Mark")] : "CTO",
  [Symbol("Mark")] : "CIO",
}

for(person in office) {
  console.log(person);
}
// undefined

We got undefined when we tried to loop over the symbols because they are not enumerable so we can’t loop over them with a for in.

If we want to retrieve their object properties we can use Object.getOwnPropertySymbols().

const office = {
  [Symbol("Tom")] : "CEO",
  [Symbol("Mark")] : "CTO",
  [Symbol("Mark")] : "CIO",
};

const symbols = Object.getOwnPropertySymbols(office);
console.log(symbols);
// 0: Symbol(Tom)
​// 1: Symbol(Mark)
​// 2: Symbol(Mark)
​// length: 3

We retrieved the array but to be able to access the properties we to use map.

const symbols = Object.getOwnPropertySymbols(office);
const value = symbols.map(symbol => office[symbol]);
console.log(value);
// 0: "CEO"
​// 1: "CTO"
​// 2: "CIO"
​// length: 3

Now we finally got the array containing all the values of our symbols.

---

 

This was the seventh part of my ES6 for beginners course, check out the rest of them here.

You can also read this articles on medium, on my profile.

Thank you for reading.