10 Differences Between var and let in javascript

Difference between var and let in JavaScript

When it comes to variable declaration in JavaScript, developers have the option to use either var or let. Although both keywords serve a similar purpose, they have distinct differences in terms of scope, hoisting, and block-level declaration. Let’s explore the differences between var and let in JavaScript.

What is/are var?

The var keyword is used to declare variables in JavaScript. It was the only way to declare variables in JavaScript before the introduction of let and const in ECMAScript 6 (ES6). Unlike let, var does not have block-level scope and is function-scoped. This means that variables declared with var are accessible throughout the entire function, regardless of where they are declared within it.

Examples of var:

function exampleFunc() {
    var x = 10;
    if (true) {
        var y = 20;
        console.log(x + y); // Output: 30
    console.log(x + y); // Output: 30

Uses of var:

  • Global variable declaration
  • Function-scoped variables
  • Variable hoisting

What is/are let in JavaScript?

The let keyword, introduced in ES6, allows block-level scoped variables. Unlike var, let is only accessible within the block it is declared in, including loops and conditional statements.

Examples of let in JavaScript:

function exampleFunc() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x + y); // Output: 30
    console.log(x + y); // Uncaught ReferenceError: y is not defined

Uses of let in JavaScript:

  • Block-scoped variables
  • Preventing variable hoisting
  • Reassigning variables within the same scope

Differences Table:

var let
Scope Function-scoped Block-scoped
Hoisting Variables are hoisted to the top of their enclosing function. Variables are not hoisted to the top of their block.
Redeclaration Allows redeclaration of variables within the same scope. Does not allow redeclaration of variables within the same scope.
Block-level scope No Yes
Global object property Creates a property on the global object (window in browsers). Does not create a property on the global object.
Temporal dead zone No Yes
For loops Single binding for the variable declared in the loop. Separate binding for each iteration in the loop.
Reassignment Allowed Allowed (within the same scope)
Compatibility Supported in all browsers. Supported in modern browsers, may not work in older browsers.
Best practice Use var for backward compatibility and global variables. Use let for variable declaration in modern JavaScript projects.


In summary, var and let are both used for variable declaration, but they have some key differences. var has function-level scope, while let has block-level scope. var variables are hoisted, whereas let variables are not. var allows redeclaration in the same scope, whereas let does not. It is important to choose the appropriate keyword based on your specific needs and adhere to best practices.

People Also Ask:

Q: What is block-level scope in JavaScript?

A: Block-level scope refers to the visibility and accessibility of variables and functions within a block statement, such as if statements, for loops, and function blocks. Variables declared with let have block-level scope, meaning they are only accessible within the block they are declared.

Q: Can var variables be accessed outside a function?

A: Yes, var variables can be accessed outside a function as they are function-scoped. However, if a var variable is declared within a block statement (if, for, etc.), it can still be accessed outside the block. This behavior is different from let variables, which are accessible only within the block they are declared.

Q: What is the temporal dead zone?

A: The temporal dead zone is a behavior introduced by let and const declarations in JavaScript. It is a time span between entering a scope and being able to access a variable declared with let or const. During this period, if you try to access the variable, a ReferenceError will be thrown.

Q: Which is better to use, var or let?

A: The choice between var and let depends on the specific use case. If you need backward compatibility or intend to create global variables, var may be suitable. On the other hand, let is recommended for most use cases, as it enforces block-level scoping and prevents accidental variable redeclaration.

Q: Are var and let supported in all browsers?

A: var is supported in all browsers, including older versions. However, let, being introduced in ECMAScript 6, may not work in older browsers. It is generally safe to use let in modern environments and consider using a transpiler, such as Babel, to ensure compatibility in older browsers.

Leave a Comment

content of this page is protected

Scroll to Top