Variables are just names for things in our programs.
If you have number, text or some other object, you can name it by declaring variable.
Naming something will allow you to use it later.
Let assume we have number 2. If we name it a, then we can write a + a instead of 2 + 2.
let a = 2; // let assume that a equals 2a + a; // it will equal 4
In JS we can declare variables by writing var, let or const
Historically only var existed in JS. var declares variable which is visible inside the function.
Now we have also let which declares variable visible inside the block (blocks are areas of code enclosed usually by { and }).
We have also const which is similar to let (it also declares variable visible inside the block), but const is more constant.
Let's compare:
With let we can reassign different values to variables, even after declaring:
let a = 2; // we declare by using let
a = 10; // reassign variable to 10
a + a; // this won't display 4 but 20
Using const won't allow you for that:
let a = 2; // we declare by using const
a = 10; // Uncaught TypeError: Assignment to constant variable.
a + a; // this line won't even run because of error in previous line.
So basically:
let gives you more freedom in reassigning variables when you want.
on the other hand const gives you more safety - it ensures that variable cannot be reassigned multiple times (which can be error prone).
Although even variables declared with const can change sometimes.
For example when used with arrays (arrays are lists of things and are usually enclosed by [ and ] ).
const animals = ['cat', 'dog', 'hamster']; // we declare array of animals, using const
animals.push('turtle'); // push (i.e. add) item 'turtle' to the animals
console.log(animals); // we log animals in the console
as you may see program logged: ["cat", "dog", "hamster", "turtle"]. So array changed! Despite of declaring with const.
=
const animals = ['cat', 'dog', 'hamster']; // we declare array of animals, using const
animals = ['cat', 'dog', 'hamster', 'turtle']; // Uncaught TypeError: Assignment to constant variable.
That's why is called const after all. Objects (like arrays) can change internally but you can't reassign const variable to whole new value.
We said before that variables declared with const and let are visible inside the block and variables declared with var are visible inside the function
But what does this really mean? Let's see.
First, block scope. In ES6 each block (usually enclosed by { and }) define its own scope.
Every variable declared with const or let is visible only in block that it was created in (and in children blocks). Look into interactive example
Hover over editor and two kinds of scopes (block scope and function scope) under mouse cursor will be highlighted.
Well. As you can see this tutorial is not done yet. But you can check it later.