What are let and const?

In the Introduction to JavaScript React class, you’ll notice that let and const are used instead of var to declare variables. If you’re not familiar with let and const, continue reading below! First, you’ll learn about scope. Then, you’ll learn how important let and const are to managing scope in your projects.

Scope Defined

As your programs get bigger and bigger, it becomes easier to make mistakes and errors. Using let and const to define variables is one way of avoiding these problems by clearly defining a variable’s scope. Scope is the context where variables are visible to certain parts of your program. Context refers to the place the code is evaluated and executed, like inside a function or loop.

There are three types of scope: global scope, function scope, and block scope.

Global Scope

Global scope is the context for the whole program. Variables with global scope aren’t located inside of a function or another block of code, such as an if statement.

For example, the value for the variable numOfDrinks is available for functions and blocks of code to use:

	var numOfDrinks = 5;

	var drinks = function () {
	  var tea = 6 + numOfDrinks;
	  console.log(tea);
	};

	drinks();
	// 11

	if (numOfDrinks === 5) {
	  var soda = “lemon-lime”;
	  console.log(soda);<br>
	}
	//lemon-lime

Function Scope

Function scope is the context inside a function. The curly braces define the function scope, beginning and end. Variables defined within a function are scoped to that function only. That means that if you try to use a variable outside of the function that it is scoped to, the program won’t know that it exists and will result in an undefined error.

For example, the tea variable can't be accessed or changed outside of the drinks function. If you use console.log() with the tea variable outside the function, you'll receive a "not defined" error message in the console:

	var drinks = function () {
	  var tea = 6 + numOfDrinks;
	  console.log(tea);
	};

	console.log(tea);
	// ReferenceError: tea is not defined

Block Scope

Block scope is the context inside a block of code, like an if statement or loops. Block scope is similar to function scope in that the curly braces define the block scope beginning and end.

In this example, the soda variable is block scoped to the if statement:

	if (numOfDrinks === 5) {>
	  var soda = "lemon-lime";
	  console.log(soda);
	}
	// lemon-lime

One problem here is that when you use var to define a variable in a block, JavaScript will let you change (or reassign) it outside of the block. Reassigning a variable outside the intended scope could be a real problem that introduces all kinds of errors and hard-to-debug problems.

	if (numOfDrinks === 5) {<br>
	  var soda = "lemon-lime";<br>
	  console.log(soda);<br>
	}<br>
	// lemon-limesoda = "cola";

	console.log(soda);// cola

That is where let and const come in!

The let keyword limits a variable to block scope. Using let prevents the variable from being accessed outside the block where it was declared.

For instance, the soda variable in the previous example could be used outside the if statement block. If you replace the var with let, that's no longer possible:

	if (numOfDrinks === 5) {
	  let soda = "lemon-lime";
	  console.log(soda);
	}
	// lemon-lime

	console.log(soda);<br>
	// ReferenceError: soda is not defined

Here, the value of the soda variable is protected from being accessed outside the code block.

The const keyword will constrain a variable to block scope AND prevent the value from being reassigned. You'll use const with most variables, including variables used to declare functions:

	const numOfDrinks = 5;

	const drinks = function () {
	  const tea = 6 + numOfDrinks;
	  console.log(tea);
	};

	drinks();
	// 11

If you try to reassign any of the variables declared with const, like numOfDrinks, you will receive an error that the value is read-only:

	const numOfDrinks = 5;

	numOfDrinks = 7;

	console.log(numOfDrinks);
	// SyntaxError: /script.js: "numOfDrinks" is read-only

You may also see an error in the console like "TypeError: Assignment to constant variable" when attempting to reassign a variable declared with const.

A note on reassigning: Using const will prevent data types like strings, booleans, and numbers from being reassigned to a different value. For data types like arrays and objects, const will prevent reassigning the variable but still allow you to modify the elements inside the array/object.

Here are some quick guidelines to help you decide when to use one or the other in your code:

Use const for most of your variables. Like 95% of the time, really!
Use let for inside code blocks (e.g., loops, if/else if statements).
Use let when you might want to reassign the value of a variable.

Now that you know all about let and const, you're ready to use them in your projects! This way of creating variables is the modern language of JavaScript and was created to help avoid some issues caused by using var throughout a project.