Forem: Raj Kishor Shaw

== vs === in JavaScript

Raj Kishor Shaw — Tue, 14 Feb 2023 08:22:00 +0000

Overview

In javascript, the equality operator is used to determine whether two values are equal. The main difference between the "==" and "===" operators in javascript is that the "==" operator does the type conversion of the operands before the comparison, whereas the "===" operator compares the values and their data types.

Scope

In this blog, we will learn about the "==" and "===" operators in JavaScript and will try to understand both of them with examples.

Introduction

In our day-to-day life, we all face multiple situations where we need to compare two things. For example, we all use Twitter and Discord. When we visit the app, we see a login page asking for a username and password, where we need to add our details. Once we submit the details, the website goes through its database and compares our provided details with the details available. It permits you to log in if the details match; otherwise, it doesn't. This is one of many cases where two items are compared, and the outcome is used to determine the next course of action.

In JavaScript when we need to compare two values and decide whether values are equal or not we use the following operator

Loose equality("==")
Strict equality("===")

Note - Equality operators return a boolean value.

Which operations we choose depends on what sort of comparison we are looking to perform.

Double Equal (==) vs Triple Equal (===)

What is "==" operator ?

The "==" is also known as the loose equality operator. The main purpose is to check whether its two operands are equal after type conversion. It returns true if both the operands are of the same value or if both of them are of different types then either of them will be converted to the data type of the other operand and have the same value. It will return false if both operands have different values.

Note: The "==" operator does a type conversion of elements before comparing them.

Okay, let's first understand, what is type conversion ?

When comparing two operands, the "==" operator tends to transform either of them into the other operand's type if they are not of the same data type before performing a loose comparison of their values.

Type conversion is the main difference between the "==" and "===" operators in JavaScript.

Let's understand it with an example:

const x=21;
const y='21';
console.log(x==y); //true

In the above example, x is a number and y is a string. The "==" operator first converts the y value to a number type and then it is compared to x. Since both the values are the same it returns true.

What is the "===" operator?

The "===" is also known as the strict equality operator. It compares both the values of the operands without performing type conversion. If the values have different data types, the values are considered unequal. If the values are of the same data type and have the same value then they are considered equal.

Let's understand it with an example:

const x = 2;
const y = 2;
const z = '2';
console.log(x===y); //true
console.log(x===z); //false

In the above example, x and y are numbers but z is a string value. So, after a comparison of x and y, it is returning true but as z is a string it is returning false.

Few Examples of both operators:

Example 1: Comparing a number with a string

const x= 5;
const y ='5';
console.log(x==y); // true
console.log(x===y); // false

Example 2: Comparing objects

const name1 = { name: "Raj" }
const name2 = { name: "Raj" }
console.log(name1==name1); // true
console.log(name1=name2); // false
console.log(name1===name1); // true
console.log(name1===name2); // false

In the above example, the first output returns true because name1 and name1 refer to the same instance whereas the name1 and name2 return false because it refers to different instances. Never compare the objects with the "==" operator as different objects with the same value are not equal.

Example 3: comparing boolean and number

console.log(true == 1) // true
console.log(true === 1) // false
console.log(false == 0) // true
console.log(false === 0) // false

In the above example, the first operand is of boolean type and the second one is of number type. The "==" operator does the type conversion of a number into a boolean (as 1 is considered true and 0 is considered false in boolean).

Example 4: Comparing null and undefined

const x = null;
const y ;
console.log(x==y); // true

In the above example, it returns true because the comparison of null and undefined is true.

Example 5: When operand values are NaN(not a number).

const x= NaN;
const y= NaN;
console.log(x==y); // false
console.log(x===y); // false

In the above example, after comparing both two NaN values it returns false because the equality operator treats NaN as unequal to every other value including itself.

To gain confidence in this topic practice all the above examples.

Conclusion

The "==" and "===" operators are used to check the equality of two operands.
The "==" is the loose operator and the "===" is the Strict operator.
The "==" does the type conversion before checking and the "===" does not do the type conversion before checking.

It's generally considered a best practice to use the strict equality operator "===" when making comparisons in JavaScript, as it avoids unexpected behavior that could be introduced by type conversion.

'==' vs '===' in JavaScript

Raj Kishor Shaw — Tue, 14 Feb 2023 07:36:30 +0000

As a developer many times, we see other developers using Strict Equality Operator(===) instead of Abstract Equality Operator(==) and wonder if there is really any major difference between the two? Let's deep dive in to see what's beneath them.

Strict Equality Operator(===) behaves similarly to Abstract Equality Operator(==) except no type conversion is done and the types must be the same to be considered equal.

Abstract Equality Operator(==) will compare for equality after doing any necessary type conversions.

The "===" operator will NOT do any type conversions, so if the two values are not of the Same Type "===" will simply return false.



'23' == 23       // true

'23' === 23      // false

" " == 0            // true

" " === 0            // false

0 == false        // true

0 === false       // false

null == undefined  // true

null === undefined  // false

Remember devs, if you want to compare equality between two values without any unnecessary type conversion, use Strict Equality Operator(===).

I hope now you know the difference between the two operators.

Happy Coding!

Sources:

MDN Web Docs
StackOverflow

This article is published w/ Scattr ↗️

Higher Order Functions

Raj Kishor Shaw — Tue, 25 Oct 2022 10:00:10 +0000

So, what are higher-order functions?

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

Example-Map, Filter, and Reduce

Map- It creates a new array by calling a function for every array element. It calls a function once for each element in an array. It does not execute the function for empty elements and does not change the original array.

Example-

Output-

The above example shows how easily we can get the desired result using the map function.

Filter-It creates a new array filled with elements that pass a test provided by a function.

Example-

Output-

Reduce- It executes a reducer function for the array element. It returns a single value and the function's accumulated result.

Example- for explaining this I will first show you how to get the result without reduce the function and then I will show you how you can get the same result with reduce function. Then will compare the two approaches.

output-

In line number 5, I used a normal approach and in line number 17 I used reduce function to get the same result.

In line number 17 you can see that I have used 'acc' it is used to accumulate the value and it serves the same purpose as 'sum' in line number 8.
Then 'curr' is in line 17. It is the current value that we are getting while iterating over the array. It has the same purpose as what 'arr[i]' is providing us in line number 8.

We can also user Map and filter functions at the same time.

Example-

Output-

We can also get the same result using *Reduce * function also.

Output-

This was all about Map, filter, and reduce functions. I have learned all this from the Namaste JavaScript series by Akshay Saini. If you want to fall in love with JavaScript then you should learn from this.

JavaScript Engine

Raj Kishor Shaw — Fri, 21 Oct 2022 09:00:35 +0000

No, It is not hardware it is just a software code that is present in every browser.
In this blog, I will talk about the JavaScript (js) engine.

JavaScript Runtime Environment(JSE)- Every browser has JSE in it. JSE consists of a Js engine that executes the JS code and it is also the heart of JSE. JSE contains a Js engine, API, callback queue, microtask queue, and an event loop.

Inside the Js engine, there are different steps for getting the output. The Js code that we write at first go for parsing. In the parsing step, our code is broken down into tokens like in the below image we can see that let, a, =, and 7 are broken down into tokens.

The code is then passed to a syntax parser the job of this is to take our code and broke it into Abstract Syntax Tree(AST).

Now let's understand the interpreter and compiler.

Interpreter- The job of the interpreter is to take the code and execute it line by line. It is fast.

Compiler- In this our whole code is compiled first even before execution and a new code is formed which is the optimized version of our code and then it is executed. The optimized code runs very fast. It is efficient.

Now, coming to the main part. When JavaScript was first invented by Brendan Eich, it uses an interpreter to execute the code. But modern browser like the V8 engine uses Just In Time(JIT) compilation. Which uses both interpreter and a compiler for code execution. Compilation and execution go hand in hand. Our AST goes to an interpreter and it goes for execution and at the same time compiles the code which is executed line by line by the interpreter.

In some engines, there is also AOT(ahead of time) compilation. It takes the code and compiles it before execution.

A memory heap is used for storing variables. A garbage collector(GC) is used for collecting garbage value. O is for optimization.
Garbage collection uses a mark and sweep algorithm for freeing memory.

At present V8 engine of google is the best engine for JavaScript.

I have read all this from the Namaste JavaScript series by Akshay Saini. If you want to fall in love with JavaScript then you should learn from this.

Closures in JavaScript

Raj Kishor Shaw — Fri, 21 Oct 2022 07:36:49 +0000

In this blog, I have told everything about closures.

What are closures?

Closures are a combination of a function and its lexical scope bundled together to form a closure.

A function along with reference to its outer environment together forms a closure.

Every function in JavaScript has its axis to its outer lexical environment i.e. access to every variable present in its parent environment. So even if this function is executed in some other scope it still remembers its outer lexical environment where it was originally present in its code. This is what closure is.

Example-

Line 3 to 5 along with its outer lexical environment forms a closure. The two parentheses used in line number 9 are used to call the inner function. The closure also doesn't follow any sequence. If we move line number 2 to after line number 5 then also inner function with its outer environment will form closure.

If we use the *Let * variable also then also it will give the same output.

If we give a parameter in line number 1 then also the inner function will print the parameter value because the inner function had formed a closure with its outer environment.

Even if the outer function is nested inside another function, then also inner function will have access to the variable of the outest function.

If we give a conflicting let variable on line number 12 then also it will print 10 because it has accessed the line number 7 variable.

But if we remove line number 7 then it will go deeper in the hierarchy and at last, it will to the global scope to resolve this let variable and it will print its value.

Advantages of Closures

Closures are the most beautiful and important part of JavaScript. It has many advantages.

It is used in module patterns.
It is used in function courring.
It is used in higher-order functions like memoize and ones.
The most important use is in Data hiding and encapsulation.

Data Hiding- Suppose we have one variable and we want to protect it. We don't want other functions and code to have access to this data. In other words, we can say that we want to encapsulate this data from other pieces of code.

Example-

In the above example, we can see that we have made a function and protected our count variable. No one from outside can have access to it.

To get access we have to add a return function in line number 3 and it will form a closure.
We can create a variable counter1 and call it to access to count variable.

Example-

If we create a new variable counter2 and call the counter function then it will create a new closure and the count variable will again start from 0.

Example-

In the above image, we can see that the first two output is from counter1 and the third one is from counter2.

If want to make this code good and scalable then we can do this which I have shown in the example below. I have created a constructor here. It will still form closure and our data is protected.

Example-

Disadvantage of closures- The major disadvantage of closures is that sometimes there can be over consumptions of memory in a closure because every time a closure is formed it consumes a lot of memory and sometimes those closed-over variables are not garbage collected before the program expires. If this is not handled properly then it may lead to a memory leak and may freeze the browser.

Garbage Collector- It is in the JavaScript engine to freeze or take the variables which are not used.

Garbage collectors and closures are related to each other.
In the below example, we can see that in line number 3, variable x and z both of them form a closure but when z is not used then in modern JavaScript engines line V8 it is garbage collected and freed from the memory. That is why it gives not defined when we try to access it.

Example-

This is all about closures. I have read all this from the Namaste JavaScript series by Akshay Saini. If you want to fall in love with JavaScript then you should learn from this.

Var, Let, and Const

Raj Kishor Shaw — Fri, 02 Sep 2022 12:33:27 +0000

We all have used var, let, and const variables many times in JavaScript but sometimes we all get confused about which is the best variable to use for a particular program. I am writing this blog to understand let, var, and const variables for helping someone to clear their basics regarding the same.

Var

It is the oldest keyword to declare a variable in JavaScript. The scope of it is global or function scope. Variables defined outside the function can be accessed globally and variables defined inside a particular function can be accessed within the function.
It can be updated and re-declared into the scope.

Example -

    function f() {
        var a = 7;
        console.log(a)
    }
    f();
    console.log(a);

Output-

7
ReferenceError: a is not defined

Let

It is an improved version of the var keyword. The scope of a let keyword is only block scoped. It cannot be accessible outside the particular block.
It can be updated but cannot be re-declared into the scope.

Example 1-

    let a =7;
    function f() {
        if (true) {
            let b = 9

            // It prints 9
            console.log(b);
        }

        // It gives error as it
        // defined in if block
        console.log(b);
    }
    f()

    // It prints 7
    console.log(a)

Output-

9
ReferenceError: b is not defined
7

Example 2-

let a = 7
if (true) {
    let a=9
    console.log(a) // It prints 9
}
console.log(a) // It prints 7

Output-

9
7

Const

It has all the properties same as the let keyword, except the user cannot update it. It cannot be updated or re-declared into the scope.

Example-

    const a = {
        prop1: 7,
        prop2: 9
    }

    // It is allowed
    a.prop1 = 3

    // It is not allowed
    a = {
        b: 7,
        prop2: 9
    }

Most Used Git Commands

Raj Kishor Shaw — Mon, 01 Aug 2022 09:01:00 +0000

I heard the term Git and GitHub a few months back when a discord community had organized an event for beginners in open-source. You just had to submit a meaningful pull request after taking a Good-first issue and solving the issue. I won a Swag T-shirt for changing some designs on the landing page of the Amplication website.

I wanted to learn about git commands for contributing to the above-mentioned event. I learned about some of the commands that programmer uses in their daily life for contributing to open source projects. I am adding some of the most used git commands that will help beginners in getting started in the open-source world.

$ git init
It is used to create a new Git repository. It creates all the necessary files and directories for git to keep track of everything.
It creates a file with the name .git and keep all the necessary file in it.
git config
If you are first time using git, you need to configure it. This command allows you to specify the username and email address that will be used with your commits.

#### for setting up Git with your name
git config --global user.name "<Your-Full-Name>"

#### for setting up Git with your email
git config --global user.email "<your-email-address>"

git clone
This command helps you to clone a remote repository to your GitHub and your local system. It downloads all the code related to that repository to your machine. You need to download all the codes of a working remote repository to your system for working with it.
git status
This command helps you to check the status of your repository. It will tell you every information related to it. If you are a beginner using this command will help you a lot.
git diff
This command helps you to check the difference between the working tree to the changes that you have made in your local file before saving the file.
git add
This command helps you to move your file from the working directory to the staging index. This is a necessary step before committing your file to the remote repository.
git commit
This command saves a log message along with the commit id of the modification you made to the git repository. You have to add a commit message in it describing the changes you made. This message will show up in your repository after opening a pull request.

$ git commit –m "<Type your commit message here>"

git push
This command helps you to push the files of your local repository to the remote repository.
git branch
This command helps you to add a new branch, list all the existing branches, and delete the branch.
git merge
This command helps you to join your branch to the parent branch.
git pull
This command is used to fetch and integrate the remote repository to your local repository. It helps you to be updated with the latest changes that have been made in the repository.
git log
This command is used to show all
repository commits that had been made in the past.

cd — Returns you to your login directory.
cd - — Returns you to your previous working directory.
cd ~ — Also returns you to your login directory.
cd / — Takes you to the entire system's root directory.
cd /root — Takes you to the home directory of the root user.