Mastering JavaScript Variable Declarations: A Comprehensive Guide to let, var, and const difference

-

JavaScript offers multiple ways to declare variables, each with its own purpose and behaviour. In this blog post, we will explore the differences between let, var, and const, three commonly used variable declaration keywords in JavaScript. Understanding these differences will help you write cleaner, more maintainable code.

1. let:

The let keyword was introduced in ECMAScript 6 (ES6) and provides block-scoping. Variables declared with let are limited to the block or statement in which they are defined. Block-scoping means that a variable declared with let is only accessible within the block it is defined in, as well as any nested blocks. This helps prevent variable name clashes and improves code clarity.

function letFun() { let x = 10; if (true) { let x = 20; // New variable with block scope console.log(x); // Output: 20 } console.log(x); // Output: 10 } letFun();

Using let, the variable x is block-scoped, meaning it is limited to the block in which it is defined. So, the first console.log(x) inside the if block will output 20, while the second console.log(x) outside the block will output 10.

2. var:

The var keyword has been a part of JavaScript since its early days. Variables declared with var are function-scoped, meaning they are accessible throughout the entire function in which they are defined. However, unlike let, var does not have block scope. This means that variables declared with var are accessible outside of the block in which they are defined, which can sometimes lead to unintended consequences or bugs.

function varFun() { var x = 10; if (true) { var x = 20; // Reassigning the same variable console.log(x); // Output: 20 } console.log(x); // Output: 20 } varFun();

With var, the variable x is function-scoped, allowing it to be accessed anywhere within the function. Reassigning the value of x inside the if block affects the value of x outside the block. Therefore, both console.log(x) statements will output 20.

3. const:

The const keyword is also introduced in ES6 and allows you to declare variables that are constant and cannot be reassigned. Once a value is assigned to a const variable, it cannot be changed throughout the program's execution. However, it's important to note that const does not make objects or arrays immutable. While you cannot reassign a new value to a const variable, you can still modify the properties or elements of an object or array declared with const.

function constFun() { const x = 10; if (true) { const x = 20; // New variable with block scope console.log(x); // Output: 20 } console.log(x); // Output: 10 } constFun();

Lastly, with const, the variable x is also block-scoped, but it cannot be reassigned once a value is assigned. Declaring a new x inside the if block creates a new variable, only accessible within that block. Hence, the first console.log(x) will output 20, while the second console.log(x) will output 10, as it refers to the outer variable defined before the if block.

Key Differences:

  1. Scope: let and const have block scope, while var has function scope.
  2. Reassignment: let and var variables can be reassigned with a new value, while const variables are read-only and cannot be reassigned.
  3. Hoisting: var declarations are hoisted to the top of their scope, allowing them to be accessed before they are declared. let and const variables are not hoisted, and accessing them before their declaration results in a ReferenceError.


Comments

  1. AnonymousMay 28, 2023 at 5:06 AM

    1. How is these variable type converted in pure javascript, and how interpreter understand it.
    2. Explain how it holds/ refer value/type and functions reference
    3. Explain how it works on stack during execution

    ReplyDelete

Post a Comment

Popular post

React Lifecycle in Functional Components with useEffect

-
Image
Hello learners, We will explore the lifecycle of a React functional component using the useEffect hook. The useEffect hook is a fundamental part of React's functional component lifecycle. In this blog post , We will understand how it can be leveraged to handle side effects and perform actions at specific points in the component's lifecycle. 1. Introduction to the useEffect Hook: Syntax: useEffect(() => { }, []); The useEffect hook allows you to perform side effects, such as data fetching, subscriptions, or manually manipulating the DOM, within a functional component. It combines the functionalities of different lifecycle methods, such as componentDidMount , componentDidUpdate , and componentWillUnmount , into a single declarative API. 2. Executing Effects on Mount ( componentDidMount ): To execute an effect only when the component mounts, you can provide an empty dependency array ( [] ) as the second argument to useEffect . This ensures that the effect is run only...
Read more

Tricks which ES6 feature should we use in javascript promises vs async await?

-
  Asynchronous programming is crucial for efficient web development, and JavaScript provides two popular approaches: Promises and Async/Await. In this blog post, we'll explore the differences between Promises and Async/Await and guide you on when to use each technique. By understanding their strengths, you'll be able to make informed decisions and write more maintainable code. 1. Understanding Promises: Promises are a core feature of JavaScript, enabling elegant handling of asynchronous operations. They represent the eventual completion or failure of an asynchronous task and offer methods like .then() , .catch() , and .finally() for handling results. Promises have three states: Pending : The initial state when a promise is created and hasn't been resolved or rejected. Fulfilled : The state when a promise is successfully resolved with a value. Rejected : The state when a promise fails to fulfill its intended operation, typically accompanied by a reason for rejection. Creati...
Read more