What will we Study?

So, In this blog we'll learn about the following topics

• What are Variables? Why Variables?

• Variable Declaration

• Primitive Data Types

• A little bit about scope

Whole blog has excellent set of examples and a beginner friendly language to make sure you understand the concepts well

Sit back relaxed and have a tea

Quick talk about Hoisting

Before jumping into Variables, let's understand what is hoisting.

Hoisting in JavaScript is a behavior where some variables and functions can be used before even getting declared.

Like think about it isn't it quite interesting to know the answer even before reading the question? That's hoisting!

What are Variables? Why Variables?

What are Variables?

In very simple words, Variables are like containers that are named by the programmer. They contain some kind of values.

This is just like a box that contains an item you ordered from flipkart :)

Why do we need them?

Let's say we have got some data and we have to use it multiple times then tell me one thing that will you use call that whole data all the time?

Let's have an analogy of what i am asking so i am asking that if you have to carry your laptop to anywhere will you carry it in your hands or use a bag?

Obviously we'll use the bag right?

That's why we need variables we can't and we should not type that data each time.

Declaration of Variables

Variables can be declared by 3 ways, more specifically keywords. These are:

1. var

• Old way of declaring variables, not recommended but still in JS for backward compatibility.

• The variable value can get changed here.

• This guy supports hoisting which means no matter when it is declared it can be used all over the code. Sounds great right? Trust me this is the reason why it isn't used.

console.log(name) // undefined

var name = "Itachi Uchiha"

console.log(name) // Itachi Uchiha

name = "Madara Uchiha"

console.log(name) // Madara Uchiha

• Can you see we can use the variable even before its declaration. How is it even possible? The answer is pretty simple the variable is getting hoisted.

• But can you see in the first log we are getting undefined imagine writing code in that area. A single undefined will cause the whole code to fail that's why this behavior of var is not desired.

2. let

• Newer way to declare variables, recommended to use for those values who'll change in future.

• The variables get hoisted here but they remain in a Temporal Dead Zone (TDZ) but not get initialized which prevents any kind of error that we faced in the last case.

console.log(name) // ReferenceError: name is not defined

let age = 18

console.log(name) // 18

age = 19

console.log(name) // 19

3. const

• one more way to declare variables, recommended to use for those values who'll never change in future.

• Just like let the variables get hoisted here but remain in TDZ.

console.log(name) // ReferenceError: name is not defined

const name = "Itachi Uchiha"

console.log(name) // Itachi Uchiha

name = "Madara Uchiha"

console.log(name) // Error: TypeError: Assignment to constant variable.

Conclusion:

The bellow table will help you understand the difference between Var, Let and Const

• One more thing, Var initializes with the value of undefined whereas let and const don't initialize they remain in the TDZ.

Data Types

• it wouldn't be wrong if i call Data Types the most important topic of whole JavaScript.

• Basically, Data Types are just categories of data. We use them for a better and predictable code and interpreters use them to understand the specific functions to apply on the data.

• Data Types are majorly of 2 Types: Primitives and Non-Primitives

• In this blog we'll be focusing on Primitive Data Types. I'll make separate blogs for Non-Primitives.

Primitive Data Types

These data types are the most basic and immutable (Can't change once made though the variable can be reassigned but without reassigning they can't change).

There are 7 types of Primitive Data Types

1. Strings

• Enclosed in single or double quotes or backticks ('string', "string", `string`).

• Used to represent textual data.

const name = "Ved Pandey" // This is a string

console.log(name) // Ved Pandey

2. Numbers

• Used to represent numeral data.

• Includes many sub-parts like: Integer, Float, Infinity, -Infinity, NaN.

let age = 15 // This is a Number

console.log(age) // 15

3. Boolean

• Used to represent boolean data (true / false).

• Only two values: true or false

let isDev = true // This is a Boolean

console.log(isDev) // true

• There are some values which are not boolean but are falsey or truthy (false or true when converted into Boolean)

• Falsey Values: false, 0, -0, 0n, "", null, undefined, NaN.

• Truthy Values: All values except the upper listed are truthy.

4. Null

• Represents Intentional Absence of data.

let empty = null // This is a null

console.log(empty) // null

5. Undefined

• Represents Un-Intentional or Default Absence of data.

let gf = undefined

console.log(gf) // undefined - Always single :(

6. Symbol

• Unique value used to uniquely identify an object (a primitive data type).

• I'll recommend you to stay away from this Data Type if you are a beginner.

const trait1 = Symbol('Single')
const trait2 = Symbol('Single')

console.log(trait1 === trait2) // false, because Symbol always have a unique id under the hood

7. BigInt

• Used to denote integers beyond safe integer limit of JS (-(2⁵³ - 1) to 2⁵³ - 1, inclusive).

• I'll recommend you to explore but not go in do much depth of it.

const wantsMoney = 69n

console.log(wantsMoney) // 69n

Scope

In JavaScript, Scope defines the accessibility of variables and functions in a particular part of your code.

An analogy about it is that as you know we all can visit the local roads no one is denied access there but for VIP roads you need access. Scope is somewhat like similar to that.

A practical example of this would be a function but till now you don't know about it so that's it for scope here.

We'll surely discuss about scope in any other blog it was there just to give you an exposure that yeah something like this is there in JavaScript.

Where to go next?

You can check out Non-Primitive Data Types from here or you can have some fun with primitives ones the choice is yours enjoy whatever you want.

Hope this helped :)