As the title is "What is variable in JavaScript?", we gonna talk about variables in JavaScript. Every high-level programming languages have variables.If we define variable in simple term, a variable is act as a container in which a value or a set of values is stored.But in this blog, we are going to learn about the variable in more detail.As always, I divided this blog into 6 sections.Please read them in order to the get the core concept of variables in JavaScript.This is the list of the sections:
- What is a variable?
- Statically Typed Language Vs Dynamically Typed Language
- Datatypes
- Declaring variables in JS
- Difference between var and ES6 let, const
- Immutable and Mutable
So lets dive in....
1. What is a variable?
As we defined the variable as a container for certain value or set of values. Actually it acts as the memory address where the value is stored.The value of a variable is always changing. There is something called const which is used to stored constant which never change after declaring it.We will talk about this later in this blog of course.
2. Statically Typed Language Vs Dynamically Typed Language
There are two types of programming languages based on variable declaration and one of them is 'statically typed language' and the other one is 'dynamically typed language' ( also called loosely typed language). Programming languages such as C, C++ and Java are statically typed languages where languages such as Ruby, Python and JavaScript are dynamically typed languages.May be you are thinking of what is statically typed language and dynamically typed language.A statically typed language is a language in which variable can store only one specific type of data (such as integers,decimal numbers, string, and boolean, you will know about them later in this blog). A language which can store any datatype is called a dynamically typed language.
// Statically typed language
// Java Syntax
int n1 = 8;
float n2 = 3.14;
double n3 = 34.5353524342343;
String str = "Statically typed language";
boolean flag = true;
// Variable n1 can only store integer type and like this n2 can only store float.
// Dynamically typed language
// JavaScript Syntax
var n = 8;
n = 34.334;
n = {
name: 'Mike',
age: 30
}
let str = "Dynamically typed language";
const flag = true;
// Variable n can retain any type of values
3. Datatypes
We can generally divided datatypes into two different groups.The first one is primitive datatypes which are number,string,boolean,undefined and null. Array, function, obejct, date and others are all objects.
Number
In statically typed languages like Java has many different datatypes(int, float, double, long and short) to represent numbers.But in JS, there is only one datatype for numbers and it is number itself to represent integers and decimal number.
// Numbers in JS
var integer = 8;
const float = 34.334;
let double = 34543.4543545;
String
As it name, string is a group of characters( in simple words string is just text). This datatype is one of the important because you are going to interact with strings in everyday use apps or websites.You can wrap a string value within single quote('single quote'), double quote("double quote") and the new one, which is part of ES6(ES 2015), is template literal(template literal).
// Strings in JS
var doubleQ = "double quote";
const singleQ = 'single quote';
let tempLit = `template literal`;
Boolean
Boolean has only two values, true and false. Boolean is mostly used in conditional statements where we check for some conditions which may return either true or false. You will encounter with boolean in many programming. There are some beginners who put boolean values in quote like string which is wrong. Boolean values do not require any quote or template literal. We can also check boolean values for expressions. We can sometime call truthy the value which are true and falsy for the false value. All values are truthy except the only falsy values which are false,0,NaN,0n,null and undefined.
// Boolean in JS
var truthy = true;
const falsy = false;
if(5+6) // this expression will be true.
if("") // this expression will be false.
Undefined and Null
Sometime people think undefined and null are similar where undefined is undefined datatype and null is an object. If a new variable is declared without any data assignment then it is undefined. We can assign null as a value for a particular variable.
// Undefined and Null in JS
var integer; // Now the variable 'integer' contains undefined
const float = 34.334;
float = null; // Now the variable 'float' contains null
Object
JavaScript has special datatype called object. If we define object in simple term then an object is just a set of (key:value) pairs. Most of the functionalities supported by JS are objects. All of the above datatypes are fundamental datatypes that means that they are unavoidable in JS. In value from the key-value pair of an object can be any of the above datatype including object itself. As we know that null is an object.
// Objects in JS
var briefBio = {
name: 'John',
age: 45,
married: true,
job: 'Full Stack Web Developer'
}; // This is a simple object
const array = ['Hello',53,true]; // This is an array
function age(yearOfBirth,currentYear){ // This is a function
console.log(currentYear - yearOfBirth);
}
4. Declaring variables in JS
We have some constraints in declaring variables. Every developer should follow these constraints which is part of best practices. Best practices allow developers to write clean code, easier to debug and collaborate on a project and persist consistencies in codes of different programmers.
- Variable name should always start with letter or $ , we can't use anything else for the start of variable name.
- Variable name should be meaningful which is best practice. You can give a variable name which is not associated with the value going to in it. This will later may create difficulties for you and any other programmer who get your project.
- Variable should be one word. We cannot use spaces in variable name but if your variable name have more than one word you can use underscore(_) instead of space to separate the words. Your variable name should not be greater than 2 or 3 words.You can also use camel casing where the starting letter of the variable name will be small and the starting letter of the remaining words in the variable will be capitalized(
var favoriteColor = 'light green';). - You cannot use JavaScript keywords(
let,class,function,true,etc.) as variables' name. There are some reserved words in JS which are also not available for variable name declaration.
Photo from ECMAScript International
// Variable declaration in JS
let $favoriteFood = 'light foods'; // variable name starting with $
const lucky_number = 93; // variable name using underscore
var briefBio = { // Camel Case
name: 'John',
age: 45,
married: true,
job: 'Full Stack Web Developer'
};
5. Difference between var and ES6 let, const
The keyword let and const are arrived in JS in 2015 when ECMAScript announced it ES6(ES 2015). Before that time most developers used var to declare variables. There are also some people who still use var today. The main difference between var and let is that when we declare a variable using var keyword, we can declare a variable with the same name as much as we want. This make inconsistencies in code which may become error prone. Using var keyword we can declare as much variables with the same name as we want. Where the let keyword does not allow this fault. We can declare only a variable with a particular name only once with let keyword. If you try to declare a variable with the name which has already been taken by some other variable, browser's JS engine will generate error on the console. The remaining const keyword is same as the let keyword except that the value of the variable which is declared using const cannot be changed once declared. Where the value of the variable declared using let keyword can be changed by assigning the value to the variable.
// Difference between var and ES6 let, const in JS
var $favoriteFood = 'light foods';
var $favoriteFood = 45; // This is allowed with var keyword
let lucky_number = 93;
let lucky_number = 'Junk food'; // This will generate error
6. Immutable and Mutable Datatype
What are immutable and mutable datatypes? Immutable means that we cannot change the value of a variable explicitly i.e. if we want to change the value of a variable, then we can assign the new value using the assignment operator(=). Mutable means the value of a variable can be changed explicitly.Lets see the code below.
// Mutable
let person = {
name: 'Miracle',
age: 23
}
let arr = [34,55,89,00,23];
arr[3] = 83;
person.name = 'Mike';
/*
After executing the above statements the person object will be something like below
The new value of person object
person = {
name: 'Mike',
age: 23
}
The new value of array
arr = [34,55,89,83,23];
In immutable we don't need to assign the whole object to change one single value like the below
person = {
name: 'Mike',
age: 23
}
*/
//Immutable
let job = 'teacher';
job = 'Developer';
let retirement = 60;
retirement = 66;
/*
After executing the above statements the job variable will be something like below
The new value of job variable
job = 'Developer';
The new value of retirement variable
retirement = 66;
*/
Finally, we are now at the end of this blog and I hope all of you guys learned some new things about variables in JavaScript and enjoyed this post. Please let me know my needs in writing blogs if you found during this blog via comments. Thank you for reading through out the end. Have a great day!:);)
Top comments (0)