Let's imagine you and your friends are moving to a city for your new job. Both of you have packed the necessary items that would be needed initially in the new city. You have packed your bags with labels, keeping in mind which item is in which bag. However, your friend has just mixed up all the things and thrown them into the bags. On your first day of the job, both of you start getting ready in the morning to reach the office on time.
Now, what will happen? Your friend won't remember which bag the required item is in. If he had labeled everything, it wouldn't be a mess for him.
So, think of a JavaScript variable like a box used to store things in real life.
How to declare the variables?
Javascript has three keywords used to declare variables. These are:
let
const
var
Declaring a variable with let keyword
let is used to declare variables whose value might change later.
Example:
let count = 10;
console.log(count); // 10
count = 20;
console.log(count) // 20
In the above example, the value of count the variable changes from 10 to 20.
Declaring a variable with the const keyword
const is used to declare such variables, whose value is initialized once at the time of declaration and cannot be changed later.
Example:
const count = 10;
console.log(count); // 10
count = 20; // Error: Uncaught SyntaxError:
// Identifier 'count' has already been declared
Before using const, make sure that the value of the variable will not change.
Declaring a variable with the var keyword
var is an old way of declaring variables, which has been replaced in modern JavaScript by let and const.
var count = 10;
console.log(count); // 10
count = 20;
console.log(count) // 20
The value can also be initialized/updated later as seen in the above example.
Rules for variable names
- Should start with a letter,
_ or $ . Cannot start with a number.
const name = "Ashish";
const $age = 20;
const $gender = 'M';
const 1age = 10; ❌
const first name = "Ashish"; ❌
- Only Letters, Numbers,
_, and $ Allowed
const first_name = "Ashish";
const profileLink1 = 'https://www.ashishkumarsaini.dev';
const profileLink-2 = 'https://linkedin.com/in/devaksaini/'; ❌
const value = 10;
const valuE = 20;
const VALUE = 30;
console.log(value); // 10
console.log(valuE); // 20
console.log(VALUE); // 30
What are datatypes?
We understand that there are boxes to store something, which we call variables. But what are we going to store in that box?
Imagine you have a box where you store something, like apples.
The box → is the variable
The label on the box → is the variable name
The item inside the box → is the value
Here, apple is a datatype. Similarly, we can store multiple types of things in the boxes.
In JS, we call them datatypes.
There are two types of datatypes:
Primitive Datatypes
Non-primitive Datatypes
Primitive Datatypes
Think of a primitive data type as simple values stored inside the variable. Primitive datatypes are immutable, meaning their value can be replaced but not changed directly.
Note: You might get confused here about the immutability of the datatype.
Here we are talking about the immutability of datatype not variable. Variable themselves are mutable.
You cannot alter the number 5 to make it 6. Instead you replace the value of variable containing 5 to 6.
let a = 'apple'; // the value 'apple' will always
// be 'apple'. datatype is immutable
a = 'orange'; // new value 'orange' re-assign to
// variable. variable is mutable
There are multiple primitive datatypes:
Number
Used to store numeric values (integers or decimals).
const count1 = 10;
const count2 = 2.5;
const count2 = -10;
console.log(count1); // output: 10
console.log(count2); // output: 2.5
console.log(count2); // output: -10
console.log(typeof count1); // 'number'
String
User to store text values.
const text1 = 'Hey, this is a text';
const text2 = `2 + 3 = ${2+3}`; // template literals
console.log(text1); // output: 'Hey, this is a text'
console.log(text2); // output: '2 + 3 = 5'
console.log(typeof text1); // 'string'
Boolean
Use to store true or false.
const isRegistered = true;
const isLoggedIn = false;
console.log(isRegistered); // output: true
console.log(isLoggedIn); // output: false
console.log(typeof isRegistered); // 'boolean'
BigInt
Used to store large numbers beyond the number limits. Adding n to an integer literal makes it BigInt. It is used to represent numbers larger than Number.MAX_SAFE_INTEGER
(2^53 − 1 → 9007199254740991).
const count = 123456n;
console.log(count); // 123456n
console.log(typeof count); // 'bigint'
Undefined
Undefined is defined as having no value.
let sum;
console.log(sum); // output: undefined
console.log(typeof sum); // 'boolean'
Null
Null is defined as having an empty value.
let count = null;
console.log(count); // output: null
console.log(typeof count); // 'object'
What is the scope in JS?
Scope defines where a variable can be accessed in a program.
Real World Analogy:
Types of scope:
Block scope (let and const): Variables that are declared in any block or we can say inside any {} (curly braces).
Function scope: Variables declared inside a function can only be used inside that function.
Global Scope: Variable which are declared outside of a block or function scope. It will be accessible to all functions and blocks.
_________________________________________________________________
| const name = 'Pankaj'; // global variable |
| const age = 25; // global variable |
| |
| if(age == 25) { |
| |
| ---------Block Scope----------------- |
| | | |
| | const isSubscriber = true; | isSubscriber will only |
| | console.log(isSubscriber); // true | accessible inside this |
| | | block |
| | | |
| | console.log(name); // Pankaj | name is accessible. |
| | | as global variable. |
| -------------------------------------- |
| |
| } |
| |
| |
| function sum() { |
| |
| -------Function Scope----------------- |
| | | |
| | const isVerified = false; | isVerified will only |
| | console.log(isVerified); // false | accessible inside this |
| | | function |
| | | |
| | console.log(age); // 25 | age is accessible. |
| | | as global variable |
| -------------------------------------- |
| |
| } |
| |
| |
| console.log(name); // Pankaj |
| console.log(age); // 25 |
| |
| console.log(isSubscriber); ❌ Uncaught ReferenceError: |
| isSubscriber is not defined |
| console.log(isVerified); ❌ Uncaught ReferenceError: |
| isVerified is not defined |
| |
-----------------------------------------------------------------
Variables and Datatypes are the fundamental topics to learn before starting learning any language. Understanding and practicing the topics that we have covered in this blog will help you with further topics.
Assignment for practice:
Open the console in the devtools of any browser by right-clicking on any page (in most of the browsers, ex: Chrome) and selecting the Inspect option.
Try to create the variables mentioned below:
name
age
isStudent
Try to play around using let, var, and const to declare variables and changing the declared type from var -> let, let -> const, and observe the behaviour changes of each declaration type.
Also, try to put them in a block and access those variables outside the block to see the errors in real-time.
Follow this series to learn more about Javascript!
