How to Declare Variables in JavaScript

MUO

How to Declare Variables in JavaScript

To get started with JavaScript, you need to understand variables. Here are three ways to declare variables in JavaScript. Working with variables is one of the first things you learn as a JavaScript programmer. JavaScript is widely used in web development, so it's important to build a good foundation of knowledge. Declaring a variable in JavaScript is easy because it is a developer-friendly language. The challenge comes with the keywords used to create variables. There are three of these keywords and each will give you a different result. If you know all three ways to declare a variable, you can make the right decisions for your app. Let's examine these three keywords, how they work, and when they are used.

Three Ways to Declare a JavaScript Variable

There are three keywords used to declare a variable in var let const It’s easy to code a variable in JavaScript. For example, here is how to do it using the var keyword: myVariable = ; These new methods were established with . Before learning about how they work, it helps to have a background on some common programming terms.

Key Terms

Scope

Variable scope is what parts of your program can see the variable. Some variables will be limited in scope, others are available to your entire program. Variables that are available to your entire program have a global scope. You need to know about scope rules. As programs get bigger you will use more variables. Losing track of scope can lead to errors in your programs.

Block

Functions created in JavaScript use curly braces. The code inside the curly braces is known as a block, and you can nest as many blocks as you want inside a function. Knowing about code blocks is key to understanding how each variable type works. Here is a visual example of blocks . (){

{

}
}; With this in mind, let's learn about JavaScript variables!

1 JavaScript Variable var

When you declare a variable with var, the scope of the variable is either: This is a basic variable declaration with var. There are some comments in the code to help guide you through these definitions. test = ;
(){
.log(test);
};
varTest();
>>
In this example, the variable test was declared with var and assigned the value of 5. The function varTest() prints the variable in the console. The output of the function is 5. The variable was declared outside the function, so it has a global scope. Even though the variable test was not declared inside the function, it works just fine. If you change the variable inside the function, the program produces a different result. test = ;
(){
test = ;
.log(test);
};
varTest();
>>
The updated function declares a variable test inside the function, and the console reads the new value (10). The variable was declared inside a function, so the block scope overrides the global scope. If you print the variable by itself without running the function: .log(test);
>>
You get the result of the global variable.

2 JavaScript Variable Let

Using let to declare variables gives them a more specific scope. Variables declared using let are scoped to the block in which they are declared. This is a function with multiple blocks, and it will help show the difference between var and let. Here is a function that uses var inside multiple blocks. Take a look at the code and see if you can figure out what is going on. (){
test = ;
{
test = ;
.log(test);
}
.log(test);
}; varTest();
>>
>> Both outputs are 10. Variables declared with var are available to the entire function. The variable test was declared as 5 in the first block. In the second block, the variable was changed to 10. This changed the variable for the entire function. By the time the program gets to the second console.log() the variable has been changed. Here's the same example with comments to follow the variable: (){
test = ;
{
test = ;
.log(test);
}
.log(test);
}; Here's the same example with let, watch what happens inside the blocks. (){
test = ;
{
test = ;
.log(test);
}
.log(test);
}; letTest();
>>
>> The result has changed. Here is the same code with comments. Let's call the first block "Block A" and the second "Block B". (){
test = ;
{
test = ;
.log(test);
}
.log(test);
}; letTest();
>>
>>

3 JavaScript Variable Const

Using const to declare a variable is block-scoped just like let. When you use const to declare a variable, the value cannot be reassigned. The variable also cannot be redeclared. This should be reserved for important variables in your program that never change. Think of const as shorthand for constant. It's permanent, and it does not change. If you're coming over from another programming language like Java you may already be familiar with this concept. Let's declare a const variable and try it out. permanent = ; Now let's try to make some changes to the variable and see what happens. Try and change the value of the variable: permanent = ;
>> Uncaught : Identifier has already been declared The value cannot be changed, JavaScript throws an error in the console. Let's be clever and try to use a new variable keyword to change the value: permanent = ;
>> Uncaught : Identifier has already been declared Still, no luck changing the variable. How about the same value, with a new keyword? permanent = ;
>> Uncaught : Identifier has already been declared This still does not work. Even though the value is the same, trying to change the keyword will throw an error. That's all there is to using the const keyword. Save it for the special variables you need to protect in the program.

Becoming a JavaScript Expert

This tutorial broke down the three keywords used to declare JavaScript variables. You will see all three of these types throughout your web development career so it's important to get familiar. There's so much more to learn. Learning will prepare you for modern web development. Now that you're comfortable with variables, learn more about how and try out a practical project like .