Variables in JavaScript

We all watch tutorial videos of JavaScript or watch how somebody is coding. They always create variables; let, var or sometimes const. And then the BIG question comes; what the differences between variables are.
**
What are variables?**
Variables are a fundamental part of many programming languages. There are several different properties of variables in JavaScript, as well as several rules which must be followed when naming them. (I will post an example of variables and their names bellow). In JavaScript, there are three keywords used to declare a variable — var, let, and const — and each one affects how the code will interpret the variable differently.

Example:

So, we can say that variables are named containers used for storing values. A piece of information that we might reference multiple times can be stored in a variable for later use or modification. Modification? “So, we can change the value of variable?” you can ask. And the answer is “yes, we can, but for changing it it needs to be in written in “correct” variable”. What I mean when I say correct? I will explain this stuff later. In JavaScript, the value contained inside a variable can be any JavaScript data type, including a number, string, or object. For instance, in the example above I gave string value “Maria” to the variable “name” and I have assigned a number value (which is 18) to the variable “age”.

How can we name variables? Naming variables.
First, variable names can consist only of letters (a-z), numbers (0-9), dollar sign symbols ($), and underscores (_). Second, variable names cannot contain any whitespace characters (tabs or spaces). We cannot write names of variable which start with numbers. There is a list of “keywords” which cannot be used as names of variables in JS. I will leave some bellow but for learning you should check them in google:) Also, Variable names are case sensitive.

Example of keywords that are NOT used as variable names:

In addition, there are some “rules” to learn:

JavaScript also has the convention of using camel case (sometimes stylized as camelCase) in the names of functions and variables declared with var or let. This is the practice of writing the first word lowercase, and then capitalizing the first letter of every subsequent word with no spaces between them. Most variables that are not constants will follow this convention, with some exceptions. The names of variables that are constant, declared with the const keyword, are typically written in all uppercase.

Now we should understand what scopes are to understand the differences between variables “var”, “let”, and “const”.
JavaScript has three different keywords to declare a variable, which adds an extra layer of intricacy to the language. The differences between the three are based on scope, hoisting, and reassignment.

Var- Function scope, Hoisting (+), can be Reassigned
Let-Block scope, Hoisting (-), can be Reassigned
Const-Block scope, Hoisting (-), can NOT be Reassigned

And what should we use?
A commonly accepted practice is to use const as much as possible and let in the case of loops and reassignment. (However, you can use whatever you want.)

What is Scope?
Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript. The two types of scope are local and global:

1. Global variables are those declared outside of a block 2.Local variables are those declared inside of a block For example, If I write code here with var(or let) I can change the variable’s value for example in function. Look,

And If I run this code,
it will bring
1.

1. 

3.

So, why it is “mermaid”, “werewolf “and again “mermaid?”
_
Explanation._
Because first I have created variable “species” and assigned it the value “mermaid”. Then I created function “someThing” (I will explain functions in my next post). Then after the function I alerted “species” outside the function. JavaScript went above after reading it, ignored the function because I didn’t call it. It found variable “species” and gave the value I have assigned to it and it was obviously “mermaid”. After that I called the function, so it didn’t ignore the function and reassigned the value “werewolf” to the variable “species”. Basically. It changed the value. Then I alerted “species” again without calling the function, so it again returned to the first variable “species” which value was “mermaid”.
So, this means that we reassigned the value of variable in the function.

Hoisting
In most of the examples so far, we’ve used var to declare a variable, and we have initialized it with a value. After declaring and initializing, we can access or reassign the variable.
If we attempt to use a variable before it has been declared and initialized, it will return undefined.
For example;

It returned undefined because we alerted x before we created x variable.
However, if we omit the var keyword, we are no longer declaring the variable, only initializing it. It will return a ReferenceError and halt the execution of the script.

If we write like this, it will return error.
The reason for this is due to hoisting, a behavior of JavaScript in which variable and function declarations are moved to the top of their scope. Since only the actual declaration is hoisted, not the initialization, the value in the first example returns undefined.
Constants
Many programming languages feature constants, which are values that cannot be modified or changed. In JavaScript, the const identifier is modelled after constants, and the values assigned to a const cannot be reassigned.
Since const values cannot be reassigned, they need to be declared and initialized at the same time, or will also throw an error.
Example.

It will no show anything or it will return an error because the variables which are created by const cannot be changed.