[JavaScript] Template Literal and Object Literal for Better Programming.
Your codes are easier to read with object and template literals.
Table of contents
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.