In your surrounding, all things takes some space like you keep notebooks, pens and laptops in your bag , you keep your shoes in some type of storage case, you keep your clothes in closets or wardrobes. so in JavaScript variables does the exact thing like the bags, storage case or wardrobes are doing.
variables are a container that stores something for good like you can store something in variables and use them as many times as you want.
Basically these are used to store information in the memory.
Anyhow you'll build your own website one day for sure. So you want to store a user's details (like name, password, state...etc) , firstly you have to store them in the memory in an optimized way that's why we use variables.
In Javascript, variables are basically 3 types.
1.var
2.let
3.const
The steps of using variables are:
create ===> store ===> use ===> modify
we've to write variables names in camel case (like myFavLanguage, myPortfolio, userId....etc)
so lets start these 3 keywords one by one:-
1.const keyword
Const keyword is used when you'll never wants to reassign the variable, if you declared it once you can't change the value in future.
const accountName = "Nobita"
console.log(accountName); // Nobita
accountName is the name of the storage where we stored "Nobita". If you ever want to replace Nobita with something else it'll throw a type error.
const accountName = "Nobita"
console.log(accountName); // Nobita
accountName = "Doraemon"
console.log(accountName); // TypeError: assignment to constant variable
2.let keyword
unlike const, let keyword is reassignable. you can reassign as many time as you want.
let userNumber = 1234567890
console.log(userNumber); // 1234567890
just like above userNumber is the name of the container where you stored the user number. you can reassign it & this will work.
let userNumber = 1234567890
console.log(userNumber); // 1234567890
userNumber = 9887654321
console.log(userNumber); // 9887654321
3.var
var keyword is exactly like let keyword. it is also reassignable.
var accountPassword = "555555"
console.log(accountPassword); // 555555
accountPassword = "666666"
console.log(accountPassword); // 666666
We can access a variable inside it's scope like below we can use the globalNumber inside the function scope because we've declared this on the global scope. Basically we can't use a variable outside it's scope, so if we try to access the variable outside the function scope; it'll throw a reference error. The same goes for const and let.
var globalNumber = 111111
function () {
var funcNumber = "555555"
console.log(globalNumber); //111111
}
console.log(funcNumber); //ReferenceError: funcNumber is not defined
but we'll never use this in future. the reason behind this is called scope {}. if someone storing a value using var inside a scope then another developer came and he defines the same variable in a different scope then the first variable will also change.
if() {
var userName = "Dekesugi"
console.log(username); // Dekesugi
}
console.log(username); // Dekesugi
if() {
console.log(username); // Dekesugi
}
It doesn't work on the basis of scope that's why it doesn't have any control in block scope. But both const and let are blocked scope. They both will throw error if you want to access them outside of any block. That's why we use let keyword in stead of var.
| Keyword | Reassignable? | Scope |
|---|---|---|
const |
No | Block Scope |
let |
Yes | Block Scope |
var |
Yes | Function / Global Scope |
Datatypes
Now that we know how to create a variable so let's store in it.
Datatypes are just the type of data we stored in a variable. In JavaScript there are 8 basic datatypes among which 7 are primitive datatypes and one is non-primitive datatype.
Primitive datatypes
Primitive datatypes represents a single value and they are immutable. So at first let's observe the 7 primitive datatypes.
1.Number
Integers, float values are goes under number datatypes. infinity, -infinity, NaN (Not a Number) these are practically not numbers but they also goes under number datatypes.
const age = 21;
console.log(typeof age);
const fillInPetrol = 10.5;
console.log(typeof fillInPetrol);
console.log(typeof NaN);
console.log(typeof infinity);
console.log(typeof -infinity);
1.BigInt
Number datatype has maximum number of integer storing capacity is till 9,007,199,254,740,991 . Above 9,007,199,254,740,991 they came under bigInt datatypes.
we just have to use a 'n' after completing the number.
let bigBalance = 996348485263765943654n;
console.log(typeof bigBalance);
3.string
the set of characters that are written under single quotes('') or double quotes ("") are goes under string datatypes.
basically the recommanded syntax is using double quotes.
let single = 'I an single !!' ;
console.log(typeof single);
let mingle = 'I an mingle !!' ;
console.log(typeof mingle);
let pinCode = "759121"
console.log(typeof pinCode);
everything inside the double quotes javaScript treats them as string. Even though you write a number inside double quotes.
4.Boolean
Boolean datatypes only represents two possible values: true and false
const isDoable = true;
console.log(typeof isDoable);
const isImpossible = false;
console.log(typeof isDoable);
5.Null
null is a standalone value. It means this is intentionally empty.
let bankBalance = null
console.log(bankBalance); // null
here this means i have a variable named bankBalance but currently it has no value. we can re-assign the value later.
bankBalance = "7- crore"
console.log(bankBalance); // 7- crore
so think what will it's datatype be ?
Here we got something unexpected, the datatype of null is Object. This is the behavior of javascript however null is not an object. this is a value that we declare intentionally empty.
let bankBalance = null
console.log(typeof bankBalance); // Object
Another confusing question is null equals to 0 ?
Nope null is utterly different than 0. 0 is a number and it's datatype is also a number but null has no value it's completely empty.
console.log(null == 0); // false
console.log(null === 0); // false
6.undefined
When we only declared the variable but yet not assigned with some value then that's undefined. the datatype of undefined is undefined.
let collegeName;
console.log(collegeName); // undefined
console.log(typeof undefined); // undefined
7.symbols
The Symbol datatype was created in JavaScript mainly to solve one big problem:
How do we create a truly unique property key that won't accidentally conflict with someone else's property?
So we use symbols to create unique identifiers for objects.
let trafficLight = symbol("Red")
let trafficLight2 = symbol("Red")
console.log(trafficLight === trafficLight2); // false
console.log(typeof trafficLight); // symbol
Non-primitive datatype
Non-primitive datatype is also called as reference type. We can directly store their reference in memory.
They are basically 3 types:-
- Arrays
- Objects
- functions
Arrays
Let assume you have different brand of shoe collection, you have to store them inside variables. So you'll do like this:-
let shoe1 = "One8" ;
let shoe1 = "Puma" ;
let shoe1 = "Nike" ;
let shoe1 = "Adidas" ;
Imagine you have different brands more than these then we have to make more and more variables, it's basically more memory consuming and full of verbose; that's why in stead of storing them like this, you can store them in one variable. This is where the array data type plays an important role.
let shoes = ["One8", "Puma", "Nike", "Adidas"] ;
console.log(shoes); // [ 'One8', 'Puma', 'Nike', 'Adidas' ]
You can think it as a big container with multiple compartment. Each value stores in a compartment and all the compartment have an index number. You can take a glance at the diagram below.
In javascript, the arrays indexing starts from 0. So you can access each value using it's index:-
shoes[0] // One8
shoes[1] // Puma
shoes[2] // Nike
shoes[3] // Adidas
Object
object is the complex of all primitive datatypes we have read before.
let personalInfo = {
name: "Luffy",
age: 21,
aura: 9999999999999999999999999n,
isInRelationship: true
}
console.log(personalInfo); // {
name: "Luffy",
age: 21,
aura: 9999999999999999999999999n,
isInRelationship: true
}
Here we stored the object inside a let variable but inside the curly braces that's territory of an object. We can declare any datatypes (it can be a array or a function even if an object) inside the object.
In an object each primitive datatype have a key-value pair. We can access each key-value pair by . property with the key name.
console.log(personalInfo.name) // Luffy
console.log(personalInfo.age) // 21
console.log(personalInfo.aura) // 9999999999999999999999999n
console.log(personalInfo.isInRelationship) // true
Functions
It is a block of code that design to perform a specific tasks. Basically you can say that it's a wrapper in the set of instructions that we can reuse this as many time as we want.
Below is the syntax of a function.
function functionName(parameters) {
//here is the task you want
}
let's take an example:-
function addTwoNumbers(number1, number2){
return number1 + number2
}
const result = addTwoNumbers(3, 5);
console.log(result); //8
Scope in Javascript
Above i said something like function scope or block scope. So what are these ? let me explain:
Scope is basically an area of programme where a variable can be accessed.
There are basically 3 type of scope in Javascript:-
- Global scope
- Function scope
- Block scope
So let's move to the first one:
Global scope
A variable declared outside any function or block belongs to the global scope.
let name = "Syrex";
function greet() {
console.log(name); // Syrex
}
greet();
console.log(name); // Syrex
Those variables which are declared in a function scope they are accessable anywhere even inside a function. name was declared in the global scope so it is accessible anywhere.
Function scope
It is also called as local scope. Anything inside the function's curly braces({}) goes under function scope. If you declare a variable inside the curly braces of a function then this will only stay inside the function scope.
function greet() {
let message = "Hello";
console.log(message); // Hello
}
greet();
console.log(message); // ReferenceError: message is not defined
when you call the greet function the message variable is accessible inside the scope that's why the console.log is a success. If you directly try to access the message variable outside the function scope, then it'll throw a reference error.
Think the function scope like your private room:
"What's inside the room stays inside the room."
Block scope
A block scope is simply some code inside the curly braces (for, while, if). It is not accessible outside the braces.
if (true) {
let name = "Syrex";
console.log(name); // Syrex
}
console.log(name); // ReferenceError: message is not defined
Assume of all scope likes this:
_______________________________ X _______________________________
So, that’s a wrap! 🎉 We’ve covered the basic things you need to know about JavaScript data types and built a good foundation to move forward.
If I’ve missed something important, feel free to let me know on X (https://x.com/Likuuu_13). Always open to learning and improving!
Stay tuned for more JavaScript concepts.
Top comments (1)
There are 4 types of scope in JS - you've missed Module scope.