W3Seminars

JavaScript strings are sequences of characters. They are primitive data types, which means that they are immutable and cannot be changed. However, JavaScript provides a number of string methods that allow you to manipulate strings in a variety of ways.

Searching for substrings

One of the most common tasks that you need to perform with strings is to search for substrings. This can be done using the following methods:

Search(): This method searches for a substring in a string using a regular expression. It returns the index of the first occurrence of the substring, or -1 if the substring is not found.

IndexOf(): This method searches for a substring in a string using a literal string. It returns the index of the first occurrence of the substring, or -1 if the substring is not found.

LastIndexOf(): This method searches for a substring in a string using a literal string. It returns the index of the last occurrence of the substring, or -1 if the substring is not found.

Includes(): This method checks if a string contains a substring. It returns true if the string contains the substring, or false if it does not.

Extracting substrings

Once you have found a substring in a string, you can extract it using the following methods:

Slice(): This method extracts a substring from a string, starting at a specified index and ending at another specified index. The extracted substring is returned as a new string.

Substring(): This method is similar to slice(), but it does not allow the end index to be greater than the length of the string.

Substr(): This method extracts a substring from a string, starting at a specified index and ending at a specified length. The extracted substring is returned as a new string.

Manipulating strings

In addition to searching for and extracting substrings, you can also use JavaScript string methods to manipulate strings in other ways. For example, you can use the following methods to:

Concat(): This method concatenates two or more strings together.

ToUpperCase(): This method converts a string to all uppercase letters.

ToLowerCase(): This method converts a string to all lowercase letters.

Trim(): This method removes whitespace characters from the beginning and end of a string.

Split(): This method splits a string into an array of strings, using a specified delimiter.

Replace(): This method replaces all occurrences of a substring in a string with another substring.

Using string methods

Here are some examples of how to use JavaScript string methods:

// Search for a substring in a string
const str = "Hello, world!";
const index = str.indexOf("world");
console.log(index); // 6
// Extract a substring from a string
const substring = str.slice(6);
console.log(substring); // “world!”
// Concatenate two strings together
const str1 = "Hello, ";
const str2 = "world!";
const newStr = str1.concat(str2);
console.log(newStr); // “Hello, world!”
// Convert a string to all uppercase letters
const upperStr = str.toUpperCase();
console.log(upperStr); // “HELLO, WORLD!”
// Remove whitespace characters from the beginning and end of a string
const trimmedStr = str.trim();
console.log(trimmedStr); // “Hello, world!”
// Split a string into an array of strings, using a specified delimiter
const arr = str.split(" ");
console.log(arr); // [“Hello”, “world!”]
// Replace all occurrences of a substring in a string with another substring
const replacedStr = str.replace("world", "universe");
console.log(replacedStr); // “Hello, universe!”

Conclusion

JavaScript string methods provide a powerful way to manipulate strings. By understanding and using these methods, you can write more efficient and effective JavaScript code.

What are JavaScript Strings?

A JavaScript string is a sequence of characters that represents text. It can be any combination of letters, numbers, symbols, and spaces. Strings are created by wrapping the text inside single quotes ( ' ), double quotes ( " ), or backticks ( “ ` ).

Examples of JavaScript Strings:

// Single quotes
const name = 'Bard';

// Double quotes
const greeting = "Hello, world!";

// Backticks
const templateLiteral = `This is a template literal, which allows us to write multi-line strings and embed variables and expressions.`;

Template literals are a special type of string that uses backticks instead of single or double quotes. They have a number of advantages over traditional strings, including:

Multi-line strings can be written without having to use the + operator or the \n escape character.

Variables and expressions can be embedded in strings using ${} interpolation.

Strings can be formatted using template tags.

Accessing String Characters

To access individual characters in a string, you can use the square bracket operator ([]). The index of the first character in a string is 0, and the index of the last character is one less than the length of the string.

const name = 'Bard';

// Access the first character
const firstCharacter = name[0]; // ‘B’

// Access the last character
const lastCharacter = name[name.length - 1]; // ‘d’

String Methods

JavaScript provides a number of methods for manipulating strings. Some of the most common methods include:

charAt() – Returns the character at a specified index in the string.

charCodeAt() – Returns the Unicode code point of the character at a specified index in the string.

concat() – Concatenates two or more strings together.

indexOf() – Returns the index of the first occurrence of a substring in the string.

lastIndexOf() – Returns the index of the last occurrence of a substring in the string.

slice() – Extracts a substring from the string.

split() – Splits the string into an array of strings, based on a specified delimiter.

toLowerCase() – Converts the string to lowercase.

toUpperCase() – Converts the string to uppercase.

Examples of Using String Methods:

const name = 'Bard';
// Get the length of the string
const nameLength = name.length; // 4
// Check if the string contains a substring
const containsBard = name.includes('Bard'); // true
// Convert the string to lowercase
const lowercaseName = name.toLowerCase(); // ‘bard’
// Split the string into an array of strings
const nameArray = name.split(''); // [‘B’, ‘a’, ‘r’, ‘d’]

Conclusion

JavaScript strings are a powerful tool for working with text data. By understanding the different ways to create and manipulate strings, you can write more efficient and expressive code.

What are JavaScript Events?

JavaScript events are things that happen on a web page, such as a user clicking a button, pressing a key, or moving the mouse. JavaScript code can be used to respond to these events, allowing you to create dynamic and interactive web pages.

Types of JavaScript Events

There are many different types of JavaScript events, including:

User interface events: These events are triggered by user interactions with HTML elements, such as clicking, hovering, and focusing.

Form events: These events are triggered by user interactions with form elements, such as submitting a form or changing the value of a field.

Keyboard events: These events are triggered by user interactions with the keyboard, such as pressing a key or releasing a key.

Mouse events: These events are triggered by user interactions with the mouse, such as clicking, moving, and hovering.

Window events: These events are triggered by actions on the browser window, such as loading, resizing, and closing.

Registering Event Handlers

To respond to a JavaScript event, you need to register an event handler. An event handler is a function that is executed when the event occurs.

There are two ways to register an event handler:

1. Using HTML attributes: You can use HTML attributes to specify JavaScript code that will be executed when the event occurs. For example, the following HTML code registers an event handler for the onclick event:

HTML

Click me!

2. Using the addEventListener() method: You can also use the addEventListener() method to register an event handler. The addEventListener() method takes three arguments:
   • The event type: This is the type of event that you want to listen for.
   • The event handler function: This is the function that will be executed when the event occurs.
   • A boolean value indicating whether the event handler should be executed during the event capture phase or the event bubble phase.

The following JavaScript code registers an event handler for the click event on the button element with the ID my-button:

const button = document.getElementById('my-button');
button.addEventListener('click', function() {
alert('Hello, world!');
});


Preventing Default Event Behavior

When an event occurs, the browser may perform some default behavior. For example, when a user clicks a link, the browser will navigate to the linked page.

You can use the preventDefault() method to prevent the browser from performing the default behavior for an event. This can be useful if you want to implement your own custom behavior.

The following JavaScript code prevents the browser from navigating to the linked page when the user clicks the link:

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
event.preventDefault();
// Implement your own custom behavior here.
});

Stopping Event Propagation

When an event occurs, it bubbles up the DOM tree, triggering event handlers on each element in the tree until it reaches the root element.

You can use the stopPropagation() method to stop the event from bubbling up the DOM tree. This can be useful if you want to prevent other event handlers from being executed.

The following JavaScript code stops the event from bubbling up the DOM tree when the user clicks the button:

const button = document.getElementById('my-button');
button.addEventListener('click', function(event) {
event.stopPropagation();
// Implement your own custom behavior here.
});

Conclusion

JavaScript events are a powerful way to create dynamic and interactive web pages. By understanding how to register event handlers and prevent default event behavior, you can create web pages that respond to user input and other events in a variety of ways.

Here are some examples of how JavaScript events can be used:

Validate form data before it is submitted.

Display a message when the user hovers over a button.

Play a sound when the user clicks an image.

Change the color of a text element when the user scrolls the page.

Navigate to a different page when the user presses a key.

Close a window when the user clicks a button.

JavaScript events are an essential part of web development, and by learning how to use them effectively, you can create more interactive and engaging web pages.

JavaScript objects are a fundamental data type in the language. They allow you to store collections of related data in a single place, making them easy to manage and use.

Creating JavaScript Objects

There are two main ways to create JavaScript objects:

Object literals: Object literals are the simplest way to create objects. They are created using curly braces ({}) and contain a list of key-value pairs, where the key is the name of the property and the value is the value of the property.

const person = {
name: "John Doe",
age: 30,
occupation: "Software Engineer",
};

Constructors: Constructors are functions that are used to create new objects. They are called using the new keyword.

function Person(name, age, occupation) {
this.name = name;
this.age = age;
this.occupation = occupation;
}
const person = new Person("John Doe", 30, "Software Engineer");

Accessing Object Properties

There are two ways to access object properties:

Dot notation: Dot notation is the simplest way to access object properties. It is done by using a period (.) followed by the name of the property.

// Access the name property of the person object
const name = person.name;
// Access the age property of the person object
const age = person.age;

Bracket notation: Bracket notation is more flexible than dot notation. It allows you to access properties using variables or expressions.

// Access the name property of the person object using a variable
const key = "name";
const name = person[key];
// Access the age property of the person object using an expression
const age = person["age + 1"];

Adding and Removing Object Properties

You can add and remove object properties using the following methods:

To add a property: Use the dot notation or bracket notation to assign a value to a new property.

// Add a new property to the person object
person.email = "john.doe@example.com";
// Add a new property to the person object using a variable
const key = "email";
person[key] = "john.doe@example.com";

To remove a property: Use the delete keyword to remove a property from an object.

// Remove the email property from the person object
delete person.email;

Methods on JavaScript Objects

Methods are functions that are associated with objects. They allow objects to perform actions.

To define a method on an object, you can use the following syntax:

objectName.methodName = function() { // Function body };

For example, you could define a method on the person object to calculate their age in years:

const person = {
name: "John Doe",
age: 30,
occupation: "Software Engineer",
getAgeInYears: function() {
return this.age;
},
};

To call a method on an object, you use the following syntax:

objectName.methodName();

For example, to call the getAgeInYears method on the person object, you would do the following:

const ageInYears = person.getAgeInYears();

Using JavaScript Objects

JavaScript objects can be used in a variety of ways. For example, you can use them to:

Store data about users, products, or other entities.

Represent real-world objects, such as cars, houses, or people.

Implement game logic, such as tracking the positions of players and objects in a game world.

Create reusable components for web applications, such as forms, menus, and dialog boxes.

Conclusion

JavaScript objects are a powerful and versatile data type. By understanding how to create, use, and modify objects, you can write more efficient and effective JavaScript code.

Functions are one of the most important concepts in JavaScript. They allow us to group together a block of code and reuse it multiple times. This can make our code more readable, organized, and maintainable.

Defining a function

To define a function in JavaScript, we use the function keyword, followed by the name of the function and parentheses. Optionally, we can include a list of parameters within the parentheses. The code block that needs to be executed when the function is called is written within curly braces.

function greet() {
console.log("Hello, world!");
}


The above function definition is very simple. It doesn’t take any parameters and simply logs a message to the console.

Calling a function

To call a function, we simply use the function name followed by parentheses. If the function takes any parameters, we need to pass them in within the parentheses.

greet(); // Logs “Hello, world!” to the console

Function parameters

Function parameters are variables that are passed into a function when it is called. They can be used to receive input from the caller of the function.

function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("Bard"); // Logs “Hello, Bard!” to the console

In the above example, the greet function takes a single parameter named name. When the function is called, the value of the name argument is passed into the function and assigned to the name parameter.

Function expressions

Function expressions are a concise way to define functions in JavaScript. They are similar to function definitions, but they are expressed as an expression instead of a statement.

const greet = function(name) {
console.log(`Hello, ${name}!`);
};

greet("Bard"); // Logs “Hello, Bard!” to the console

Function expressions can be used anywhere that a JavaScript expression is valid. For example, they can be assigned to variables, passed as arguments to other functions, or returned from other functions.

Function return values

Functions can return values from the function body using the return statement. The value that is returned from the function is the value of the function call.

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

const sum = add(1, 2); // sum is now equal to 3

In the above example, the add function takes two parameters, a and b, and returns their sum. When the add function is called, the sum of the two arguments is calculated and returned to the caller of the function.

Function hoisting

Function hoisting is a JavaScript feature that allows us to call a function before it is defined. This is because function definitions are hoisted to the top of the scope in which they are defined.

greet(); // Logs “Hello, world!” to the console

function greet() {
console.log("Hello, world!");
}


In the above example, the greet function is called before it is defined. This is possible because the function definition is hoisted to the top of the scope.

Function scope

Function scope is the set of variables that are accessible to a function. A function has access to all of the variables in its scope, as well as all of the variables in the global scope.

let name = "Bard";

function greet() {
console.log(`Hello, ${name}!`);
}
greet(); // Logs “Hello, Bard!” to the console

In the above example, the greet function has access to the name variable because it is in the global scope.

Arrow functions

Arrow functions are a concise way to define functions in JavaScript. They are similar to function expressions, but they use a shorter syntax.

const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("Bard"); // Logs “Hello, Bard!” to the console

In the above example, the greet arrow function takes a single parameter named name and returns a string greeting.

Conclusion

Functions are one of the most important concepts in JavaScript. They allow us to group together a block of code and reuse it multiple times. This can make our code more readable, organized, and maintainable.

JavaScript is a dynamically typed language, which means that you do not need to declare the data type of a variable before assigning it a value. The JavaScript engine will automatically determine the data type based on the value that is assigned.

There are seven primitive data types in JavaScript:

Number: Any numeric value, such as 10, 3.14, or -5.67

String: A sequence of characters, such as “Hello, world!” or ‘This is a string.’

Boolean: A logical value, either true or false

Null: A special value that represents the absence of a value

Undefined: A special value that represents a variable that has not yet been assigned a value

BigInt: A new data type (ES2020) that can be used to store integer values that are too big to be represented by a normal JavaScript Number

Symbol: A unique identifier that can be used to add unique property keys to an object

There is also one non-primitive data type:

Object: A collection of properties and values

Primitive Data Types

Primitive data types are stored in the call stack, which is a region of memory that is used to store function calls. Primitive data types are immutable, which means that they cannot be changed once they are created.

Number

The Number data type can represent both integers and floating-point numbers. JavaScript numbers are stored in a 64-bit floating-point format, which means that they can represent a very wide range of values.

Examples

const number1 = 10;
const number2 = 3.14;
const number3 = -5.67;


String

The String data type represents a sequence of characters. Strings can be created using single quotes (‘) or double quotes (“).

Examples

const string1 = "Hello, world!";
const string2 = 'This is a string.';


Boolean

The Boolean data type represents a logical value, either true or false.

Examples

const boolean1 = true;
const boolean2 = false;


Null

The Null data type represents the absence of a value.

Examples

const nullValue = null;

Undefined

The Undefined data type represents a variable that has not yet been assigned a value.

Examples

let undefinedVariable;

BigInt

The BigInt data type (ES2020) can be used to store integer values that are too big to be represented by a normal JavaScript Number.

Examples

const bigInt1 = 900719925124740999n;
const bigInt2 = 1n;


Symbol

The Symbol data type (ES2015) can be used to create unique identifiers that can be used as property keys on objects.

Examples

const symbol1 = Symbol('hello');
const symbol2 = Symbol('hello');


Object Data Type

The Object data type is the only non-primitive data type in JavaScript. Objects are used to store collections of properties and values.

Examples

const object1 = {
name: "John Doe",
age: 30,
occupation: "Software Engineer"
};

const object2 = new Object();

Objects can also be used to represent more complex data structures, such as arrays, lists, and trees.

Data Type Conversion

JavaScript provides a number of functions for converting data types. For example, the parseInt() function can be used to convert a string to a number, and the toString() function can be used to convert a number to a string.

Examples

const numberString = "10";
const number = parseInt(numberString);

const age = 30;
const ageString = age.toString();


Conclusion

JavaScript data types are an important part of the language. By understanding the different data types and how to use them, you can write more efficient and effective JavaScript code.

What is JavaScript Assignment?

JavaScript assignment is the process of assigning a value to a variable. A variable is a named storage location for data. To assign a value to a variable, you use the assignment operator (=). The assignment operator takes two operands: the variable name and the value you want to assign to it.

Here is an example of a JavaScript assignment:

var name = "Bard";

In this example, we are assigning the string "Bard" to the variable name. Once we have assigned a value to a variable, we can use that variable in our code just like any other value.

Compound Assignment Operators

JavaScript also has a number of compound assignment operators. These operators allow you to perform an operation on a variable and then assign the result back to that variable.

Here is a table of the compound assignment operators:

Operator	Description
+=	Adds the value on the right to the variable on the left and assigns the result back to the variable on the left.
-=	Subtracts the value on the right from the variable on the left and assigns the result back to the variable on the left.
*=	Multiplies the value on the right by the variable on the left and assigns the result back to the variable on the left.
/=	Divides the value on the left by the value on the right and assigns the result back to the variable on the left.
%=	Calculates the remainder of dividing the value on the left by the value on the right and assigns the result back to the variable on the left.

Here is an example of using a compound assignment operator:

var count = 0;
count += 1; // This is the same as count = count + 1;

In this example, we are using the += operator to add 1 to the variable count. After the assignment, the value of count will be 1.

Best Practices for JavaScript Assignment

Here are some best practices for JavaScript assignment:

Use descriptive variable names. This will make your code more readable and easier to maintain.

Avoid using global variables. Global variables can make your code difficult to debug and error-prone.

Use local variables whenever possible. Local variables are only accessible within the scope in which they are declared.

Initialize all variables before using them. This will help to prevent errors.

Use the appropriate assignment operator for the task at hand. For example, if you are adding two values together, use the += operator.

Conclusion

JavaScript assignment is a fundamental concept in the language. By following the best practices outlined above, you can write clear, concise, and error-free code.

JavaScript arithmetic is the process of performing mathematical calculations on numbers using JavaScript operators. JavaScript provides a variety of arithmetic operators, including the following:

Addition (+): Adds two numbers together.

Subtraction (-): Subtracts the right number from the left number.

Multiplication (*): Multiplies two numbers together.

Division (/): Divides the left number by the right number.

Modulus (%): Returns the remainder of dividing the left number by the right number.

Exponentiation (**): Raises the left number to the power of the right number.

Increment (++): Increments a number by one.

Decrement (--): Decrements a number by one.

Arithmetic Expressions

An arithmetic expression is a combination of operands (numbers or variables) and operators that evaluates to a single value. For example, the following are all valid arithmetic expressions in JavaScript:

5 + 2
10 - 3
4 * 5
20 / 2
10 % 3
2 ** 3
x++
y--


Arithmetic expressions are evaluated in order of precedence, which means that certain operators are evaluated before others. For example, multiplication and division are evaluated before addition and subtraction. If you need to change the order of evaluation, you can use parentheses.

For example, the following expression evaluates to 16:

10 + 2 * 3

This is because the multiplication is evaluated before the addition. If you want the addition to be evaluated first, you can use parentheses:

(10 + 2) * 3

This expression evaluates to 18.

Arithmetic Operators

Here is a more detailed description of each arithmetic operator:

Addition (+): The addition operator adds two numbers together. The result of the addition is a new number that is the sum of the two operands.

Subtraction (-): The subtraction operator subtracts the right number from the left number. The result of the subtraction is a new number that is the difference between the two operands.

Multiplication (*): The multiplication operator multiplies two numbers together. The result of the multiplication is a new number that is the product of the two operands.

Division (/): The division operator divides the left number by the right number. The result of the division is a new number that is the quotient of the two operands.

Modulus (%): The modulus operator returns the remainder of dividing the left number by the right number. The result of the modulus operation is a new number that is the remainder of the division.

Exponentiation (**): The exponentiation operator raises the left number to the power of the right number. The result of the exponentiation operation is a new number that is the base number raised to the power of the exponent.

Increment (++): The increment operator increments a number by one. The increment operator can be used either before or after the operand. If the increment operator is used before the operand, the operand is incremented and then evaluated. If the increment operator is used after the operand, the operand is evaluated and then incremented.

Decrement (--): The decrement operator decrements a number by one. The decrement operator can be used either before or after the operand, just like the increment operator.

Examples

Here are some examples of how to use JavaScript arithmetic operators:

// Addition
const sum = 10 + 5; // sum is now equal to 15

// Subtraction
const difference = 10 - 5; // difference is now equal to 5

// Multiplication
const product = 10 * 5; // product is now equal to 50

// Division
const quotient = 10 / 5; // quotient is now equal to 2

// Modulus
const remainder = 10 % 5; // remainder is now equal to 0

// Exponentiation
const power = 2 ** 3; // power is now equal to 8

// Increment
let count = 0;
count++; // count is now equal to 1

// Decrement
let count = 10;
count--; // count is now equal to 9

Conclusion

JavaScript arithmetic is a powerful tool that can be used to perform a variety of mathematical calculations. By understanding how to use JavaScript arithmetic operators, you can write JavaScript code that is both efficient and expressive.

JavaScript operators are symbols that perform operations on one or more operands. Operands can be variables, values, or expressions. Operators are used to perform a variety of tasks, such as arithmetic operations, logical comparisons, and string manipulation.

Types of JavaScript Operators

There are seven main types of JavaScript operators:

Arithmetic operators: Arithmetic operators perform mathematical operations on numbers. For example, the + operator adds two numbers together, the - operator subtracts two numbers, and the * operator multiplies two numbers.

Assignment operators: Assignment operators assign values to variables. For example, the = operator assigns a value to a variable, and the += operator adds a value to a variable that already has a value.

Comparison operators: Comparison operators compare two values and return a Boolean value (true or false). For example, the == operator checks if two values are equal, and the > operator checks if one value is greater than another value.

Logical operators: Logical operators combine Boolean values to produce a new Boolean value. For example, the && operator returns true if both operands are true, and the || operator returns true if either operand is true.

String operators: String operators perform operations on strings. For example, the + operator concatenates two strings together, and the [] operator returns a character at a specific index in a string.

Bitwise operators: Bitwise operators perform operations on bits. For example, the & operator performs a bitwise AND operation, and the | operator performs a bitwise OR operation.

Ternary operators: The ternary operator is a special operator that can be used to evaluate three expressions and return one of two values depending on the result of the first expression.

Examples of JavaScript Operators

Here are some examples of how to use JavaScript operators:

// Arithmetic operators
const sum = 1 + 2; // 3
const difference = 5 - 2; // 3
const product = 3 * 4; // 12
const quotient = 10 / 2; // 5

// Assignment operators
let number = 10;
number += 5; // number now equals 15
number *= 2; // number now equals 30

// Comparison operators
const isEqualTo = 10 === 10; // true
const isGreaterThan = 10 > 5; // true
const isLessThanOrEqualTo = 5 <= 5; // true

// Logical operators
const isTrue = true && false; // false
const isFalse = true || false; // true

// String operators
const greeting = "Hello" + " world!"; // “Hello world!”
const firstCharacter = greeting[0]; // “H”

// Bitwise operators
const bitwiseAnd = 10 & 5; // 0
const bitwiseOr = 10 | 5; // 15

// Ternary operator
const isAdult = age >= 18 ? true : false;

Operator Precedence

Operator precedence is the order in which operators are evaluated. Operators with higher precedence are evaluated first. If two operators have the same precedence, the operator from left to right is evaluated first.

You can use parentheses to change the order of evaluation. For example, the expression (10 + 5) * 2 will be evaluated as follows:

1. The expression 10 + 5 is evaluated first, returning the value 15.
2. The expression 15 * 2 is then evaluated, returning the value 30.

Without parentheses, the expression would be evaluated as follows:

1. The operator * has higher precedence than the operator +, so the expression 10 * 2 is evaluated first, returning the value 20.
2. The expression 20 + 5 is then evaluated, returning the value 25.

Therefore, it is important to understand operator precedence when writing JavaScript code.

Conclusion

JavaScript operators are a powerful tool that can be used to perform a variety of tasks. By understanding the different types of operators and their precedence, you can write more efficient and readable code.

The const keyword in JavaScript is used to declare a constant variable. This means that the value of the variable cannot be changed once it has been assigned. This can be useful for preventing accidental changes to important variables in your code.

Declaring Const Variables

To declare a constant variable in JavaScript, you use the const keyword followed by the variable name and then the value you want to be assigned to it. For example:

const MY_CONSTANT_VARIABLE = 5;

Once you have declared a constant variable, you cannot reassign it to a different value. If you try to do so, you will get an error. For example:

const MY_CONSTANT_VARIABLE = 5;
// This will cause an error
MY_CONSTANT_VARIABLE = 10;

Initializing Const Variables

You must initialize a constant variable when you declare it. This means that you must assign it a value in the same declaration. For example:

const MY_CONSTANT_VARIABLE = 5;

If you try to declare a constant variable without initializing it, you will get an error. For example:

// This will cause an error
const MY_CONSTANT_VARIABLE;

Scope of Const Variables

Const variables have the same scope as variables declared with the let keyword. This means that they are block-scoped. This means that their scope is limited to the block of code in which they are declared. For example:

{
const MY_CONSTANT_VARIABLE = 5;

console.log(MY_CONSTANT_VARIABLE); // 5
}

console.log(MY_CONSTANT_VARIABLE); // ReferenceError: MY_CONSTANT_VARIABLE is not defined

When to Use Const Variables

You should use const variables whenever you know that the value of a variable should not be changed. This can help to prevent accidental changes to important variables in your code. For example, you might use const variables to declare the following:

Constants such as mathematical constants (e.g., PI) or physical constants (e.g., SPEED_OF_LIGHT).

Enum values.

Global configuration variables.

Function parameters.

Using Const Variables with Objects and Arrays

You can also use the const keyword to declare constant objects and arrays. However, this does not mean that the contents of the object or array cannot be changed. It simply means that the variable itself cannot be reassigned to a different object or array. For example:

const MY_CONSTANT_OBJECT = {
name: "John Doe",
age: 30
};

MY_CONSTANT_OBJECT.age = 31;

console.log(MY_CONSTANT_OBJECT.age); // 31


Conclusion

The const keyword is a useful way to prevent accidental changes to important variables in your JavaScript code. You should use it whenever you know that the value of a variable should not be changed.