JavaScript Variable: An Introduction to "var", "let", "const" and their differences.

Welcome to this lesson, in this lesson, we will discuss variables in JavaScript.

What is variable?

Variable is anything that its value can changes from time to time.

x = 2

For example, the x above is a variable if its value can change.

Variables are use to store data that will be used in a running code.

Declaration of a variable.

There are three ways to declare a variable in JavaScript.

We can use var, let and const to declare a variable in JavaScript.

When you declare a variable, you create its name.
For example, you can declare a variable name like these:

var name;
let name;

Oops!

We can't use

const name;

"const" must be assign/given a value Whenever it is declared as in below:

const name = "Ayobami";

Assignment of variables.

When we assign a variable, we give it a value as in:

var name;
name = "Ayobami";

Another example!

let school;
school = "Harvard";

Also, we can declare a variable and assign its value at the same time as in below:

var name = "Ayobami";
let school = "Harvard";
const sonOfGod = "Jesus";

Yeah! That is how to declare and assign a variable in JavaScript.

Var Vs Let Vs Const

What is the difference among var, let and const?

To differentiate them, we are going to use four verbs and a noun:

1. declare
2. re-declare
3. assign
4. re-assign
5. Scope

Let start with "var".
In short, a variable made with "var" can be declared, assigned, re-declared and re-assigned as in below:

var school = "Harvard";

We have declared variable school and assigned it a value of "Harvard";

If we do console.log(school), "Harvard" will be displayed in the console.

Can you see that?

Now, let's re-declare and re-assign it.

var school = "Oxford";

Re-declare in this case means to reuse or re-write a variable name while re-assign means to change the value of a variable to another thing.

In this case, we re-write variable school and change its value from Harvard to Oxford. In short, we have re-declared and re-assigned it.

Finally, a variable declared with "var" is globally scoped;
It is available for use from anywhere in the codebase, especially the window's object.

Globally scoped means the variable can be accessed within the window's object as in below:

window.variableName;
window.name;
window.age;

"Let" can be declared but cannot be re-declared but it can both be assigned and re-assigned as in:

let salary = "$20,000";

If we re-declare salary, javascript will throw an error.

let salary = "$1000";

Do you see that?

It throws an error.

Let reassign it:

salary = "$100000";
console.log(salary);

Do you see that?
It works.

Finally, "let" is block-scoped, that means, it is scoped to the code block usually represented by { }.

A block-scoped variable can only be accessed from within the block ({}) it is declared.

if(input.type) {
  let type = input.type;
  console.log(type) // it logs type
}
console.log(type) 
// this throws an error because we are calling a variable declared with "let" from outside of the block it is declared.

"const" must be declared and assigned at the same time as in:

const limit = "death";
console.log(limit);

You will see death in the console.

But you cannot declare it alone like this:

const limit;
console.log(limit)

JavaScript will throw an error because a variable made with "const" must be declared and assigned at the same time.

Any variable declared with "const" cannot be re-assigned a new value. It can only be assigned a value once.

const price = 2000;
price = 1000 // throws an error.

Finally, "const" is block-scoped just like "let". That means, it is scoped to the block ({}) where it is declared.

if(input.type) {
  const type = input.type;
  console.log(type) // it logs type
}
console.log(type) 
// this throws an error because we are calling a variable declared with "const" from outside of the block it is declared.

Woooooooooo! That is it!

Naming variables in JavaScript

It is necessary to name variables appropriately in JavaScript to ensure that it is easy to read our code and to make sure the JavaScript engine runs properly.

Therefore, we are going to discuss some necessary tips and considerations to create efficient variables in JavaScript.

1: The first character of a variable name in JavaScript must be a letter or an underscore (_).

2: The remaining parts of the variable can be letters, numbers or underScore except punctuations marks, spaces and symbols.

3: Reserved words - words used by JavaScript Engine such as new, function, let and so on - cannot be used as a variable name.

4: Variable names are case sensitive in JavaScript. That means school and School are treated as two different variable names.

5: Use descriptive variable names. That means you should use variable names that describe the value they hold. E.g interestRate, price, salary, fee, best_friend,

Viola! We are done with variables.

See you in the next lesson?

One more thing

Are you having difficulties to learn and understand JavaScript and build projects with it? JavaScript for a Total Novice teaches JavaScript and Project Making Fundamentals with simple illustrations and examples that make everything so easy. You can now handle any difficult projects without fear.

Don't trust me, get a free previous to judge by yourself: https://bit.ly/3o3TMyg)