DEV Community: Shahriar Saleh Fahim

The myth of JavaScript "this" Keyword

Shahriar Saleh Fahim — Fri, 13 Aug 2021 18:58:50 +0000

A practical example of “this”:

Suppose you have a nice house and the house number is 15 JS Road. Your wife wants to paint the house. So she tells you “We Need to paint this house”. Notice that she is referring to the house with a this keyword. She isn’t saying we need to paint 15 JS Road House. You both are already inside that house. So she is just saying this house. The meaning of this is so simple like that. Practically there is no difference between the this in real life and the this in JavaScript.

Why the this keyword is in JS?

It helps a function to be reused in a different context.

There are 4 general rules. If you know these 4 rules you will have an idea about which object this is pointing at.

The rules are:

Implicit Binding
Explicit Binding
New Binding
Window Binding

I will now explain each rule with coding examples so that the topic will become more clearer.

1. Implicit Binding

//example-1
const fahim = {
  name: "fahim",
  age: 24,
  printUserName: function () {
    console.log(this.name); // This ""this".name" refers to the name property of the current object it is in.
  },
};

fahim.printUserName(); //fahim

So here when we call printUserName function first we have to check if there is a “.” notation before it and if there is one then the “this” inside that function is referring to the object in which function is in. Here the function is inside the “fahim” object and it is a property of the object.

2. Explicit Binding
2.1 .Call()

////Explicit Binding(call)

const printName = function () {
  console.log(this.name); //fahim
};

const fahim = {
  name: "Fahim",
  age: 35,
};

printName.call(fahim);

So in Implicit Binding, we saw that the this keyword refers to the object it is in. Now, what happens if we take the function out of the object and declare it globally or in another context and try to print the this.name.There is a .call() function in JS which is nothing more than calling a function explicitly. .call() receives an object as the first parameter which means the function is called within the context of the object fahim here. So we are explicitly telling the definition of this inside the function.

const printName = function (v1, v2, v3) {
  console.log(`${this.name} is ${v1},${v2} & ${v3}`); //Fahim is Hardworking,All Rounder & Best Player
};

const fahim = {
  name: "Fahim",
  age: 35,
};

const v1 = "Hardworking";
const v2 = "All Rounder";
const v3 = "Best Player";

printName.call(fahim, v1, v2, v3);

Another use case of the .call() function is for its 2nd parameter it can take unlimited parameters. We can pass these parameters through the main function.

2.2 .Apply()

Now here we can see we have to pass a lot of parameters in the .call() function. So there is an alternative way of doing that. We can take all those parameters inside an array and pass that array inside a .apply() function. It does the same work as .call().

const printName = function (v1, v2, v3) {
  console.log(`${this.name} is ${v1},${v2} & ${v3}`); //Fahim is Hardworking,All Rounder & Best Player
};

const fahim = {
  name: "Fahim",
  age: 35,
};

const v1 = "Hardworking";
const v2 = "All Rounder";
const v3 = "Best Player";

const v = [v1, v2, v3];

printName.apply(fahim, v);

2.3 .Bind()

.bind() also does the same work as .call(). In .call() we are directly calling the function. In .bind() it returns an instance of a function. So if store it in a variable. Then we can call the variable and it will do the job.

const printName = function (v1, v2, v3) {
  console.log(`${this.name} is ${v1},${v2} & ${v3}`); //Fahim is Hardworking,All Rounder & Best Player
};

const fahim = {
  name: "Fahim",
  age: 35,
};

const v1 = "Hardworking";
const v2 = "All Rounder";
const v3 = "Best Player";

const newName = printName.bind(fahim, v1, v2, v3);

newName();

So there is no confusion about the definition of this in Explicit Binding as we are explicitly defining it here.

3. New Binding

function Person(name, age) {
  //let this = Object.create(null)
  this.name = name;
  this.age = age;
  console.log(`${name} is ${age} years old`);
  //return this
}

const Fahim = new Person("Fahim", 24);
const Ani = new Person("Ani", 24);

So here Person is a constructor function. It takes two parameters name and age. We created a new Person named Fahim. So by default JS creates an object named this inside the constructor function. So, this.name points to the new Object created by JS. The name Fahim and age 24 is passed to the constructor function and this.name and this.age receives it and returns the new object.

4. Window Binding

 const PrintName = function () {
  console.log(this.name); //undefined
};

const sakib = {
  name: "Sakib",
};

PrintName();

When all 3 rules of binding don’t work then this will just point at the window. Hence we are getting undefined. We can prove that this is equal to window if we console.log it.

const PrintName = function () {
  console.log(window===this);//true
  console.log(this.name); //undefined
};

const sakib = {
  name: "Sakib",
};

PrintName();

To get out of this weird behavior of getting undefined we can fix it by writing “use strict”. Then JS will show us the error.

"use strict";
const PrintName = function () {
  console.log(this.name); //throws error
};

const sakib = {
  name: "Sakib",
};

PrintName();

Note:

The first 3 rules all are applied to normal JavaScript functions but if you are using Arrow Function then simply Arrow Function is not concerned with this and even Arrow Function is introduced to decrease the confusion of using this keyword. The value of this keyword in Arrow Function is whatever context the Arrow Function is in. It can be window/global, function or object.

Some tricky JavaScript questions you should know

Shahriar Saleh Fahim — Sat, 08 May 2021 13:50:51 +0000

Hello, all!!! Hope you guys are safe. Today I'll talk about some tricky parts of JavaScript which you should definitely know to increase your knowledge in JS.

Truthy & Falsy Values

Let's start with the easy one. Sometimes you may write conditions where you would need to define if a variable is true theb it might do something and if it is false it might do something else. Here's an example

const age=4
if(age>0){
console.log('True')
}
else{
console.log('False')
}

Here you declared a variable called age and gave a condition that if age>0 then it will print True otherwise it will print False. Pretty straight right? Even if you don't write age instead of age>0 it will still print True(Try yourself in a IDE). It's happening because as variable age has a value other than 0 ,assigned to it it will always return True . So 0 here is called a Falsy value in JS.

So can you guess what should happen if I create a variable named nameand assign empty string to it . What will be answer?

const name=''
if(name){
console.log('True')
}
else{
console.log('False')
}

If you ran the code you know the result. The answer is False.So, you may already have a guess that JS basically treats any empty or null value as Falsy values. So you might be asking what about empty arrays and objects? Both of them are Truthy values because when you initiate an array or object without a property you are still creating a object. Objects are considered True in JS. Array is also a type of Object.

Below here is a list of Truthy and Falsy values in JS. Please also check them by yourselves in your IDE.

Falsy Values

number = 0
string = "" (no white space)
undefined
null
NaN
False

Truthy Values

'0'
string = " " ( white space)
[] (empty array)
{} (empty object)
true
'false' (It's a string)

Your New React Tour Guide

Shahriar Saleh Fahim — Fri, 07 May 2021 15:56:19 +0000

Before you read this post , please note that in order to take tour to React you need to have basic understanding of JavaScript, Html and Css.

Let's first start with What is React.

What is React?

React is JavaScript library for building complex User Interfaces.It was created by Jordan Walke in 2011 .You may have noticed I said it's library and not a framework. Well it's because React is not the ultimate solution for your problem. It gives you a solid base but to complete a whole application you may need help of other library or frameworks. Frameworks are great . It gives you ready made templates or codes which will help you a lot but for larger application frameworks become a burden programmers. This is programmers tends to work with library which give them freedom to modulate their code bases.

Why React?

So, you've been learning JavaScript for 2 months and life is great. Why wouldn't it be ? You can build so many cool apps with JavaScript and show it off with your friends. Now suddenly you have an amazing idea to build a E-commerce app. So you started looking for designs for inspiration and you've finally chosen one. You started Coding 👩‍💻 the logical parts. Suddenly you felt you are writing a lot of duplicate code. For example, your app has a section which contain 20 cards which will be similar in look and different in data.Ok no problem we can always start a foreach loop or map all the details right? Now you are seeing another section requires the same attention and by that time your code is already looking very ugly and not readable at all.

This is where React comes. The only purpose of React is to build User Interfaces. A User Interface is basically what we see in a website. You just have to tell React what do you want and it will do it for you. Specially for a application which has multiple pages to visit. Building a UI of a medium size application from scratch is not a optimal solution at all. React uses all Html , Css and JavaScript but in a React way . The React language is called JSX . We will describe about JSX in the next section.

JavaScript myths you probably did not know

Shahriar Saleh Fahim — Thu, 06 May 2021 17:58:13 +0000

JavaScript Types
Try-Catch
ES6+: Var vs Let vs Const

JavaScript Types

You probably heard about primitive values a lot. You probably asked yourself a lot What the heck is a primitive value? Primitive values are like the sun, which is miles away from us, but it will always be there for us. It will always rise in the east and set at the west, and you can not do anything to change its direction. Primitive values are a constant like the Sun that cannot be changed. If you look at the below examples,

console.log(typeof(3)); // expected output number
console.log(typeof('Shahriar')); // expected output string
console.log(typeof(undefined)); // expected output undefined

Numbers and Strings are the most common primitive values. Both of them are infinite. Just think it like this if you start counting a number and start writing a string, will there be an end? There are three more types of primitive values. Those are Boolean, Null and Undefined, but they are limited number. Why are they called limited? Boolean has only two values, True and False. There can never be a third Boolean type just as much there can never be a second Null and Undefined.

Try-Catch

As a programmer, we all encountered numerous errors. The error may occur for a different reason, and you may not even find out where it even came from. In the case of JavaScript, the script dies if it encounters an error. There is a syntax called try-catch, which helps programmers catch errors more efficiently. The script will not die if your code is inside a try-catch block.

Try-Catch syntax

The try-catch syntax has 2 main blocks.

try {

  // code...

} catch (err) {

  // error handling

}

How does it work?

First, the try block will be executed.
If there are no errors, then the catch block is ignored.
IF there are errors, then try block execution is halted and catch block is executed to catch the error.
The err variable contains an Error object with the error details. You can give the err variable any name you name want.

The try-catch block only works if your code is runnable. If your code has syntax errors, the try-catch won't even be executed. It is because JavaScripts first read the code and run it. If an error occurred while reading the code, it is called a parse-time error. These parse-time errors can't be recovered. This is because the JS engine can't understand the code properly. The try-catch only catches errors that occur in valid code. Such errors are called run-time errors.

`try-catch` example

try {

  alert('Start of try runs');  // (1) <--

  lalala; // error, variable is not defined!

  alert('End of try (never reached)');  // (2)

} catch (err) {

  alert(`Error has occurred!`); // (3) <--

}

`try-catch` only works at runtime

try {
  {{{{{{{{{{{{
} catch (err) {
  alert("The engine can't understand this code, it's invalid");
}

For more in-depth information about try-catch please visit this link

ES6+: Var vs Let vs Const

ES stands for ECMAScript. ECMAScript is simply a standard for coding. JavaScript implements ECMAScript. Think it like that ECMAScript is simply a layer over JavaScript, and JavaScript implements the standards of ECMAScript. JavaScript was added to the ECMA standard back in 1997, and that was called ES1. ES6 was released in 2015. From the release of ES6, there came many big changes in JavaScript. One of those changes was let and const keywords. This section will describe more about the differences var, let and const and their scopes.

Var	Let	Const
Global & function scope	Block Scope	Block Scope
Value can change	Value can change	Value can't change

So the first question is What is a Scope? Scope in JavaScript is very different from other programming languages. Specially people coming from typed language like C,C++ or Java will find it pretty weird. Well think of Scope like a relation between parent world and child world. Child can get access to Parent world but Parent can not access to child world. If you remember this simple information you have understood the fundamentals of Scope in JavaScript. Parent world refers to a variable which is declared openly or in root of the program. It means the variable is not inside a function or a statement.

Var was heavily used before ES6 introduced let and const. Varis used withing Global and function/local scope. Now, what is a global scope? Global Scope is the whole application scope. If you define any variable in the global scope, it can be accessed anywhere in the application. Function/Local Scope is defined within a specific function. All the variables declared inside the specific function you can use it. Think of it like this, Global Scope is the parent and Function/Local Scope is the child. Block Scope is defined inside brackets. The following picture will help you understand the scoping concept more clearly.

Now let's run this code and find out what's the result.

function es6Example(){
   if(true){
var firstName = "Shahriar"; // exists in function scope
let lastName = "Saleh"; // exists in block scope
  }
console.log ("Var Access: " ,firstName); // expected output Shahriar
console.log ("Let Access: " ,lastName); // expected output: lastName is not defined.
}

You can see that we can get the output of firstName as it is Function Scope, it can be accessed within the es6Example function. On the other hand, lastName variable is undefined because it can not be accessed outside its Block Scope.

Many people seems to have misconception regarding usage of Var & Let because both can be used to reassign the value of a variable. Both are very different from each other. Var works in Global/Function Scope whereas Let works in Block Scope. Var can be use to redefined a variable which is very risky. You can redefine a variable 10000 times and JS will count the last variable's value. So ES6 introduced Let to stop this confusion. You can't redefine a value using Let but can only reassign it inside it's scope.

var myName = 'I am Shahriar';

console.log(myName) // expected output: I am Shahriar

if(true){
  var myName= 'I am Fahim'
}
console.log(myName) // expected output: I am Fahim

if(true){
 let myName= 'I am Fahim'
 let myName= 'I am Shahriar'
 console.log(myName) // SyntaxError: Identifier 'myName' has already been declared. 
}

Let & Const both were added for block scoping. The major difference between Let & Const is you can reassign a new value to a variable that is declared using the let keyword but you can not reassign a new value to a variable that is declared using the const keyword.

let a = 5;
a=6 ;
console.log(a); // expected output : 6

const b= 5;
b=6;
console.log(b); // expected output Uncaught TypeError: Assignment to constant variable.

You can though update a variable using Const.

const person={
  name: 'Shahriar',
  age: 23
}

person.age= 24

console.log(person)// expected output : { name: 'Shahriar', age: 24 }

A Curious Case of JavaScript Basics

Shahriar Saleh Fahim — Wed, 05 May 2021 15:51:16 +0000

If you are at least familiar with programming languages, you must have heard the names of different programming languages such as C, C++, Java, Python, etc. You may also hear about a language named JavaScript. At a glance, you may think Java and JavaScript maybe cousins. In truth, Java and JavaScript both are two very different languages. JavaScript is a scripting language and its syntax is based on Java and C.JavaScript is the soul of modern web applications. If you turn off your browser's JavaScript and browse a website you'll feel the difference.

To know the in and outs of a language we have to first learn the building blocks ' the types' of a language. JavaScript's types are :

String
Number
Array
Function

We'll look at a few of the most used methods of each type in this blog. Let's start with String.

String

Strings are represented in text form. You can make any word or number a string just by keeping those words or numbers inside a quotation mark. For example,

Now that we have some idea of what is a String type is, let us look at some most used methods of String.

String.prototype.includes(): Includes method is mostly used while you search for a specific word in a sentence. It returns a boolean answer true or false. For example,

Includes is also very case sensitive. For example,

String.prototype.concat(): Concat method is a way to add two separate strings together. It returns a completely new string after the operation. For example,

Notice that I added white space between the quotation mark which resulted in the whitespace between Hello and World.

String.prototype.slice(): You can guess it by the name. The slice method slices the string and returns a completely new String. Slice method has a beginIndex and an optional endIndex For Example,

Note that, the endIndex will always be greater than the beginIndex but what if someone gives a negative endIndex? then the string will start slicing off from the end of the sentence. For Example,

You can see that the missing letters 'o' and 'g'. As the endIndex is negative the slice method started slicing off letters in a reverse way. Now, what if someone gives a positive endIndex but it is lower than the beginIndex then the slice method will return an empty string.

String.prototype.trim(): If you ever edited a video you have probably heard of trimming ✂️. The same concept is also applied here. The trim method trims the start and end white space of a String. For example,

Numbers

Numbers are primitive data types in JavaScript.Unlike many other languages, JavaScript doesn't define a specific type of number such as integer, floating-point, short, long, etc. JavaScript only has one type of number. You can write it with or without a decimal. Now, let us look at some of the popular JavaScript number methods.

parseInt(): As the name suggests parseInt() method parses a string,floating-point number and returns the first integer number. Integer is a number without any decimal point meaning a whole number. It returns NaN(Not a Number) if the number can't be converted to an integer For example,

parseFloat(): ParseFloat method is same as parseInt method. Instead of returning a whole number, it returns a number with or without a decimal. For example,

Arrays

Imagine you have 20 values. Now you want to store the values. You can create 20 variables and assign the numbers in those 20 variables but it is not efficient at all. Instead of creating so many variables, we can create an Array to store those numbers. An array is a special variable that can store more than one value at a time. You can store numbers, strings, and even objects in an array. We can create an array in this way,

Let us look at some most used Array methods in JavaScript.

Array.map(): If you ever work with APIs you will know why the map is the most used array method of them all. The map method takes every element of an array and returns a completely new array. For example,

Array map takes a callback function as a parameter. When the function is called, it scans through every element of an array. Each time the callback function is executed it adds a new value to the newArray. The callback function takes at least one argument and it is the current value of the given array. In our case, it is labeled as arr.

Array.filter(): Imagine you have an array you have set some conditions and you want all the values in return if those values pass the condition. This can be achieved with the filter method. The filter method returns a new array with all the elements which pass the given condition.

As you can see 10, 20, 21, 22, 99, 100 are bigger than 6 hence these values are returned and stored in a new array.

Array.find() : Now imagine the last example with some tweaks. Now you want only the first number returned which fulfills the condition.

Since the find method only returns one element. It does not create a new array.

Array.includes(): Same as the String.prototype.includes(), the include method in array searches for a certain value in an array and returns a boolean number true or false.