Literals in JavaScript

In the Comments in JavaScript blog, we have learned about what are Comments, and ways to add comments. Comments in JavaScript are like helpful notes for developers, explaining or annotating code without affecting how the program runs. They enhance human understanding and serve as documentation. In this blog, we will learn about Literals used in JavaScript.

What are Literals?

In JavaScript, literals are fixed values that stay the same and don't change. No special keyword is needed to write a literal. They're essential for setting initial values in programming and can be strings, numbers, booleans, floating-point, or even objects. For instance, if we write the number 9546, it's a numeric literal, and if we write "Hello," it becomes a string literal.

Types of Literals

String Literal

A string literal is a sequence of characters surrounded by single(‘’), double (""), or backticks (``) quotes. Let’s take a look at the example

let singleQuoted = 'Welcome to JavaScript';
let doubleQuoted = "Welcome to JavaScript";
let backticks = `Welcome to JavaScript`;
console.log("Single Quote:", singleQuoted);
console.log("Double Quote:", doubleQuoted);
console.log("Backticks:", backticks);

Output:

Single Quote: Welcome to JavaScript
Double Quote: Welcome to JavaScript
Backticks: Welcome to JavaScript

Number Literals

A literal number represents a numerical value. It can be an integer or a floating-point number. Let’s take a look at the example

let intLiteral = 99;
let floatLiteral = 9.34;
console.log("Integer Literal:", intLiteral);
console.log("Float Literal:", floatLiteral);

Output:

Integer Literal: 99
Float Literal: 9.34

Boolean Literal

A boolean literal has only two values: true or false. Let’s take a look at the example

let isTrue = true;
let isFalse = false;
console.log("Value:", true);
console.log("Value:", false);

Output:

Value: true
Value: false

Array Literal

An array literal is used to build an array of values. It is surrounded by square brackets “[ ]” and comprises a list of values separated by commas “[ , , ]”. Let's take a look at the example

let shapes = ['Circle', 'Rectangle', 'Square', 'Triangle'];
console.log("Shapes:", shapes);

Output:

Shapes: [ 'Circle', 'Rectangle', 'Square', 'Triangle' ]

Object Literal

An object literal is used to generate a key-value pair object. It is surrounded by curly brackets "" and contains a comma-separated list of key-value pairs. Let's take a look at the example

let employee = {
  empId:101,
  empName: 'Smith',
};
console.log("Employee Details:", employee);

Output:

Employee Details: { empId: 101, empName: 'Smith' }

RegExp Literal

A regular expression literal is used to create a regular expression pattern. It is enclosed in forward slashes (/.../). Let’s take a look at the example

let regexPattern = /[b-y]+/;
console.log("Regular Expression:", regexPattern);

Output:

Regular Expression: /[b-y]+/

Null Literal

The null literal represents the intentional absence of any object value. Let’s take a look at the example

let value = null;
if(value == null){
  console.log("The value is null");
}
else{
  console.log("The value is not null")
}

Output:

The value is null

Undefined Literal

The undefined literal represents an uninitialized or non-existent variable or property. It is typically not explicitly assigned. Let’s take a look at the example

let value;
if (typeof value === 'undefined') {
  console.log("The value is undefined.");
} else {
  console.log("The value is not undefined.");
}

Output:

The value is undefined.

Symbol Literal

A symbol literal represents a unique and immutable value. Symbols are often used as object property keys. Let’s take a look at the example

// Create a symbol using the Symbol() constructor
const namedSymbol1 = Symbol();

// Create a symbol with a description (optional, for debugging purposes)
const namedSymbol2 = Symbol('SymbolDescription');

// Symbols with the same description are not equal
const anotherNamedSymbol = Symbol('SymbolDescription');

console.log(namedSymbol1);
console.log(namedSymbol2);
console.log(anotherNamedSymbol);
console.log(namedSymbol2 === anotherNamedSymbol);

// Symbols can be used as object property keys
const symboleObj = {
  [namedSymbol1]: 'This is a symbol property',
  [namedSymbol2]: 'This is another symbol property'
};

console.log(symboleObj[namedSymbol1]);
console.log(symboleObj[namedSymbol2]);

// Symbols are unique, even if their descriptions are the same
console.log(Object.getOwnPropertySymbols(symboleObj));

Output:

Symbol()
Symbol(SymbolDescription)
Symbol(SymbolDescription)
false
This is a symbol property
This is another symbol property
[ Symbol(), Symbol(SymbolDescription) ]

In JavaScript, literals are like straightforward shortcuts for expressing values directly in code, such as numbers or text. They serve as constants that stay fixed throughout the program.