Everything you need to know about JS Variables

One of the most important concepts in Javascript, as with most programming languages, is the ability to define variables. A variable is a container of a value or data. Some types of variables can later be changed, based on logic we use in our code. Let's take a look at how variables work in Javascript.

Defining Variables

There are two main types:

• Constants - these cannot be updated later, and contain constant data.
• Variables - as the name suggests, these can be changed. We can define these two main types of variable in our code using the keywords let, var and const.

Variables

The var is the original keyword was the first way to define variables introduced to Javascript. As with all other ways to define variables, var follows this pattern:

var myVariable = 'some value';

Typically, in modern JS, we don't use var. However, it is subtly different from let and const, which we'll cover in this article. Above, the keyword var is used to say we are setting a variable called myVariable, and that the value of that variable is some value. Since we used quotation marks, Javascript will assume this is a string.

Let

The let keyword is a new addition to Javascript. It is the same as var, with the only difference being it has block scope. We will cover logical statements and functions later, but this example may help to show what this means:

let myVariable = 'some value';

if(myVariable == 'some value') {
    myVariable = 'some other value';
    // Within this 'block', myVariable now is equal to 'some other value'
}

// Outside the block, myVariable is equal to 'some value'

Errors to watch out for!

Note: defining a variable with the same name twice will throw an error. The below code is invalid:

let x = 'hello';
let x = 'goodbye';
// This will throw an error!

Updating Variables

As we showed in the last example, we can update variables by simply referring to them again and changing their equal to value. This will only work for var and let, however, since const variables cannot be changed.

let myVariable = 1; // myVariable is 1

myVariable = 2; // Now myVariable is 2

Note, if you try to define a variable twice with the same name, using var or let both times, Javascript will give you an error. You can only define a variable once, and after that, you must update it as shown above.

Constants

Constants are defined using the const keyword. As mentioned before, these cannot be changed. They are defined in the same way as other variables, i.e.:

const myConstant = 1;

The above refers to a constant which cannot be changed or updated.

Dynamic Typing in Javascript

In other programming languages, it is necessary to define what type the variable is when defining it. In Javascript, the type is assumed based on how you enter the data. This is called dynamic typing. Some examples are shown below:

let i = "1"; // this is a string, since we used quotation marks
let j = 1; // this is an int, since we used no quotation marks
let k = true; // this is boolean, since we used no quotation marks
let l = "true"; // this is a string, since we used quotation marks

As you can see, whether you use quotation marks or not can really affect your code. If you use quotation marks around a number, for example, it will be a string, and if you tried to add this "string" to a number later, it wouldn't work! So understanding these types is really important.

Reserved words and case

When defining variables, case is important. As such name is different from NAme. We could therefore plausibly write the following, and have no errors:

let naME = 'hello';
let NAme = 'goodbye';

Note: Variable Names cannot start with a number. You can use numbers, just not as the first letter.

Reserved Keywords

There are a number of reserved keywords that you can't use in Javascript. They are all words you would use for other things in Javascript, like function, while, or let. You can find a full list of reserved keywords here. As such, the following code is invalid, and will throw an error:

let while = 'hello';
let if = 'goodbye';
let let = 'no';

Best Practices

Variables are used all over the place in Javascript and other coding languages. There are a few best practices, when we use variables, to make sure everyone reading your code understands what's going on.

• Name your variables something understandable - i.e. colorOfBackground, not color, or firstName, not name.
• Don't use special characters - support can vary for these - it's best to avoid.
• Use one naming format, and stick with it - decide on either pothole_case_naming, camelCase, or CamelCase, and name all of your variables that way for consistency.