Variables :

A variable in JavaScript is a named container that contains a value. Data that may be retrieved and changed throughout the application is stored there. JavaScript variables are dynamic, which means they may store a variety of values, including integers, texts, booleans, objects, and even functions.

Variables declaration using var, let and const :

JavaScript lets you declare variables using three different keywords: var, let and const.

var : Before ES6, JavaScript used the var keyword to declare variables. Depending on where they are declared, variables declared with var are function-scoped or globally scoped. They are hoisted to the top of their scope and can be accessed before they are declared. Variables declared with var can be reassigned and re-declared within the same scope. For example: 

var num = 3;
if (true) {
  var num = 100;
  console.log(num); // Output: 100
}
console.log(num); // Output: 100


In the above example, the variable x is declared with var inside the if block. Since var variables are not block-scoped, the outer x is also affected by the reassignment inside the block.

let : The let keyword was introduced in ECMAScript 6 (ES6) and is used to declare block-scoped variables. Variables declared with let can be reassigned a new value, but their scope is limited to the block in which they are defined. A block is typically denoted by a pair of curly braces {}. For example: 

let x = 15;
if (true) {
  let x = 101;
  console.log(x); // Output: 101
}
console.log(x); // Output: 15


In the above example, the variable x is declared with let inside the if block. This creates a new x variable that shadows the outer x variable within the block. Once the block ends, the inner x variable is no longer accessible.

const : The const keyword is also introduced in ES6 and is used to declare block-scoped variables that are meant to be constant (i.e., their value cannot be reassigned). Variables declared with const must be assigned a value when they are declared, and attempting to reassign them will result in an error. For example: 

const PI = 3.14;
console.log(PI); // Output: 3.14

PI = 3.14159; // Error: Assignment to constant variable


In the above example, PI is declared as a constant variable with the value 3.14. Any attempt to reassign PI will throw an error.

It is generally recommended to use let or const instead of var in modern JavaScript code. let and const provide better scoping rules and help prevent certain types of programming errors. Additionally, using const for variables that shouldn't be reassigned helps make the code more readable and maintainable.

Variable naming conventions and best practices
When naming variables in JavaScript, it is important to follow certain naming conventions and best practices to write clean and readable code. Here are some common practices and guidelines for variable naming:

  1. Use descriptive names: Choose variable names that are meaningful and describe the purpose or content of the variable. This makes your code more readable and helps other developers understand the intent of your code. For example, instead of using x or temp, use names like count, userName, or isLogged.
  2. Follow camelCase: In JavaScript, it is common to use camelCase for variable names. Start with a lowercase letter and capitalize the first letter of each subsequent word. For example: firstName, totalAmount, isLoggedIn.
  3. Avoid reserved keywords: Do not use reserved keywords as variable names. JavaScript has reserved keywords that have special meaning and functionality in the language. Using them as variable names will cause syntax errors. For example, var, function, if, while, and true are reserved keywords.
  4. Avoid single-letter names: Unless they are used in a very limited scope (e.g., loop counters), try to avoid single-letter variable names as they can be ambiguous and make the code harder to understand.
Variable scope and hoisting
Scope of Variable :
Variable scope refers to the region of a program where a variable is accessible or visible. In JavaScript, variables have different scopes, which determine where they can be accessed and used.

  1. Global Scope: Variables with a global scope are those that are defined outside of any function or block. They are reachable in every part of the program, including functions and blocks. If utilized carelessly, global variables can cause problems because they can be modified by any portion of your program and can be accessed from anywhere in your code.
  2. Function Scope: Variables declared within a function have function scope. They are only accessible within that specific function and cannot be accessed from outside the function or other functions. Function scope provides encapsulation and allows for the creation of local variables that are only relevant to a particular function.
  3. Block Scope: Variables declared with let or const within a block (delimited by curly braces {}) have block scope. Block scope was introduced in ECMAScript 6 (ES6) and provides better control and isolation of variables within a block. Block-scoped variables are only accessible within the block they are defined in or within nested blocks.


Variable Hoisting: :
Variable declarations (but not initializations) are hoisted to the top of their respective scopes during the compilation process in JavaScript. This implies that variables may be used before they are explicitly declared in your code.
It's crucial to remember that only declarations—not initializations or assignments—are hoisted. To further understand how hoisting functions, let's look at some examples:

  1. Using var:
console.log(x); // Output: undefined
var x = 5;

In this example, the variable x is hoisted to the top of its scope, which is the global scope. However, the initialization (x = 5) happens at the original position. So, even though x is accessible before its declaration, its value is undefined until the line of assignment is executed.

  1. Using let and const:
console.log(x); // Error: ReferenceError: x is not defined
let x = 5;

With let and const, hoisting still occurs, but unlike var, variables declared with let and const are not initialized to undefined at the top of the scope. As a result, trying to access a variable before its declaration results in a ReferenceError.

To avoid confusion and unexpected behavior, it is considered a best practice to always declare variables at the beginning of their respective scope, regardless of hoisting.

Why hoisting is so important to understand ??? Understanding variable scope and hoisting is essential for writing predictable and maintainable JavaScript code. It helps you manage variable accessibility and ensures that your variables are properly declared and initialized before use.
PrevNext