In the previous article, the block-scoped variables with let and constants with const were introduced. This article will discuss template literals and the enhancements upon the object literals/initializers. Let's start.

Template Literals

In ES5, we used to concatenate multiple variables/properties, and strings to form some useful string.

var person = {
        firstName: 'John',
        lastName: 'Doe'
    },
    details = 'Name: ' + person.firstName + ' ' + person.lastName;

console.log(details);

At this level, this is ok. However, when the number of variables/properties increase, this will turn into a real pain.

var person = {
        firstName: 'John',
        lastName: 'Doe',
        email: 'john.doe@example.com',
        phone: '0123456789'
    },
    details = 'Name: ' + person.firstName + ' ' + person.lastName 
    + ' | Phone: ' + person.phone 
    + ' | Email: ' + person.email;

console.log(details);

Breaking the details string into lines and concatenate the properties like that was a struggle. Template literals solved this problem by allowing us to write embedded expressions inside a backtick. The expressions should start with a $ and then be surrounded by curly braces {}. Let's modify the example from above.

var person = {
        firstName: 'John',
        lastName: 'Doe',
        email: 'john.doe@example.com',
        phone: '0123456789'
    },
    details = `Name: ${person.firstName} ${person.lastName} 
    Phone: ${person.phone} 
    Email: ${person.email}`;

console.log(details);

Not only the string could go on multiple lines, but it also respects the white space and display the string as is.

In addition to that, template literals can interpolate expressions.

var a = 1, b = 2;

console.log(`${a} + ${b} = ${a + b}`);

There is a more advanced form of template literals known as tagged template literals, and they allow parsing template literals with a function. There is a great example over MDN.

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return str0 + personExp + str1 + ageStr;

}

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);
// that Mike is a youngster

Template literals can do more such as parsing HTML tags. This is useful and could be used when writing reusable components. Some JavaScript frameworks and libraries such as Vue.js utilizes this.

The browser support for template literals could be shown here.

Object Enhancement

ES6 comes with some object literal initialization enhancement.

In ES5, when we needed to create an object literal and add some properties to it, we ended up doing something like the following.

var fname = 'John',
    lname = 'Doe',
    person = {};

function fullName(fname, lname) {
    return `${this.fname} ${this.lname}`;
}

// ...

person = {
    fname: fname,
    lname: lname,
    fullName: fullName(fname, lname)
};

console.log(person);
// {fname: "John", lname: "Doe", fullName: "John Doe"}

Now we would be able to quickly and pass only the reference, and the rest will be taken care of. Although, it is just syntactic sugar.
The property must have the same name as the variable. Let's see it in an example.

var fname = 'John',
    lname = 'Doe',
    person = {};

function fullName() {
    return `${this.fname} ${this.lname}`;
}

// ...

person = {
    fname,
    lname,
    fullName
};

console.log(person.fullName());
// John Doe

Notice how we were able to add a function as well.