How to Use var, let, and const appropriately in JavaScript

How to Use var, let, and const appropriately in JavaScript

Though most of the JavaScript developers have used all these keywords, it’s good to know how they work. In this article, we will discuss var, let and const in detail with respect to their scope, use, and hoisting. At the end of the article, I’ll provide a cheat sheet as well. How to Use var, let, and const appropriately in JavaScript

Though most of the JavaScript developers have used all these keywords, it’s good to know how they work. In this article, we will discuss varlet and const in detail with respect to their scope, use, and hoisting. At the end of the article, I’ll provide a cheat sheet as well.

var

Whenever a variable is declared using a var keyword, the variables are:

  • Function scoped or globally scoped
  • Re-assignable and re-declarable
  • Not subject to the temporal dead zone

Function scoped or globally scoped

When a variable is declared within a function using var, the variable is scoped to the function. But, when the variable is declared outside a function or block, then the global variable has a global scope. In addition, it also creates a global property on the window object, with the same name.

var language = "JavaScript";

function foo() {
  var language = "Python";
  framework = "React";
  console.log(language);
}
foo(); // "Python"
console.log(language); // "JavaScript"
console.log(window.language); // "JavaScript"
console.log(window.framework); // "React"

It also has to be noted that variables declared without any statement become a global variable by default. If you’d like to avoid this behavior then you can use strict mode in JavaScript by adding "use strict"; at the beginning of the file.

Re-assignable and re-declarable

Variables declared with var can be reassigned and re-declared later in the code.

var language = "JavaScript";
var language = "Python"; // Re-declaration
console.log(language); // "Python"
language = "Java"; // Reassignment
console.log(language); // "Java"

Hoisting

Hoisting in JavaScript is a mechanism whereby variables and function declarations are moved to the top of their scope before code execution. var variables are hoisted to the top of their scope and initialized with a value of undefined.

let

Whenever a variable is declared using a let keyword, the variables are:

  • Block scoped
  • Re-assignable but not re-declarable
  • Subjected to the temporal dead zone

Block scoped

When declared inside a block, the variable is scoped to that block. Likewise, when declared within the function, the variable is scoped to that function. But, unlike var it does not create a global property on the window object.

let language = "JavaScript";

{
  let language = "React"; // Block scope
  console.log(language); // "React"
}
function foo() {
  let language = "Python";
  console.log(language);
}
foo(); // "Python"
console.log(language); // "JavaScript"
console.log(window.language); // undefined

Re-assignable but not re-declarable

Any variable declared with let cannot be re-declared. If you do so, you’ll get a nasty error message. But you can reassign the variable.

let language = "JavaScript";
language = "Python";
console.log(language); // "Python"

Hoisting

Variables declared with let are subject to hoisting, but temporal dead zone(TDZ) kicks in. TDZ basically prevents access to the let declarations before their initialization. When a variable is accessed without declaration, then ReferenceError is thrown.

console.log(language); // TDZ
let language = "JavaScript"; // No hoisting
// ReferenceError: language is not defined

const

Whenever a variable is declared using a const keyword, the variables are:

  • Block scoped
  • Neither re-assignable nor re-declarable
  • Subjected to the temporal dead zone

Block scoped

const is very similar to let as variables declared with const are also block scoped.

const language = "JavaScript";

{
  const language = "React"; // Block scope
  console.log(language); // "React"
}
function foo() {
  const language = "Python";
  console.log(language); 
}
foo(); // "Python"
console.log(language); // "JavaScript"
console.log(window.language); // undefined

Neither re-assignable nor re-declarable

Any variable declared with const cannot be re-declared and also cannot be reassigned. If you do so, you’ll get error messages on both occasions.

const language = "JavaScript";
language = "Python"; //TypeError: Assignment to constant variable.
console.log(language);

Hoisting

The hoisting behavior of const variables are similar to that of let variables.

console.log(language); // TDZ
const language = "JavaScript"; // No hoisting
// ReferenceError: language is not defined

Cheat sheet

Image for post

Comparison cheat sheet

Conclusion

While this was a relatively short article, I hope you gained a good understanding of how all these statements work and how to use them appropriately in your code. Thank you for reading!

Originally published on codeburst.io

javascript es6

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is ES6, What is ECMAScript & Why You Should Learn it? – JavaScript ES6 for Beginners

Learn what ES6 is, what ECMAScript is, and why it is important to learn for writing modern JavaScript.

Learn Modern JavaScript ES6 | ES7 | ES8

In this article we are going to Learn Modern JavaScript [ ES6 | ES7 | ES8 ] , so as you know JavaScript is a scripting language that was introduced for

Generator Function JavaScript ES6 | JavaScript Tutorial

In this video we're going to learn about Generator Functions in JavaScript. We'll learn how to define and use a generator function and what is it's advantage. We will also implement a scenario where the generator function can be useful.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript ES6: Var, Let, and Const || ES6 Variable Declarations Explained

Learn the 2 new keywords that ES6 brings for declaring variables: let & const, when and why to use them instead of the old var keyword. JavaScript ES6: Var, Let, and Const || ES6 Variable Declarations Explained