All About variables In JavaScript

Variables are named containers that store data of all forms in any programming language.A piece of information that we might reference multiple times can be stored in a variable for later use or modification. In javaScript the value stored in these containers can be of any datatype (string, integer or object). To use a variable there are two major parts first is declaring a variable and the other one is defining the variable.

Naming a variable:

All the variable in JavaScript must be unique and the best way to make them unique is to name them.These unique names are called identifiers.But the naming is not that simple there are few rules that we need to keep in mind while naming a variable.The rule are :

1. Name can contain letters, digits, and symbols (only underscore & hashtag).
2. Name must begin with a letter. We can’t start the name of a variable with a number .
3. Names are case sensitive so A and a both are different variables.
4. We can’t use the reserved keywords (like let,class,function etc.) as the name.

Scope of variables:

Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript.There are two type of scopes in JavaScript

1. Global Scope: A variable declared outside of any functional block is known as global variable and these variables have a global scope which means they will be accessible through out the code.
2. Local Scope: A variable which is declared within a function it is called a local variable to that function and that variable will have a local or functional scope which means that variable can be accessed from within the function.

Here “gVar” is the global variable and can be accessed within the function as well as throughout the code while “lVar” is a local variable to the function that can only be accessed within from the function.

Automatically Global

When a variable is assigned a value but not declared the it will automatically be a global variable. If the variable id within the function still it will be treated as a global variable only.

Declaring machines of JavaScript:

The declaration of variables where at first could have been only done using the keyword Var. As we advanced in time after 2015 ES6 (ECMAScript 2015) introduced us with two more keywords which were Const and Let.

Let’s know more about these keywords

Var is one of the oldest keywords that can be used to declare variables in javaScript. We just have to simply use the keyword var and add the name of the variable after it. Let’s have a look at how we can do it .

Here x will store 1 , y will store 2 and likewise z will store 3 and when we print the output we are getting 3. The variable can be redeclared and updated. we can declare the same variable again and again in the same scope and we won’t get any error.

Issues with var:

Let’s see the example below

here what is happening is that since times > 3 the variable greeter is redefined and gives the output “say Hello instead”. Now it is ok if we want the variable to be changed if the condition is true but in cases where we don’t want the change to happen outside the block of the function it will be a big issue.

All these issues gave a place for better variable declaration keywords which are strong and such keywords got introduced in the ES6 Javascript. they are Let and Const.

Let is a now preferred for variable declaration over Var. The reasons of Let being superior are pretty simple. Let is block scoped which means if a variable is declared with a pair of parenthesis{} using Let then it will have a scope within the parenthesis.

As we can see the variable outputs “say Hello instead” while it is within the function while outside the function even if the condition is true we see the output to be “hey hi”.This a speciality of Let. Let can’t be re-defined within the same scope it can only be updated. As shown in the example below when we are trying to update the variable in the same scope we have

however if we try to re-define the variable in the same scope it will throw an error

but if if try to re-define the variable in a different scope we won’t be getting any error.This happens because when we change the scope the instances will be treat as different . Let’s see in the example below

So all these make Let better than Var and we don’t have to bother about repeating a variable name again as scrolling up and down thousands of lines of code will be a tough task to do.

Const is another keyword which can be used to declare a variable. The variable declared using the Const keyword maintain a constant value. Const is more or less similar to Let keyword.

Const also has a block scope just like Let which means it will be accessible only within the block of declaration.Const can be re-defined within the same block but it can always be updated.

So to sum up the difference between Var Let and Const we can refer to the table :

Hoisting:

Hoisting when we define it in strict terms means variables and function are moved to the top of our code irrespective of where we are defining them.But actually this is not the complete truth . What actually happens is that the variables and functions stay in there places and are not moved anywhere.Then what actually happens?

When the code is compiled the variable and function declarations are store in the memory and all the functions are made available while the variables are made undefined.

Let’s understand this with an example

when the code is being compiled the code knows that there is a function named “add” declared below and a variable named “varOne” also declared below and it just stores the declarations in the memory.So what it does is that it let’s us output the function which means “the function is made available irrespective of position of call and declaration” while the variable is made undefined and not error because the it knows that the variable has been declared below which means in the case of variables only declaration is hoisted while in case of function initialization is hoisted as well.

Note that var can be hoisted in a global scope while let and Const only support block level hoisting.That means while Var variables are initialized with undefined, Let and Const variables are not initialized.

To understand hoisting in better way you can refer to this video it has been beautifully explained.

Strict Mode:

Introduced in the ES5 this is a literal meaning of the keyword “Strict”. Using this mode will not allow use to write lousy code and syntax as it throws error when we are using undeclared variables.

Declaration of Strict Mode:

Strict mode is declared by adding “use strict”; to the beginning of a script or a function.Declared at the beginning of a script, it has global scope (all code in the script will execute in strict mode).

We can also declare it at the beginning of any function and it will have just the functional scope to it.

Why Strict Mode?

Strict code helps us write better and cleaner code in Javascript by changing previously accepted bad syntax into real errors.As an example, in normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable.

What is forbidden in Strict Mode?

1. Use of variables without declaration is not allowed.
2. Use of object without declaration is not allowed.
3. Deleting a variable (or object) is not allowed.
4. Deleting a function is not allowed.
5. Duplicating a parameter name is not allowed.
6. Octal numeric literals are not allowed.
7. Writing to a read-only property is not allowed.
8. Writing to a get-only property is not allowed.

You can add more or just ping me up to discuss anything that pops up in your head with me here .

https://rader30.me/