Variables and Datatypes in JavaScript
In this blog we're going to learn about what are variables, why we need them, what are datatypes, different types of them , difference between var, let & const etc.
What are Variables?
A variable is that who stores value. It's same like in mathematics but here the only difference is it can store anything not only number. Think of it like this, a container storing iphones as a value. Another question may arise, Why we need them? Variables are very fundamental and core part of any programming language not only JS we have variables in every programming language, the need of variable is they store data. So, every time we don't have to use the value we can just give the reference of that value via variable.
How to Declare Variables
In JavaScript, we can declare variable in three different ways.
var : We can declare variable using var keyword we simply have to write var then the variable name and then assigning value into it using assignment operator (=). You are allowed to change the value of variable declare via var in future if need arise.
let: We can declare variable using let keyword also, we simply have to write let then the variable name and then assigning value into it using assignment operator (=). Here also you are allowed to change the value of variable declare via let in future if need arise.
const: We can declare variable using const keyword. The same process here but const stands for constant means ones the value is assigned to the variable declare via const keyword then you cannot change it.
Let's see how the syntax looks like:
//variable using var keyword
var country = "India";
console.log(country);
//variable using let keyword
let sports = "Soccer";
console.log(sports);
//variable using const keyword
const name = "Vishal";
console.log(name)
-------------------------------------------------------------------
OUTPUT:
India
Soccer
Vishal
Basic Difference between var, let, const
You might have thought that if var and let are doing same work what's the difference between them. Let's understand the difference but for that difference first you need to understand how javascript works internally
Internal Working of JS
Whenever you execute a program of javascript a series of things happens lets understand them.
First the Global Execution Context is created.
Inside this, all the global variable are assigned a memory.
The memory is just assigned, your computer didn't know what value will come in this variable.
So initially all the variable are declared but not initialized.
See this diagram for better understanding:
Now since you know the execution process of JS program let's understand the difference between let, var & const.
Code with var:
age =32;
console.log("age:", age);
var age;
console.log("name:", name);
name = "Dev"
console.log("name:", name)
var name;
-------------------------------------------------------------------
OUTPUT:
age: 32
name: undefined
name: Dev
So, how it happened how this code is accessing value which is not declared yet, and working fine with age but giving undefined for name. See this memory phase & execution diagram to understand this clearly.
let's write the same code for let
age =32;
console.log("age:", age);
let age;
-------------------------------------------------------------------
OUTPUT:
ERROR!
/tmp/syfbob4zSc/main.js:1
age =32;
^
ReferenceError: Cannot access 'age' before initialization
Now here Error, Yes that's the difference between var and let
Let's understand this now
let crates a temporal Dead Zone(tdz), means if you declared let variable in line 3 either you could initialize it in line 3 itself or below it.
You cannot initialize let variable before it's declaration.
let creates a tdz, in that tdz , if any code try to access let variable in tdz it will throw error.
The same thing also happens with const variable.
Another thing to know about const that you are not allowed to only declare const variable. You have to do both in the same line declaration and initialization.
Datatypes in Javascript
In Javascript we can divide datatypes into two categories, Primitive & Non-Primitive in this blog we are going to learn about Primitive datatypes in JS.
Primitive Datatypes in JS
Javascript have 7 primitive datatypes, but we are only going to discuss the major 5 here
string: Represents textual data enclosed in quotes.
number: Represents both integer and floating-point numbers, including special values like
InfinityandNaN.boolean: Represents a logical entity with only two possible values:
trueorfalse.null: Represents the intentional absence of any object value.
undefined: Represents a variable that has been declared but not assigned a value (see let and var examples ).
You can use typeof to find out the type of the datatype.
const name = "Dev";
console.log(name);
console.log(typeof name);
const age = 22;
console.log(age);
console.log(typeof age);
const isAdult = true;
console.log(isAdult);
console.log(typeof isAdult);
const nullDatatype = null;
console.log(nullDatatype);
console.log(typeof nullDatatype);
const undefinedDatatype = undefined;
console.log(undefinedDatatype);
console.log(typeof undefinedDatatype);
-------------------------------------------------------------------
OUTPUT:
Dev
string
22
number
true
boolean
null
object
undefined
undefined
NOTE: typeof null is not null it is object (this is a very famous quirk of JS).
Scope
Scope is Javascript is a concept which explains us about accessibility, visibility of variables functions and objects. It means that if we have declared a variable in global scope where we can access it, if we have declared an variable in function scope where we can access it. There is global scope, function scope (code written inside function), object scope(block- scope) etc.
Let's directly jump on code to see the scoping concept
let name = "Dev";
console.log(name)
if(name !== "Vishal"){
let previousName = name;
name = "Vishal"
}
console.log(name)
console.log(previousName)
-------------------------------------------------------------------
OUTPUT:
Dev
Vishal
ERROR!
console.log(previousName)
^
ReferenceError: previousName is not defined
See, here what happened we have declared name variable in global scope, so we can access it inside if block but the variable which is declared inside if block is not accessible outside. This is what scoping is where we can access and where we can't this was all about scoping .
Conclusion
Variable and datatypes are the very fundamental part of javascript. Learning them from the very basic as we have learnt in this blog we have seen the memory phase the execution phase are very important to understand how they work internally. It allow you to predict the behavior of javascript.
