In JavaScript, the use of and to define variables is well-known and recommended over the use of . let const var This article will elaborate on the reasons for avoiding and provide guidance on converting old code sourced from the internet, such as StackOverflow, to . var let/const Although it's not recommended to use , here's how you can define a variable using the keyword: var var var name = "Sam"; Let/const is block-scoped defined with and are block-scoped, limiting their accessibility to the closest enclosing block. Variables let const The nearest block refers to the nearest pair of opening and closing curly braces. Consider the following example: function sayHello() { // opening and closing curly braces
    if (true) { // opening and closing curly braces (nearest block)
        const message = "Alex";
    }
} Since the variable is block scoped, it is only accessible within the if statement's curly braces. Any attempt to access outside of those braces will result in an undefined variable. message message This behavior may not come as a surprise to you, as we may have already encountered it while using JavaScript. This is precisely why it's advised to use and instead of since is limited to function scope. let const var var Var is function scoped If you define a variable with var, it will be scoped to the nearest . function block As an example, if we replace const with var in the previous code: function sayHello() { // nearest function
    // message is accessible here
    if (true) {
        var message = "Alex";
    }
    // message is also accessible here
} Since the variable was declared using , it can be accessed from anywhere within the closest function. However, this is typically not seen as a desirable feature and is considered a flaw in JavaScript's design. var This behavior is known as and may come as a surprise to some. hoisting Hoisting & Temporal Dead Zone Hoisting is a peculiar feature that comes with defined variables. However, it's not advisable to depend on this concept, and I am discussing it simply to ensure you're aware of its existence. var What is hoisting? Hoisting in JavaScript refers to the practice of moving variables defined within a function to the top of that function. This occurs whenever you define a variable using : var function sayHello() {
    console.log(message); // undefined
    var message = "Hello JavaScript.";
    console.log(message); // "Hello JavaScript."
    return message;
}

sayHello(); The code you write will be by the JavaScript compiler into the following: transpiled function sayHello() {
    var message; // this is hoisting
    console.log(message); // undefined
    message = "Hello JavaScript.";
    console.log(message); // "Hello JavaScript."
    return message;
}

sayHello(); Observe that the JavaScript compiler automatically shifts the variable declaration to the top of the function. This explains why can be accessed before it's defined, but relying on this behavior is not recommended. console.log(message) Variables defined with let and const are also hoisted, but they cannot be accessed before initialization since they do not have a default value. Temporal Dead Zone (TDZ) The term refers to the phenomenon where variables declared with let and const cannot be accessed until they've been initialized. Temporal Dead Zone console.log(name); // this is the Temporal Dead Zone
let name = "Alex"; The code shown above will result in an error message indicating that the variable name cannot be accessed before it's declared. Any line of code that attempts to use the name variable before it's defined will fail due to it being in the . This is typical behavior that you'd expect from variables. Temporal Dead Zone Converting old code While searching for JavaScript-related queries, you may come across legacy code that still uses . In most cases, you can replace with , and the code will continue to function as intended. Additionally, you could review the code for variables that are not being reassigned and modify them to use instead. var var let const Conclusion In summary, it is recommended to avoid using in JavaScript and use or instead. This is because variables defined with / are block-scoped, meaning that they are only accessible within the nearest set of opening and closing curly braces. var let const let const On the other hand, the variables defined with are function scoped and are accessible anywhere within the nearest function. Hoisting is a behavior in JavaScript where variables defined using are moved to the top of the function, but relying on hoisting is not recommended. var var While variables defined with and are also hoisted, they cannot be accessed before initialization due to the . However, in most cases, when working with legacy code from the Internet, can be swapped with let without causing any issues. Therefore, it is advisable to use or to avoid unexpected behavior and errors in your code. let const Temporal Dead Zone var let const

This story contains new, firsthand information uncovered by the writer.

How to Implement Scroll Snap: A CSS Feature Worth Knowing in 2023

Read My Stories

My Resume

Sojin is open for hire

Too Long; Didn't Read

Make resilience your competitive advantage

Defining Javascript Variables: Why You Should Ditch Var for Let and Const

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Web Components Exposed: Empowering Frontend Developers For Unparalleled Success

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Web Components Exposed: Empowering Frontend Developers For Unparalleled Success

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps