Related Topics
HTML
Data Structure
JAVASCRIPT
function exampleFunction() {
if (true) {
var x = 10; // Function-scoped variable
let y = 20; // Block-scoped variable
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10 (var is accessible outside the block)
// console.log(y); // Error: y is not defined (let is block-scoped)
}
exampleFunction();
// Redeclaration example
var a = 5;
var a = 10; // This is allowed with var
let b = 15;
// let b = 20; // Error: Identifier 'b' has already been declared
As a best practice, it is recommended to use let over var in modern JavaScript development. let provides block scoping, which can help prevent common bugs caused by variable hoisting and redeclaration. Additionally, using const for variables that don’t need to be reassigned can further improve code readability and maintainability.
const PI = 3.14159;
const MAX_WIDTH = 800;
2. Block-Scoped Variables: Similar to let, variables declared with const are block-scoped, meaning they are only accessible within the block in which they are defined. This helps avoid variable hoisting issues associated with var.
if (true) {
const message = "Hello!";
console.log(message); // Output: Hello!
}
// console.log(message); // Error: message is not defined
3. Preventing Reassignment: Once a value is assigned to a const variable, you cannot reassign it. Attempting to do so will result in a TypeError.
const age = 30;
// age = 40; // Error: Assignment to constant variable.
4. Immutability for Objects and Arrays: When declaring an object or array with const, you can’t reassign the variable itself, but you can still modify its properties or elements. This means the reference to the object or array is constant, but its contents can be changed.
const person = {
name: "Alice",
age: 30,
};
person.age = 31; // This is allowed
// person = { name: "Bob" }; // Error: Assignment to constant variable.
To achieve full immutability for objects and arrays, you can use techniques like the spread operator or the Object.freeze() method.
const immutablePerson = Object.freeze({
name: "Alice",
age: 30,
});
As a best practice, use const by default for variables that won’t be reassigned, as it communicates your intention clearly and helps prevent accidental reassignment of values. If a variable needs to be reassigned, use let. Use var only when dealing with older codebases or specific scenarios where its behavior is required (e.g., hoisting to the function scope).
console.log(x); // Output: undefined
var x = 10;
console.log(x); // Output: 10
Behind the scenes, the above code is interpreted as:
var x; // Declaration is hoisted
console.log(x); // Output: undefined
x = 10; // Assignment remains in place
console.log(x); // Output: 10
2. Function Hoisting: Function declarations are also hoisted to the top of their scope. This means that you can call a function before it appears in the code.
foo(); // Output: "Hello, I am foo."
function foo() {
console.log("Hello, I am foo.");
}
Behind the scenes, the above code is interpreted as:
function foo() {
console.log("Hello, I am foo.");
}
foo(); // Output: "Hello, I am foo."
It’s important to note that function expressions (functions assigned to variables) are not hoisted. Only function declarations are hoisted.
// Function expression (not hoisted)
var bar = function() {
console.log("I am a function expression.");
};
// Function declaration (hoisted)
function baz() {
console.log("I am a function declaration.");
}
While hoisting can be a useful feature, it can also lead to confusion and bugs if not understood properly. As a best practice, always declare your variables and functions at the top of their respective scopes to avoid unexpected behavior caused by hoisting. Additionally, consider using let and const instead of var to avoid some of the issues associated with variable hoisting.
let x;
console.log(x); // Output: undefined
function foo(a) {
console.log(a);
}
foo(); // Output: undefined (a is not passed)
2. Null:null is a special value that represents the intentional absence of any object value.
It is a type itself in JavaScript (
typeof nullreturns"object"– which is considered a historical mistake).If a variable is explicitly set to
null, it means the variable has been assigned the value ofnull, indicating that it points to no valid object or data.
let y = null;
console.log(y); // Output: null
Here’s a summary of the key differences:
undefinedis the default value of variables that have been declared but not assigned a value.nullis a value that represents the intentional absence of an object or data.Both
nullandundefinedare falsy values in JavaScript, meaning they evaluate tofalsein boolean contexts.When checking for undefined, you can use
typeofor strict equality (===), but for null, it’s best to use strict equality (===) becausetypeof nullreturns"object".
console.log(typeof undefined); // Output: "undefined"
console.log(typeof null); // Output: "object"
let z;
console.log(z === undefined); // Output: true
console.log(z === null); // Output: false
In most cases, you will use null to intentionally assign a variable with no value, while undefined is typically the initial value of variables that have not been assigned. Understanding these differences is important when handling data and performing conditional checks in JavaScript.
function outerFunction() {
let outerVariable = "I am from the outer function";
function innerFunction() {
console.log(outerVariable); // Accessing the outer variable
}
return innerFunction; // Returning the inner function from the outer function
}
const closureFunc = outerFunction();
closureFunc(); // Output: "I am from the outer function"
In the example above, outerFunction defines an inner function innerFunction. The innerFunction has access to the outerVariable, which is a variable defined in the scope of outerFunction. When outerFunction is called and returns innerFunction, the returned innerFunction still holds a reference to the outerVariable, creating a closure. Even though outerFunction has finished executing, the closure ensures that innerFunction can still access and use outerVariable.
Closures are powerful because they allow functions to maintain state and create private variables. They are commonly used in scenarios like creating private variables, currying, and implementing the module pattern to encapsulate code.
However, it’s important to be cautious with closures to avoid potential memory leaks. If closures hold references to large objects or variables that are no longer needed, they can prevent those objects from being garbage-collected, leading to increased memory consumption. As long as closures are used wisely and mindfully, they provide a valuable feature in JavaScript for creating clean and modular code.
Popular Category
Topics for You
HTML
Data Structure
Go through our study material. Your Job is awaiting.