JavaScript Literals

JavaScript literals are fixed values that you literally provide in your script. These values can be numbers, strings, objects, arrays, booleans, null, or even regular expressions. This guide will cover each type of literal in detail, providing examples for better understanding.

1. Numeric Literals

Numeric literals in JavaScript represent numbers and can be written in various formats including decimal, binary, octal, and hexadecimal.

Decimal (Base 10):

let decimal = 42;

Binary (Base 2):

Binary literals are prefixed with 0b or 0B.

let binary = 0b101010; // 42 in decimal

Octal (Base 8):

Octal literals are prefixed with 0o or 0O.

let octal = 0o52; // 42 in decimal

Hexadecimal (Base 16):

Hexadecimal literals are prefixed with 0x or 0X.

let hex = 0x2A; // 42 in decimal

2. String Literals

String literals are used to represent text and are enclosed in single quotes ('), double quotes ("), or backticks (`).

Single Quotes:

let singleQuoteString = 'Hello, World!';

Double Quotes:

let doubleQuoteString = "Hello, World!";

Template Literals:

Template literals allow for embedded expressions and multi-line strings

let name = "Alice";
let templateString = `Hello, ${name}!`;

3. Boolean Literals

Boolean literals represent one of two values: true or false.

True:

let isTrue = true;

False:

let isFalse = false;

4. Null Literal

The null literal represents the intentional absence of any object value.

let emptyValue = null;

5. Undefined Literal

The undefined literal is a property of the global object that indicates a variable has not been assigned a value.

let notAssigned;
console.log(notAssigned); // undefined

6. Object Literals

Object literals are used to create plain objects using a simple and concise syntax.

let person = {
firstName: 'John',
lastName: 'Doe',
age: 30
};

You can also include methods in object literals:

let personWithMethod = {
firstName: 'Jane',
lastName: 'Doe',
greet: function() {
return `Hello, ${this.firstName} ${this.lastName}!`;
}
};

7. Array Literals

Array literals are used to create arrays.

let fruits = ['Apple', 'Banana', 'Cherry'];

Arrays can contain mixed types of values:

let mixedArray = [42, 'Hello', true, { key: 'value' }];

8. Regular Expression Literals

Regular expression literals provide a concise way to define regular expressions for pattern matching within strings.

let regex = /ab+c/;

You can also include flags:

let caseInsensitiveRegex = /ab+c/i;

9. Function Literals

Function literals allow you to define functions.

let add = function(a, b) {
return a + b;
};

ES6 introduced arrow functions which provide a more concise syntax for function literals:

let addArrow = (a, b) => a + b;

10. BigInt Literals

BigInt literals are used to represent whole numbers larger than 2^53 - 1 (the largest number JavaScript can reliably represent with the Number primitive).

let bigInt = 1234567890123456789012345678901234567890n;

11. Symbol Literals

Symbols are unique and immutable identifiers.

let sym = Symbol('description');

Examples in Context

Let's combine different types of literals in a practical example.

// Numeric Literals
let age = 25;
let binaryAge = 0b11001;
let hexAge = 0x19;
let octalAge = 0o31;

// String Literals
let firstName = "John";
let lastName = 'Doe';
let fullName = `${firstName} ${lastName}`;

// Boolean Literals
let isAdult = true;
let isStudent = false;

// Null and Undefined Literals
let job = null;
let car; // undefined

// Object Literal
let person = {
firstName: "Jane",
lastName: "Doe",
age: 28,
isEmployed: true,
greet: function() {
return `Hi, I'm ${this.firstName} ${this.lastName}.`;
}
};

// Array Literal
let hobbies = ['Reading', 'Cycling', 'Hiking'];

// Regular Expression Literal
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// Function Literals
let greet = function(name) {
return `Hello, ${name}!`;
};

let greetArrow = name => `Hello, ${name}!`;

// BigInt Literal
let bigNumber = 1234567890123456789012345678901234567890n;

// Symbol Literal
let uniqueID = Symbol('id');

// Logging examples
console.log(age, binaryAge, hexAge, octalAge); // 25 25 25 25
console.log(firstName, lastName, fullName); // John Doe John Doe
console.log(isAdult, isStudent); // true false
console.log(job); // null
console.log(car); // undefined
console.log(person.greet()); // Hi, I'm Jane Doe.
console.log(hobbies); // ['Reading', 'Cycling', 'Hiking']
console.log(emailPattern.test('test@example.com')); // true
console.log(greet('Alice')); // Hello, Alice!
console.log(greetArrow('Bob')); // Hello, Bob!
console.log(bigNumber); // 1234567890123456789012345678901234567890n
console.log(uniqueID); // Symbol(id)

JavaScript literals are a fundamental part of the language, allowing you to represent data in various forms directly in your code. Understanding and utilizing these literals effectively can greatly enhance your ability to write concise and readable JavaScript programs. From simple numeric and string literals to complex object and function literals, each type serves a unique purpose in making JavaScript a powerful and flexible language.

Practice Excercise Practice now

COMPANY

Products

OTHERS

Partner