Understanding the Differences between let, const, and var in JavaScript

• JavaScript fundamentals certification
• var
• let
• const
• Key Differences
• Best Practice
• Browser Compatibility
• Summary

In JavaScript, you have three options for declaring variables: let, const, and var. Each has its own set of rules and use cases. In this article, we'll discuss the differences between these three variable declarations and provide code examples to help you understand when to use each one.

¶JavaScript fundamentals certification

Already know all of this? Prove it. Our JavaScript fundamentals certification probes your knowledge on topics similar to those found in this article.

¶var

var is the original way to declare variables in JavaScript. When you declare a variable using var, it is function-scoped, which means the variable is accessible within the function where it is declared and within any nested functions. If a variable is declared outside of any function, it becomes a global variable.

Example:

function example() {
  var globalVar = 'I am a global variable';

  function nestedFunction() {
    var localVar = 'I am a local variable';
    console.log(globalVar); // Output: I am a global variable
  }

  console.log(localVar); // Error: localVar is not defined
}

console.log(globalVar); // Output: I am a global variable

Learn more about var in the MDN docs.

¶let

The let keyword was introduced in ECMAScript 2015 (ES6) as an alternative to var. When you declare a variable using let, it is block-scoped, which means the variable is only accessible within the block where it is declared. Additionally, let variables are not hoisted, meaning they are only available after the line where they are declared.

Example:

function example() {
  if (true) {
    let blockVar = 'I am a block-scoped variable';
  }

  console.log(blockVar); // Error: blockVar is not defined
}

Learn more about let in the MDN docs.

¶const

The const keyword, also introduced in ECMAScript 2015 (ES6), is used to declare constants. Constants are block-scoped, like let variables, but their values cannot be reassigned once they are set. This makes them useful for declaring values that should not be changed throughout your code. You'll often find them set for things like settings within a class or set of files, or for toggling things like a debug mode, or setting keys for services.

Example:

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

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

Learn more about const in the MDN docs.

¶Key Differences

Here's a summary of the key differences between let, const, and var:

1. Scoping: var is function-scoped, while let and const are block-scoped.
2. Hoisting: var variables are hoisted to the top of their containing function or global scope, while let and const variables are not hoisted. Learn more about hoisting on MDN.
3. Reassignment: let and var variables can be reassigned, while const variables cannot.
4. Global Object Property: When declared in the global scope, var variables become properties of the global object (e.g., window in a browser), while let and const variables do not.

¶Best Practice

1. Prefer const: Use const when declaring variables that should not be reassigned. This helps you write more predictable and maintainable code.
2. Use let for mutable variables: If you need a variable that will change over time, use let instead of var. The block scoping of let variables can help prevent bugs caused by unintended variable access.
3. Avoid using var: Due to the function scoping and hoisting behaviour of var, it can lead to unexpected results and make your code harder to understand. In modern JavaScript, it's generally best to avoid using var entirely and opt for let and const instead.

¶Browser Compatibility

It's important to note that let and const are not supported in older browsers, such as Internet Explorer 11 and earlier versions. If you need to support these browsers, you can either use var or transpile your code using a tool like Babel to convert let and const declarations to var.

Example:

Before transpilation:

const exampleConst = 'I am a constant';
let exampleLet = 'I am a let variable';

After transpilation:

var exampleConst = 'I am a constant';
var exampleLet = 'I am a let variable';

In most modern frameworks and build pipelines two files are created; one transpiled for ES5 support and another more 'true' file for ES6. The transpiled version above would be served to IE11 and below using conditional HTML comments, whilst everything else would use the ES6 version.

¶Summary

Understanding the differences between let, const, and var in JavaScript is crucial for writing clean, maintainable code. By using the appropriate variable declarations in your projects, you can take advantage of modern JavaScript features while avoiding potential pitfalls associated with function-scoped variables and hoisting. Keep these best practices in mind and always consider the implications of your variable declarations.