JavaScript ES6 – What are Template Literals

Since the beginning of time JavaScript developers are using single quotes and double quotes to create strings. However, ES6 specification came with template literals which is more elegant way of creating strings. In this post, we’re going to understand what template literals are? And how to use them within your applications to improve code readability?

Basic Usage:

We usually use single or double quotes to create strings.

const name1 = 'sam';
const name2 = "harry";

When it comes to template literals we need to use the back tick key located on the upper let corner of your keyboard. A basic example of template literals is as follows.

const name3 = `john`;

Line Breaks:

Before ES6, we had to use \n to maintain line breaks between our strings. The following code will log the string in 2 lines.

const myText = 'I am on line one. \n I am on line two';
console.log(myText);

We can do the same using template literals in much a simpler way.

const myText = `I am on line one.
I am on line two.`;
console.log(myText);

Note that template literals are space sensitive.

const myText = `I am on line one.
                I am on line two.`;
console.log(myText);

The above code will produce the following output in the console.

I am on line one.
                I am on line two.

Interpolation:

In order to interpolate variables in variables or expression in traditional strings, you would use following syntax:

const num = 2;
console.log('Square of ' + num + ' is ' + (num * num));

You can do the same thing in much simpler way using template literals.

const num = 2;
console.log(`Square of ${num} is ${num * num}`);

As you can see in the above code, you can simply add your variables or expressions to dollar sign followed by curly braces in order to interpolate them.

Recommended: How To Inject Document Object In Angular Service

I hope you found this post useful. In case if you’ve any query or feedback feel free to drop a comment.

JavaScript ES6 – var, let and const

ES6 comes with two new keywords let and const useful for the variable declaration. At a first glance, these keywords look similar to the good old var which is being used by the JavaScript developers since the beginning of time. But, If we already had var why two new keywords to do the same thing? What makes let and const different? These are the questions we’re going to answer in the following post.

1. var

var is used by JavaScript developers since dawn of JavaScript. However, there are several downsides of using var for declaring variables.

Scope

Scope simply means in which portion of the application the variable will be available. a variable declared with var only supports two types of scopes, the function level scope, and the global level scope. This means that when a variable is declared inside a function, it will be available only inside that function and if the variable declared outside a function, it will be available globally throughout the application. Let’s understand this in detail with help of an example.

var name1 = 'Sam';

function samplefunction () {
  var name2 = 'Mark';
}
console.log(name1);
console.log(name2);

As you can see, name1 is declared outside the function and hence can be accessed globally. But, name2 is declared inside the samplefunction and hence won’t be available outside of that function and the second console.log statement will result in a reference error.

Apart from that, var doesn’t have a block level scope. In the following code, name1 will be available outside the if statement due to lack of the block level statement.

if (true) {
  var name1 = 'harry'
}
console.log(name1);

Hoisting

Hoisting is behavior in JavaScript which moves the variable declaration at the top of the current scope and initializes the variables with undefined as value. Consider the following code.

console.log(name1)
var name1 = 'harry';

The above code is interpreted as,

var name1;
console.log(name1)
name1 = 'harry';

Re-declaration

JavaScript allows the developers to re-declare the variable even if it is already been declared. This might lead conflicts if you are trying to declare a variable which is already been declared and which you are not aware of.

var name1 = 'sam';
if (1 === 1) {
  var name1 = 'harry';
}
console.log(name1); // output: harry

As you can see in the above code, name1 is already been declared, however when we try to re-declare this variable inside the if statement it doesn’t prevent us from doing it. This behavior might lead to buggy code.

Now that you’re familiar with var, lets take a look at let and const.

2. let

let is the new preferred way of declaring variables since the inception of es6. The let keyword is designed in a way that it overcomes the downsides of var.

Scope

One of the major issue with var was the lack of block-level scope, which is introduced in JavaScript with let keyword. To understand this in detail consider the following code.

let age = 19;
if (age > 18) {
  let name1 = 'sam';
  console.log(name1); // outputs 'sam'
}
console.log(name1); // throws ReferenceError

As you can see we are declaring a variable name1 inside the if block and logging it twice, once inside the if block and second time after the if statement has ended. Since the variables declared with let are block-level variables the scope of variable name1 is limited to the if statement and hence first log statement with successfully log the value of name1 i.e. ‘sam’ however, the second log statement will throw a reference error.

Hoisting

Similar to var, The declaration of variables created using let are moved i.e hoisted to the top however, the variables are not initialized until the definition is executed. That means, if you’re trying to access a variable before it is being declared, you’ll end up with a reference error.

console.log(name1);
let name1 = 'sam' // throws a ReferenceError 

Re-declaration

Although, you can update the values of variables declared with let keyword, let doesn’t allow you to re-declare a variable within the same scope. Let’s see this in action.

let name1 = 'sam';
name1 = 'harry';

The above code will run successfully as we are just assigning a value to a variable.

let name1 = 'sam';
let name1 = 'harry';

The above code will throw an error as we are trying to declare a variable which already been declared.

3. const

As the name suggests const keyword is used to create constants i.e. the value of the variables cannot be changed after being assigned. There are lots of similarities between let and const in terms of scope and hoisting.

Scope

Similar to let, const also has the block-level scope and cannot be accessed from outside the block. Consider the following code.

if (1 == 1) {
  const name1 = 'sam';
}
console.log(name1); // ReferenceError

console.log will throw a reference error as name1 is declared inside the if block.

Hoisting

Similar to let, const declarations are moved i.e. hoisted to the top of the scope but not initialised until the definition is executed.

console.log(name2); // ReferenceError
const name2 = 'sam';

The above code will throw a reference error as we are trying to access a variable before it is being initialized.

Re-declaration

The const declarations can neither be re-declared nor re-assigned.

const name1 = 'sam';
name1 = 'harry';

The above code will throw an error as we are trying to re-assign value to a constant.

const name1 = 'sam';
const name1 = 'harry';

The above code will also throw an error as the constant name1 is already declared.

Summary:

  • Variables declared using the var keyword has global or function level scope while the variables declared using let and const has block level scope.
  • Var declarations are hoisted at the top and are initialized with undefined as value. let and const declarations are hoisted at the top however their values are not initialized.
  • Variables declared using var can be re-declared or its value can be re-assigned. Value of variables declared using let can be updated however these variables cannot be re-declared. Variables declared using const can neither be re-declared nor be re-assigned.

That’s it! I hope this post was useful. In case you’ve any query or feedback, feel free to drop a comment.

Must Read: Things you probably didn’t know you could do with Developer Console!