Literals in JavaScript

Literals are fundamental to variable declaration in JavaScript. When declaring a variable, it's crucial to use the appropriate literal to store values effectively. In JavaScript, literals play a pivotal role in determining the data type of a variable. Given the language's support for objects and functions, it's imperative to be mindful of initializing variables with the correct literals to avoid unexpected outcomes. In this article, we'll explore some of the key JavaScript literals that developers frequently encounter in their development endeavors.

Types of literals in JavaScript

JavaScript literals serve as syntactic representations for various types of data like objects, string, boolean, array, and more.

But when we talk about the most important JavaScript literals we have the following list:

• String literals

• Template literals

• Object literals

• Array literals

There is nothing much to discuss about these, we just need to understand the syntax/expressions followed while using these in our code. Let's start understanding them one by one.

String Literals

String literals in JavaScript are sequences of characters enclosed within single ('') or double ("") quotation marks. These literals allow us to represent textual data within our code. For example:

index.js

1

2let myName = "Mayank Pandey!"; 3let message = 'JavaScript is a scripting language.';

### **Concatenation of strings**

JavaScript also supports a feature that string literals can be concatenated using the '+' operator:

index.js

```cpp
1

2let firstName = "Mayank"; 3let lastName = "Pandey"; 4let fullName = firstName + " " + lastName; 5 6console.log(fullName); 7 8//Output : Mayank Pandey

## **Template Literals**

Template literals are a feature introduced in ECMAScript 2015 (ES6) that provides us more flexible and readable string formatting in JavaScript. Most of the times when we need to use some variable or an expression in a string there we use template literals. They are enclosed within backticks (\`\`) instead of the single('') or double("") quotation marks. Template literals support multi-line strings and allow for easy interpolation of variables and expressions.

### **Example of template literals**

Let's understand using the following examples:

**Example 1**

index.js

```cpp
1

2let number1 = 10; 3let number2 = 20; 4 5let sum = number1 + number2; 6 7console.log(The sum of ${number1} + ${number2} is equal to ${sum}); 8 9//Output : The sum of 10 + 20 is equal to 30

**Example 2** : Printing multi-line strings

index.js

```cpp
1

2let string1 = "Mai pal do pal ka shayar hoon"; 3 4let string2 = "Pal do pal meri kahani hai"; 5 6let multiLineString = 7 ${string1}, 8 ${string2} 9 10console.log(multiLineString); 11 12/ 13Output : 14 Mai pal do pal ka shayar hoon, 15 Pal do pal meri kahani hai 16/

## **Object Literals**

One of the most important features of JavaScript is that we can define objects. Objects play a crucial role in our coding journey in JavaScript, so before we start working with objects, it is necessary to understand how we define them in JavaScript.

Object literals in JavaScript are a way to define and create objects directly within the code, without the need for a constructor function.

They consist of key-value pairs enclosed within curly braces {}.

### **Example of object literals**

**Example** : Let's define a person object with its properties as 'name', 'age' and 'isRunning', each with their respective values. This concise syntax makes it easy to define and work with objects in JavaScript.

index.js

```cpp
1

2let person = { 3 name: 'Mayank', 4 age: 21, 5 isRunning : true 6};

It is worth noting that while dealing with objects in JavaScript, we don't use a semicolon ';' inside the object literal '{}'. Instead, we use a comma ',' after every key-value pair.

## **Array Literals**

Array literals in JavaScript provide a convenient way to create arrays with initial values. They are defined using square brackets \[\] and can contain any number of elements separated by commas.

### **Example of Array literals**

**Example 1**

index.js

```cpp
1

2let colors = ['orange', 'red', 'aqua', 'green', 'blue'];

In the above example, colors is an array created using an array literal. It contains five string elements: 'orange', 'red', 'aqua', 'green', and 'blue'. Array literals are flexible and can hold elements of different types, including numbers, strings, objects, and even other arrays.

**Example 2** : Array literals in JavaScript are flexible and can hold elements of different types, including numbers, strings, objects, and even other arrays.

index.js

```cpp
1

2let container = [2, "laptop", true, "papers", "watch"]; ```

Conclusion

That's it for this article. There are many other literals, such as integer literals and boolean literals, which are very basic and need not be given much thought. The covered literals in this article are the most important ones where we generally make mistakes. So, that's it for this time. Until the next one, hope you have found it beneficial.