JavaScript tutorial series: Variables

If you've been following along my CSS tutorial series, then you probably know that we've previously explained what a variable is. If not, don't worry we're going to explain everything in this series and build our knowledge from the ground up.

Before we start explaining what are variables let's take a look at an important thing.

Internal and external script.

Just like CSS JavaScript uses either a tag <script></script> placed at the bottom of your HTML file or an external script <script src="path/script.js"></script> that refers to the separate file that contains your JS script.

What is a variable?

A variable is a specific place where data is kept. Variables are named then given the value that you want to store. Variable names may consist of letters, numbers, and $ or _, but they cannot begin with a number or contain spaces.

You declare a variable like this:

Types of variables:

Types of variables	Description
undefined	This means that the variables has not been assigned a value
null	This means that the variable has an empty value
boolean	returns either true or false
string	a series of characters
symbol	symbols are immutable and unique
bigint	BigInt is a special type of number that supports integers of any length.
number	Integer or a decimal number also knows as a floating point number
object	object is a complex data type

var fullName;

You assign a value to your declared variable by using the assignment operator =. This is called initializing a variable.

var fullName = "John Doe"; 

There are Restricted names that cannot be given to a variable such as class, return, this, function, let, const, var etc... you can find the full list with a quick google search.

Var, let and const

Var

var has been used in the previous versions of ECMAScript, and as seen in the example above, it is used to declare a variable. The var keyword allows you to re-declare the variable meaning, it will overwrite it.

var age = 20;
var age = 25;

This will not throw an error but will overwrite the 20 and give us 25. Finding bugs and fixing them becomes more harder because this behavior does not throw an error.

Let

This problem with the var keyword was resolved by the addition of the let keyword in ES6, (ECMAScript 6) an important update to JavaScript. There can be only one declaration of a variable with the same name when using let.

let age = 20;
let age = 25;

This code will throw an error, since you cannot re-declare a variable in ES6.

let age = 20;
 age = 25;

This code will not throw an error because you can reassign a variable declared with let but not re-declare the variable.

const

const are only readable (read-only). Since they have a constant value, they cannot be changed after being assigned

const SHIRT_COLOR = "red";
SHIRT_COLOR = "green";

This will throw an error since, const is read-only and cannot reassign it later.

For variables that you don't want to change, Const should always be used.
You should use camelCase or lowercase for changeable values and uppercase for unchangeable values.