A Step-By-Step Guide to JavaScript Let

Let in JavaScript is one of three ways to declare a variable. JavaScript let is used to declare block scope variables and cannot be reassigned or redeclared. The let variable is best used for loops.

Variables are an essential part of most programming languages. When you’re getting started in JavaScript, you’ll encounter the term a lot. “Variable” is used to describe a container that stores a value or values in your code.

There are three ways to declare a variable in JavaScript: var, let, and const. Each of these variable types can be used in different circumstances, which we discuss later in this article.

That said, the focus of this tutorial is the JavaScript keyword “let.” “Let” allows you to declare variables that can be reassigned. We’ll discuss how the “let” keyword works in JavaScript and explore an example of declaring variables using “let.”

JavaScript Variable Refresher

JavaScript variables store values. For example, if we have a name that we want to store in our code, we may want to assign it to a variable. Variables can hold any data type, including numbers, strings, and objects.

The most common way to declare a variable in JavaScript is to use “var,” in large part because the original language specification on which JavaScript is based did not include multiple ways to declare a variable. Here’s the syntax for declaring a variable using “var:”

var full_name = "John Appleseed";

In the example above, we declared a variable called “name” and assigned it the value “John Appleseed”. Our variable has a few components:

• The variable is declared using the “var” keyword.
• The name of our variable is “full_name.”
• The “=” syntax tells our program to assign our variable “full_name” with a value.
• The value assigned to our variable is “John Appleseed.”

Now that we have our variable declared, we can use it throughout our code. In the following code, we print out our variable name:

console.log(full_name);

Our program returns: “John Appleseed”. 

In this example, our variable is a string, but we could have assigned it a number, an array, a JSON object, a boolean, or any other type of data. Here’s an example of a variable that stores an array:

var attendees = ['John', 'Ruby', 'Caleb', 'Emily'];

In this example, we have declared a variable called “attendees.” This variable stores four strings, which are the names of people who may be attending our example concert.

JavaScript Variable Types

The examples above use the “var” keyword to declare a variable, but sometimes using another keyword is more appropriate. That’s where the “let” and “const” keywords come in. 

In JavaScript, we can declare variables using each of these three keywords, which are used in different circumstances.

The table below shows the differences between these three types of variables:

This table looks complex, but when you start using the different types of variables, you’ll begin to develop a better understanding of when each one should be used. 

The following are general rules of thumb for using these types of variables:

1. Use const as much as possible, unless you need to redeclare or hoist a variable. 
2. Use let if you are working with loops. 
3. Only use var if:
   1. You are working on legacy code, 
   2. You need a variable that you can redeclare, or
   3. You need a variable accessible everywhere in the program (i.e., globally).

Two mnemonics to help you remember the three keywords for variables in JavaScript and when to use each are:

1. Variables are containers that let you store value in your code.

1. Constantine could not redeclare nor hoist the

Lettuce through loops, so the

Variety of veggies became a global legacy.

Let’s now look at the “let” keyword. We will explore its use in JavaScript and how it compares to the other keywords for variables.

JavaScript Let

The JavaScript “let” keyword allows you to declare a block scope variable. (Unlike global variables, block scope variables are local to the block in which they are declared.) Recall that you declare global variables with “var.”

What does this mean? Scope refers to where you can access a variable in your code. “block scope” refers to the area within a loop or conditional statement. Generally, curly brackets ({}) distinguish a block of code.

Local variables are variables declared inside a block of code. Global variables, on the other hand, are declared outside.

The “let” keyword is useful in programs that use variables in an “if” statement or a “for” loop.

Here’s an example of the JavaScript “let” keyword in action:

var workday = true;
let lunchFruit = "Apple";

if (workday) {
	let lunchFruit = "Banana";
	console.log(`It is a workday. Pack a ${lunchFruit} for lunch today.`);
}

console.log(`It is not a workday. Pack a ${lunchFruit} for lunch today.`);

Our code returns the following:

It is a workday. Pack a Banana for lunch today.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

It is not a workday. Pack a Apple for lunch today.

In this example, we declare two variables: “workday” and “lunchFruit.” “workday” is a global scope variable that we can access throughout our program (notice that the code uses “var”), and “lunchFruit” is a local variable that can be accessed reassigned only within our loop (notice that the code uses “let”).

When our program executes the “if” statement, it sees that “workday” is equal to “true.” Thus, our program runs the code in the “if” block. In this case, our program reassigns “lunchFruit” to “Banana,” and then prints a message to the console.

But when our program finishes running the code in the “if” statement, it prints out the message “It is not a workday. Pack a Apple today.” This is because our “lunchFruit” variable only changes within our “if” statement. The name of the fruit does not change because our final console.log() lies outside of the “if” statement.

The code above demonstrates the two key attributes of the “let” variable:

1. “let” has block scope, which means it can only be accessed in a certain block.
2. “let” can be reassigned if we want it to, but only within our block scope.

If we wanted our variable to be global, we would use “var” instead, but because the example above uses an “if” statement, we only needed to use the “let” variable.

JavaScript Let Alternatives

To illustrate the differences between “var” and “let” in more depth, here’s an example of the same code above, but using “var” instead of “let” to declare our “lunchFruit” variable:

var workday = true;
var lunchFruit = "Apple";

if (workday) {
	var lunchFruit = "Banana";
	console.log(`It is a workday. Pack a ${lunchFruit} for lunch today.`);
}

console.log(`It is not a workday. Pack a ${lunchFruit} for lunch today.`);

Our code returns:

It is a workday. Pack a Banana for lunch today.

It is not a workday. Pack a Banana for lunch today.

As you can see, when our code changes the “lunchFruit” variable’s value to “Banana,” the change is made globally, so when our code runs the final “console.log()” statement, it prints the “lunchFruit” variable which stores the value “Banana.”

Additionally, we can use “const” to declare a variable. However, unlike variables declared using the “let” keyword, once we have declared the variable, we cannot redeclare it.

Here’s an example of declaring a variable using the “const” keyword:

const full_name = "John Appleseed";

The variable “full_name” now stores “John Appleseed.” But if we wanted to change the name, we would have to declare a new variable, like so:

const first_full_name = "John Appleseed."
const second_full_name = "John Doe."

If we tried to reassign the variable “full_name,” our program would return an error, “full_name has already been declared.” So, “const” can be useful for storing values that will not change, but if you anticipate that you’ll need to redeclare a variable, you may want to use “var.”

Conclusion

Variables are a crucial part of programming. In this tutorial, we discussed the basics of variables and how to work with “var” and “let” in JavaScript. We also briefly discussed the differences between “var,” “let,” and “const,” and how each of these variable keywords should be used in JavaScript.

Now you’re ready to declare JavaScript variables like a professional developer!