---

Introduction

If you know how to use a template and object literal, your codes can be more readable. Especially, if you are working as a team, it is more important.

The syntax is very simple and easy to learn, so let's get started.

---

Template Literal

If you have programmed in python or java, you might have used formatting before.

In python, you would do:

print("Hello {0}".format("World")) # Hello World

In Java:

System.out.printf("Hello %s", "World"); // Hello World

It's the same in JavaScript.

In JavaScript:

let firstName = "John";
let lastName = "Doe";

console.log("Hi ${firstName} ${lastName}. Welcome!");
// Hi John Doe. Welcome!

You need a dollar sign($) followed by curly brackets {}.

Then, the values in the variable will be substituted in that area.

Rather than using plus(+) sign to concatenate strings, using a template literal make your code much easier to read.

---

Object Literal

If you were to assign a key-value pair in an Object, you might do this:

let person = {
    firstName: "John",
    lastName: "Doe",
    email: "john@gmail.com"
}
console.log(person.email) // john@gmail.com

If you use an object literal:

let str = "email";
let person = {
    firstName: "John",
    lastName: "Doe",
    [str]: "john@gmail.com"
}
console.log(person.email); // john@gmail.com"

You can write it in this way if you already have a variable that is the same as the key name that you will be using, you can use square brackets and put the variable name in there.