Forem: Vijay Kumar

Let's Explore Some Fundamental Concepts of Functional Programming

Vijay Kumar — Tue, 16 Jun 2020 03:52:19 +0000

Functional programming, it sounds like something very high and complex concept, right? Don't worry, after reading this blog, you will understand the basic of functional programming(FP).

So let's start by outlining the topics we are going to learn about.

What is abstraction?
What is functional programming?
What are the higher-order functions?
Currying & chaining functions
Some useful higher-order functions in JavaScript
Let's summarize the above concepts

I think most of you guys are excited about learning what is FP? It's time to start now.

What is abstraction?

In everyday life, most of us don't pay attention to the devices we use for our daily purpose. I mean that we don't know how they work internally, do we? In the case of students and learners who are studying those devices or such things as we are learning about programming and JS. The normal people don't consider how their smartphones working and they don't need to consider either. Of course, the smartphone manufacturers hide those internal technical details from their target users. This is the definition of abstraction in a user-friendly way or in abstraction way for the normal people to understand. If we define it literally or in more CS manner, it means that when we work on apps or websites which are based on a large amount of data, we mostly focus on the detail and most important set of data from that large one. We don't need to focus on the data which are not related to our projects. We can see abstraction almost everywhere in real life.

If we go for admission to a school, college or any kind of academia, they will ask for your full name, your age, gender, grades and parents details like these. But they won't ask the colour you like most, your most favourite places, your favourite foods and your favourite Netflix shows I guess. They are working on a general and standard student model or student class for their particular school or university. And we as developers we have to know the abstraction which has a similar meaning in Computer Science. If you have got bored with text, let's review some code examples.

function Student(fullName,age,gender,grade,subjects) {
   this.fullName = fullName;
   this.age = age;
   this.gender = gender;
   this.grade = grade;
   this.subjects = subjects;
}
/**
* This is a Student constructor which accept five arguments as 
* properties for a student for a particular school or academia.
* This constructor should also access parental details but
* as an example, I'm not going far more details. But when we develop
* a program for students we might need to add those details further.
*/

What is functional programming?

How do you understand a function? If we think it mathematically like f(x) = y, it means that x is a variable and when we pass that x to function f, the result will be y. Whatever, it is a little bit daunting if we consider a function mathematically with all the staffs like domain, codomain, range and all. But if we think of Computer Science, it is a little bit similar. For example,

let myFavGames = [`Pottery`,`Car Racing`,`Loop`];
function favGame(gameList) {
   console.log(`Your favourite  games list is here`);
   for(let i = 0; i < gameList.length; i++){
     console.log(gameList[i]);
   }
   console.log(`Enjoy playing them`);
}
favGame(myFavGames);

The favGame is a function which accepts gameList as a parameter and obviously gameList is a variable. Then the result or output from the function is just a bunch of sentences. This is just a normal function.

Then what is functional programming and is it different from the above functions. It is a programming paradigm like object-oriented programming and procedural programming. But we are going to focus on functional programming which is abbreviated as FP. There are some rules of thumb you have to follow.

Immutability
Statelessness

A pure function is a function which returns the same output every time you provide it with the same input. And it has to be immutable and stateless. It will be easy to understand with practical.

let myFavGames = [`Pottery`,`Car Racing`,`Loop`];

// Add a new element to the gameList array
function addGame(gameList,newGame){
   let newArr = [...gameList];
   newArr.push(newGame);
   return newArr;
}
addGame(myFavGames,'Plants VS Zombies');

// Remove an element from the gameList array
function removeGame() {
   myFavGames.pop()
}
removeGame();

In the above code box, we can see two functions called addGame and removeGame. The addGame function is pure. If we put myFavGames and Plants VS Zombies as two arguments, it will return a new array which must be ['Pottery','Car Racing','Loop','Plants VS Zombies']. If we see the second function which is removeGame, it depends on the outer variable gameList. It does not accept it as a parameter. It also removes a game name from the gameList array that will mutate that variable. So we can say that removeGame isn't a pure function because it causes side-effect. But can we say that addGame is a pure function because it must return the same output if we provide it with the same input as many time as we want? Then, what about immutability? That function also has to be immutable to become a pure function. The addGame function accepts myFavGames as an argument so it is not directly depending on the myFavGames variable. It also copies the gameList array and creates a new array. Then do data processing on that new array instead of on the gameList. That means there is no side-effect by using the addGame function.

The addGame doesn't depend on any outer variable. This means it is stateless. If that function depends on any variable directly then it has dependent state. So we can say that our addGame function is pure. Functional programming is all about using pure functions and working with first-class functions and higher-order functions. There is a list of pure functions provided by JavaScript.

let myFavGames = [`Pottery`,`Car Racing`,`Loop`];
console.log(myFavGames);
myFavGames.concat(`Angry Birds`); // return a new concated array
console.log(myFavGames);
myFavGames.slice(0,1); // return a new sliced array
console.log(myFavGames);

There are also other functions which we gonna talk about later.

What are the higher-order functions?

All of the above functions are examples of first-class functions. They simply accept numbers, strings, objects and other data types as arguments. In functional programming, first-class functions are treated as objects. So we can pass functions as arguments and return functions from functions. Higher-order functions use this technique. They accept one or more functions and other data types as arguments and return a function. This makes new possibilities for JavaScript developers. This functionality is also available in languages like Python, Haskell, Scala and they are all based on functional programming including JavaScript.

Currying & chaining functions

We can use method currying when we need to provide a function with multiple arguments but we can't put all the arguments at the same time. This is possible because of the help of closure. First, let see an example.

let myFavGames = [`Pottery`,`Car Racing`,`Loop`];

// Add a new element to the gameList array
function addGame(gameList){
   return (gameName) => {
      return gameList.concat(gameName);
   }
}
addGame(myFavGames)('Plants VS Zombies');
let addANewGame = addGame(myFavGames);
console.log(addANewGame);
let newArr = addANewGame('Plants VS Zombies');
console.log(newArr);

Now, we are defining addGame using the concept of currying function. We can use a function by passing multiple arguments one-by-one or as many as you want. In the above case, addGame function accepts myFavGames as a single argument and then return a function. Then the returned function accepts Plants VS Zombies as its input then return a new favourite games list. Of course, you can use more and more functions inside another function as long as you can handle the complexities of code.

In the above example, you can see that we can use a currying function with all its arguments at the same statement or we can divide each or group of arguments as we want. So we have the advantage of using the specific part of the function when we need. To do so, we have to make sure the main function ( in the above case addGame ) is first needed to call with its parameters.

This is all about currying functions. This magic happens because of closure. So closure happens when a function access variables from its outer scope or parent scope. In the above code, the anonymous function ( the returned function ) can access the gameList argument from its parent addGame function. It is taking that variable from the parent function although the parent function is already returned. When a function is returned, it is removed from the execution stack. You can read more about the execution stack.

Then after this, we are going to chaining two or more functions. Chaining functions is just contacting one function with another function. That means when the first function is executed and the outputted result is go into the second function and being processed and so on and so forth.

const palindrome = (string) => {
    let temp = string;
    let tempReversed = temp.split('').reverse().join('');
    return temp === tempReversed;
}
palindrome('mmxxmm'); // true
palindrome('MOM'); // true
palindrome('radar'); // true
palindrome('wxmdjwy'); // false
palindrome('umbrella'); // false
palindrome('cat'); // false

// We can simply do like below
let string = 'Hello World! This is the Chaining Function here!';

let newStr = string.split(' ').reverse().join(',,,,');

console.log(newStr);
// "here!,,,,Function,,,,Chaining,,,,the,,,,is,,,,This,,,,World!,,,,Hello"

console.log(string)
// "Hello World! This is Chaining Function here!"

Here, we chained split() function to temp string variable using . operator. The dot operator is usually used as a chaining operator. Then, reverse() function is chained behind split() and then it is chained itself by join() function. In the end, the result is a new string without any side-effects. So all of the three functions are pure functions. This is a basic example of chaining functions.

Some useful higher-order functions in JavaScript

Let's see some common higher-order functions.

let myFavGames = [`Pottery`,`Car Racing`,`Loop`];

// map()
let newGameList = myFavGames.map(e => e + '!!!');
console.log(newGameList);
console.log(myFavGames);

// filter()
newGameList = myFavGames.filter(e => e !== 'Loop');
console.log(newGameList);
console.log(myFavGames);

// reduce()
newGameList = myFavGames.reduce((item, e) => `${item},${e}`);
console.log(newGameList);
console.log(myFavGames);

// forEach()
myFavGames.forEach((e,i) => {
    e = `${i+1} ${e}`;
    console.log(e);
});
console.log(myFavGames);

These methods can be applied not only to string arrays but also to any type of arrays and other data types like string and objects. All of the above functions are all pure functions and they are all part of functional programming provide JavaScript. Firstly, map() function just go through each element of the array and perform any processing on that element. Like this, the filter() function filters the specific elements based on the provided callback function.

Likewise, the reduce() function accumulates all of the elements of the array to a single value which we can assign to a variable. The first argument of the callback function is generally called accumulator but you can name it as the way you want. After the first argument, the second is each element of the array. After that parameter, we can continue with another optional parameter called the index of each array's element.

The last but not least is the forEach() function which simply loops through each element of the provided array. The first parameter represents each element of the array and the second one represent the index of the corresponding array's element. This pattern of parameter list is same as the map() function and the filter() function. These four functions are some of the most encountered functions throughout the functional programming in JavaScript.

Let's summarize the above concepts

First of all, the above concepts are interconnected to each other and these are just some parts of FP. Functional programming is all about working with functions. The higher-order functions make them a lot easier by providing abstraction and reducing code complexities. They enable us to write simpler code and easier to solve some sorts of problems. Most of JS developers use closures to provide modular programming i.e. we can make functions more securable and private using closures. Here is an instance of Modular Design Pattern.

let game = (function (){
  let myFavGames = [`Pottery`,`Car Racing`,`Loop`];

  return {
    // Add a new element to the gameList array
     addGame: function(newGame){
       myFavGames.push(newGame);
    },

    // Remove an element from the gameList array
    removeGame: function() {
       myFavGames.pop()
    },

   // Show game array list
   displayList: function() {
       return myFavGames;
   },
  }
})();

This is how we can create private method. game is an object and it has three methods. We can't access myFavGames array because it is no more in the execution stack. The private function is returned an object and the game has only access to that object. We can use chaining to simplify codes and to write less code.

I hope now you get some basic insights into functional programming and how important it is. It is really helpful and makes coding more enjoyable. If you think I don't put the A Quote section, please let me know your opinion. We can discuss more functional programming via the comments. Have a great day guys!!!🥳🤩😉

Asynchronous JavaScript In Details

Vijay Kumar — Thu, 30 Apr 2020 04:08:33 +0000

So let's see what is asynchronous JavaScript or generally asynchronous programming. Before we dive into the concept, we shall list the topics we gonna think about.

Thread
Synchronous
Asynchronous
Traditional Methods
Promises
Async/Await

This is the list and we gonna deep dive into one of the above-listed items. Let's start with the first one.

1.Thread

What is a thread?

A thread is a process or part of a process. When there was the use of multiprocessor becoming popular and people needed more fast computers, then they try to develop a technique called threading a process or multithreading. Then what does the first sentence mean, right? Simply we can define a process as a heavyweight task or job where a thread is a subpart of a process and sometimes refers to as a lightweight process.

Single-Threaded

If there is only a single thread for a particular process then that process itself is a thread (called single-threaded) and this process will be running on a uniprocessor system (like a single needle with a thread). A uniprocessor system is a system which has only one single processor (CPU or central processing unit). That's mean every process contains at least one thread which is the process itself. JavaScript itself is an example of a single-threaded system.

Multi-Threaded

If there is a single-thread system then there should be its partner, a multi-threaded system. On a multi-threaded system, many threads run subsequently each on its own processor, then that computer system might be a multiprocessor system. It is like multiple threads in the hole of a needle. If a process is divided into multiple sub-tasks, then each of those sub-tasks is referred to as a thread. Java Virtual Machine (JVM) is an example of a multi-threaded system and most of the today computers are multi-threaded.

Since JS has only one thread, the main thread, the need for some kind of mechanism becomes vital to meet modern use cases. The concept of asynchronous programming in JS became popular using another thread called worker thread. But both thread can't work together since JS is single-threaded. I'll explain it in more detail.

2.Synchronous

Synchronous programming is what we do mostly. Most of the code we write work synchronously. let's see the following code example.

let firstName = "Vijay";
console.log(firstName);
alert("Synchronous");
let lastName = "Kumar";
console.log(lastName);
console.log(firstName + " " + lastName);

How the above code will process? Firstly, the "Vijay" string will be assigned to the firstName variable and then it will be consoled. After that, the alert will be popped and at the same time open your browser developer tool to see that whether the line below the alert is processed or not until pressing the OK button of the alert box. The lastName variable will be declared and assigned with the string "Kumar" after the alert has been processed. Then the last two consoles will work. This step-by-step approach is called synchronous programming. This is mostly done in almost every programming languages. The main concept is one process or thread at a time.

3.Asynchronous

Where the asynchronous programming, two or more threads can be processed at the same if supported by the system. In the case of JS, there was an only the main thread but later there become a worker thread. The worker thread and main thread work independently of each other. The worker thread is also synchronous. That means the worker thread waits for some events to occur and does other remaining processing. By some events, I mean the event like fetching data like JSON or images and many other kinds of data from a server or a remote computer system.

4.Traditional Methods

The traditional methods were mostly used before the release of promises and other modern techniques. They are still being used today. So, what are these traditional methods? There are three methods we are going to talk about.

setTimeout()
setInterval()
requestAnimationFrame()

setTimeout()

All of the mentioned three methods are used in asynchronous programming. The first one is setTimeout(callback,timeInterval). This method accepts two arguments which are not avoidable. You can also add zero or more arguments behind the first two arguments. The first argument is a callback function. A callback function is a function expression that is passed as an argument in another function (in this case is the setTimeout()). The second argument is the time in a millisecond to wait before executing the callback function. The callback will be called after the specified time interval in a millisecond. We can add extra arguments after the second arguments. The new arguments starting from the third place until the end will be sent to the callback function as parameters to that function.

let firstName = "Vijay";
console.log(firstName);
let lastName = "Kumar";
console.log(lastName);
setTimeout(function(){
   console.log(firstName + " " + lastName);
},5000);

First, the firstName is declared and assigned with the string Vijay. Then, the variable is consoled and the lastName variable is declared and assigned with Kumar. And then, it will also be consoled. Finally, the console statement in the setTimeout is processed after waiting 5000 milliseconds (5s) only once.

let firstName = "Vijay";
console.log(firstName);
let lastName = "Kumar";
console.log(lastName);
setTimeout(function(fName,lName){
   console.log(fName + " " + lName);
},5000,firstName,lastName);

The above code example show that we can pass more than two arguments in the setTimeout() function. The arguments after the second arguments are passed as the arguments of the callback function.

setInterval()

This function is also similar to the setTimeout() function except for one thing. The setTimeout() function evaluates its callback function only once after waiting for the specified time in the second argument. Where, the setInterval() function execute the callback function more than once. Each execution takes place after waiting the time passed as the second argument in the setInterval() function. Simply timeout function executes its callback only once where interval function processes its callback function until close the browser or tab in which it's running.

let firstName = "Vijay";
console.log(firstName);
let lastName = "Kumar";
console.log(lastName);
setInterval(function(){
   console.log(firstName + " " + lastName);
},5000);

The above code block executes the callback as same as the timeout one but setInterval processes the callback many time.

There is a way to cancel the execution of the above two set functions (setTimeout and setInterval). We can use clearTimeout() and clearInterval() to cancel or stop execution of the set functions respectively.
Both set functions return an identifier which we use to clear timeout and interval.

let firstName = "Vijay";
console.log(firstName);
let lastName = "Kumar";
console.log(lastName);
let identifier = setInterval(function(){
   console.log(firstName + " " + lastName);
},5000);
clearInterval(identifier);

We can use clearInterval on setTimeout's identifier and vice versa, but this is not recommended and this is not a best practice.

requestAnimationFrame()

This method is mostly used in game development or animation in a browser or any web environment. This optimizes the web app performance if uses correctly. If we develop an animation, we can use requestAnimationFrame(). But the smoothness of the animation mainly depends on the unit called frame per second(FPS). Maybe you know this unit or maybe not, you have might be seen this unit in video related terminologies and in-game terminologies too.

const thousandCircles = () => {
   // This section contains codes to generate one thousand random circles
   requestAnimationFrame(thousandCircles);
}
thousandCircles();

In the preceding code section, the requestAnimationFrame() method with parameter as its parent function which is thousandCircles() function. If we want to use a function then we need to call that function with require parameters passed in.

4.Promises

Photo by Valentin Antonucci on Unsplash

A promise is another way of implementing asynchronous programming in JavaScript. Why do we need promise at all after having setTimeout,setInterval and requestAnimationFrame. But using the set methods we can face problems when we need to implement chain asynchronous codes or methods. It is inefficient to use set methods because they use callback functions. Take a look at the following example...

printBio(function(name){
   printFullName(name,function(age){
     printAge(age,function(bio){
       console.log(`Your name is ${name} and your age is ${age}. Your full bio is 
                   ${bio});
     },failCall());
   },failCall());
},failCall());

The above code is an example of callback hell. The callback hell is happened when we nest many callback functions inside of others. This may lead to errors and many complications. So to solve the above problem, we have promise in JavaScript. JavaScript mostly used in chaining many asynchronous processes and callback functions. There are four stages in processing a promise.

Pending - The promise is waiting for the result means the promise is currently processing.
Fulfilled - The promise is processed successfully and has returned the result. Sometimes called resolved.
Rejected - The promise is failed processing and has returned an error.
Settled - The promise is processed but the promise might be resolved or rejected.

Let's see a code example for a promise.

printBio()
  .then(name=> printFullName(name))
  .then(age => printAge(age))
  .then(bio => console.log(`Your name is ${name} and your age is ${age}. Your full bio is ${bio}));

The printBio function will be resolved or rejected, but we don't know when it will resolved or rejected. We can't even guarantee that whether the printBio function will be resolved or rejected. The above code processes only one promise at a time. U can implement multiple promises at the same time.First let's see another example of full promise code.

let promise = new Promise(function(res,rej){
  let x = 18;
  if(x){
    res();
  }else{
    rej();
  }
});
promise.then(// do something)
       .then(// do something)
       ...
       .catch(// do error handling);

In the above code, first we create a new promise object and then pass a callback function with res and rej arguments. Then we do some processing in the callback function. After creating the object, we can attach as many then as we want for more data processing sequentially. The first then will be process when only the promise is resolved. Then another then will be processing. There can be attached any numbers of then into a promise(...). If some error is returned from the promise object, the catch part of the code will be processed. There is another code for the multiple promises.

Promise.all([a,b,c]).then(// do processing)
                    .then(// do processing)
                    ...
                    .catch(// do error handling);

The above code will also be processed with the same manner as the single promise. The a,b,c in the array represents individual promise and then part of the code will only be processed when all of the given promises in the array are resolved. If any of the given promises is rejected, the whole promise block will be rejected and the catch part will be executed.

5.Async/Await

Async/Await is another new method to implement asynchronicity in javascript. As I said, this is relatively a new technique. What we actually do in this technique is we declare an async function and use await inside that function to perform the function asynchronously. So let's see what is async. async is a keyword which can be abbreviated as asynchronous, but we can only use async keyword in JS code not the asynchronous. We put it at the beginning of a function signature. The people who don't know what function signature actually is the line in the function declaration ( in case of javascript, that line is function funcName(parameters list...)). The keyword function and the function name and parentheses with parameters. So when we put async in front of a function, it will become async function funcName(parameters list...).

// Normal function
function calAge1(birthYear){
 return 2020 - birthYear;
}
calAge1; // this will return the function declaration or expression
calAge1(); // this will return your age

// Async function
async function calAge2(birthYear){
  return 2020 - birthYear;
}
calAge2; // this will return the function declaration with async keyword !!! Notice
calAge2(); // this will return a promise

If you call any of the above function, the first one will return a number and the second one will return a promise. If you want to check, just open your browser developer console and try implementing the above code. After all, it is a great tool to learn JS. You might be thinking about how to use the return promise, then we can use the return promise by appending the then keyword. Let see below...

// Async function
async function calAge(birthYear){
  return 2020 - birthYear;
}
calAge; // this will return the function declaration with async keyword !!! Notice
calAge().then(alert); // this will directly alert your calculated age.

What is await? It is a JS feature we can only use inside an async function. First, see the code below.

// Async function
async function calAge2(birthYear){
  return age = await Promise.resolve(2020 - birthYear);
}
calAge2; // this will return the function declaration with async keyword !!! Notice
calAge2().then(console.log); // this will return a promise

The above function will also return a promise but only once the promise is either resolve or reject due to the use of await. The await will wait for the promise to resolve. Then the promise will be returned and logged into the console since we use then on the returning promise. Instead of calculating age, we can do many things with await. Mostly, fetching data from the server using fetch and all. If you wanna learn more, then Mozilla Developer Network is a great resource, try it.
=> Asynchronous JavaScript

This is the end of this article and I hope this will help the readers. During this lockdown, we can learn new things and try our concepts and theory in practice. You can learn new things and teaches them through articles, blogs and videos. Please stay home, stay safe, stay learn, do practice.

How does JavaScript engine work?

Vijay Kumar — Fri, 27 Mar 2020 15:14:20 +0000

Have you ever been heard of execution stack? If your answer is no then you can follow along with this blog and if yes you can just review about execution context and execution stack. How does JS engine work? Let's find out the JS working mechanism together. We will have to find out what are the followings and how they work.

Execution Context
Execution Stack
Global Execution Context
Function Execution Context
Hoisting
Eval Execution Context

So, we are going to study all of the above topics in detail. Let's start...

1. Execution Context

Execution context is an environment or surrounding in which a specific type of JavaScript code is executed. Execution of JS codes is changed from context to context. Each execution has some particular properties and they share some similar properties too. There are three types of execution contexts

Global Execution Context
Function Execution Context
Eval Execution Context

Each execution context store as a JavaScript object in the Execution Stack. You can see all of the execution contexts on the above image, in which the outer yellow box represents the global execution context. The pink ones are the function execution context and the light green one inside the test() function is the eval execution context. Don't worry, we will explore these different contexts later. Just follow me. OK!🦾🐱‍👤

2. Execution Stack

As you know, a stack in computer science is like the stack of books, plates or maybe the doughnuts🍩 in the above cover photo. The stack is last-in-first-out (LIFO) i.e. that the book you just push in the stack will be at the base of the stack and the book you put last in the stack will be easier to take out from the stack then the book at the base of the stack. So this nature is also the same for Computer Science. In execution stack, instead of books, the stack will contain the global context, function contexts and eval contexts. The stack keeps track of the current instruction being executed by the JavaScript engine or any compiler or interpreter. Firstly, the global context store in the stack which comes down to the base of the stack and the remaining function or eval contexts will take place in the stack on each other based on the order of your JS codes. When each function or eval is executed by JS engine, the function or eval context is popped (pop) from the stack. push and pop are popular commands, in some programming languages, which are used to put or take data from the stack.

3. Global Execution Context

As you can see in the above image that any execution stack contain only one global execution context. Which type of codes executed in the global context? Of course, the codes which are not in any functions. When a JavaScript program is run, the global context is the first one which is pushed onto the execution stack.

let myName = `Vijay`;
let hobby = `painting`;

function display(myName,hobby) {
    console.log(`My name is ${myName} and My hobby is ${hobby}.`);
}

/*
 * Anything outside the functions which represent function execution context are 
 * all inside global execution context.
 */

4. Function Execution Context

When a function is executed in a JavaScript program, an object representing the function is pushed onto the execution stack. There are two phases in pushing the function execution context object. They are as follow:

Creation phase
Execution phase

Let's watch how the above two phases work behind the scene.

Creation Phase

In the creation phase, the function execution context object is created. If we further down the execution object, we can divide that into two environments.

Lexical Environment
Variable Environment

Without wasting time, let's see what they are.

Lexical Environment

The lexical environment is a representation or composition of identifiers (variable's or function's names) and the variables themselves, the reference to the primitive value or objects, in a specific structure. This environment also holds a reference to the parent lexical environment. We are going more deeper. Don't worry, I will summarise the whole article at the end and this gonna be the last detail we are diving in. So we can differentiate the lexical environment into three parts.

Variable object (VO) or Environment record - a new object is created for the arguments passed to the function and it is called argument object. We can use the argument object when we don't know how many arguments are passed to the function. Then the function is view thoroughly by the JS engine to create a property which points out that function. For each local variable inside the function, a property is created with the undefined.

Please notice this place, we will reference later to this point in the HOISTING section of this article.

Scoping and Scope Chain - every function declaration creates a scope ( like range or area ). All the arguments passed to the function and the variables declared inside the function are locked in the scope of that function. Global variables are the only variables that can be accessed anywhere in the code. Local variables are variables which are declared inside a functional scope. These local variables cannot be accessed from the global scope or their parent scope. If you want to know more about global and local variables, I will provide links to some articles. If your code tries to access local variables from the global scope, the JS engine will generate an error. When one or more functions are nested inside of another function, this nesting will create a scope chain. For example, if there is a function in which another function is nested. Then the scope chain for the nesting function will look something like this.

let myName = `Vijay`;
let hobby = `painting`;

const greet = `Hello`;

function display(myName,hobby,birthYear) {
    function age(birthYear){
       return 2020-birthYear;
    }
    console.log(`${greet}! My name is ${myName} and My hobby is ${hobby}.`);
}

/*
 * Anything outside the functions which represent function execution context are 
 * all inside global execution context.
 */

For function age, its scope chain contains its local scope, its parent function's scope which is display and the global function scope. If this function has to access a variable in global scope like greet, then it will find the greet variable in its local scope. If it didn't find the variable, then it will search one level up in the parent function scope. If it didn't find there too, then it will move to the global scope. This is called the scope chain.

This binding - most novice programmers get confused with this keywords. Look at the following code statement.

//this.(method or function or property);

Actually when a this. is found in the code, this usually refers to an object in which scope it is called. When this keyword is used inside a function, then this will indicate to the global window object in the browser. If it is called using any method or property, then it belongs to a specific object in which the method is invoked. The this keyword is not assigned a value until the function it is in is invoked.

class People(){
  constructor(name,age){
    this.name = name;
    this.age = age;
  }

  display(){
    // 'this' inside this method is not referencing to any object yet. It will 
    // reference to an object when it is invoked.
    console.log(`My name is ${this.name} and I am &{this.age} years old`);
  }
}

const vijay = new People('Vijay',19);
// Here, `this` from the display function reference to the vijay 
// object
vijay.display(); 

function getThis(){
  // 'this' in the statement point to the browser's window object which is in 
  // global  scope
  console.log(this); 
}
/*
 * Anything outside the functions which represent function execution context are 
 * all inside global execution context.
 */

Variable Environment

The variable environment and lexical environment are almost the same. The variable environment also has a variable object(VO), scope, scope chain and this binding. There is only one difference after ES6. The lexical environment used to store function, let and const where the variable environment is for var.

Execution Phase

During this phase, the codes are executed. The variables are assigned with their appropriate values and the functions do their jobs. Each of the functions pushed on the stack are executed in a first-in-last-serve manner. When a function is executed, its function execution context is removed from the execution stack.

5. Hoisting

All javascript developers should know the concept of hoisting. This is a new term born with ES2015. The actual concept is that when we declare a variable or a function in JavaScript we can use them before the declaration. Let me explain with some codes. We are going to refer the variable object (VO) section in this blog.

// Hoisting with a variable.

console.log(name); 

/* 
 *The console output will be "undefined" because of the hoisting enables the 
 *variable available at the interpreting time.
 */

var name; // Declaration
name = "Vijay"; // Initialization
console.log(name); // Output will be "Vijay"

// Hoisting with function

age(1999,2020);

/*
 * In the case of a function, the output will be "21" instead of "undefined" 
 *because the function performed its operation during interpretation.
 */

function age(birthYear,currentYear){
  console.log(currentYear - birthYear);
}

age(2000,2020); // Output will be "20"

As in the above code and the reference from the VO section, we now know that when a variable is declared, it will be assigned with undefined due to hoisting during the interpretation. When the variable is initialized with a value, then there will be no effect because of hoisting. Where a function declaration enables the program to use the function before its declaration statement in the code. These are all the effect of hoisting. In technical term, during interpretation, the variable declarations take places for those variables on the memory and this is same for function. That's why we can access the variables and functions before their declaration.

6. Eval Execution Context

The last but not least is the eval execution context. We are not going to do detail discussions about eval execution context because most programmers do not use this. It is obsolete. That means that it is still supported by browsers but it is a best practice not to use eval in any new project you are going to start. The actual function it does is nothing but only executed string which is just javascript code.

// Eval execution context
console.log(eval(`2+2`)); // the console output will be "4"
console.log(eval('2 + 2') === eval(new String('2 + 2'))); //  the console output will be "false"

This is the end of our blog. I hope I provided as much knowledge I know about JS and you can read the following articles which will explain in more detail.

Further reading
The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript
eval() and eval execution context
Understanding Execution Context and Execution Stack in Javascript

Cover Photo by Sharon McCutcheon from Pexels

What is variable in javaScript?

Vijay Kumar — Sun, 09 Feb 2020 13:53:49 +0000

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!:);)

Cover Photo by Pixabay from Pexels

2020, Start of a new tech journey

Vijay Kumar — Fri, 17 Jan 2020 13:47:30 +0000

More than half of the first month of 2020 has been passed and may be everyone have already started to learn new things, new startups, new careers and many new things. May be there will be some people thinking of studying new technology skills. But don't know how to start and from where to start. I wrote this blog for those who has been confused between competing tech skills.I hope this blog will help them.

There are many tech skills or fields and among them only some will become major players in 2020. After all, computer fields are always evolving. But to become a successful goal keeper, people also need to maintain some soft skills (such as time managements and habits), we talk about them later in this blog.

I divided this blog into three parts and they are

Programming Languages
Tech Skills/ Fields
Soft Skills

So, lets start...

Source

Programming Languages

The languages in the list are not ordered by any constraints or on any basis.They are just unordered.

Python

The language which is famous for research, complex computations, machine learning and many other famous fields. It can be used for back end in web development with django framework. It is also easy to language for beginner. But today, python is famous for artificial intelligence and machine learning.
Kotlin

Kotlin is mostly used for android app developments after Google introduced Kotlin as an official language for android app development along with Java and C++ at its annual I/O in 2017. Before this language Java used to be language for android development.
Java

Although kotlin is used as android app development, there are some android app developed with java. Java is mostly famous for enterprise software. Web developer can use java as a back end language for web apps but java is not suitable for web development.
JavaScript and Node.JS

The language, which totally changes the old static web pages with modern dynamic web apps and lot of new features added to web app developments. Node.JS is used in back end development.
TypeScript

TypeScript is developed by Microsoft and it is superset language of JavaScript. The TypeScript codes are compiled into plain JavaScript. The language is eventually becoming popular among web developers.
Go Lang

This language origin is Google and it is mostly based on C/C++. The language is fast and have increasing trend in enterprise software development and AI too.
Swift

Apple developed swift for its app developments. Before swift, Objective C was used for IOS apps. As always, changes occur everywhere, apple changed objective C with swift. This language also have rising trends.
C/C++

C, the mother of programming languages, is used for many purpose from compiler developments to writing code for low level hardware and also in game development.They are the base of the most modern high level programming languages. Both languages are mostly closer to the machine then any other high level language and their speed is a matter which also make the languages survive after born in 1972.
R programming Language

The language is best for statistical computing and graphics. It is mostly used in statistic programs and in data mining related problems.
C Sharp

As we know, windows OS is one of the most popular operating system and we can use C# to develop software for windows OS and can also use for game development with unity.

Tech Skills/ Fields

The fields order is random.

Artificial Intelligence ( AI )

I hope some of you guys have heard of AI. It is currently the most popular tech field. As it is called artificial intelligence, this technology adds virtual intelligence to modern devices and software. It is also help in almost all the field. AI is transforming the world more rapidly then any other technology. Machine learning and deep learning are parts of AI, which are also becoming popular.
Internet of Things ( IoT )

As the world is becoming more and more innovative, there are new technologies helping human to make a better world. IoT is changing the traditional electronic devices. This technology is making those devices to work in an interconnected structure. IoT is becoming the foundation for the future smart cities. The IoT will become more powerful with AI, and there are some trends heading to AIoT( Artificial Intelligence and Internet of Things ).
DevOps

DevOps is also becoming more and more popular among software developers and big industries like Google, Facebook and others. It makes the software development process and software maintenance more easy and increase development speed too.
Web Development

As we know, web pages are now becoming more dynamics after Node.JS. This is the always evolving fields and becoming broader. It is divided into front end and back end, but today most web developers do both of the job which lead to full stack web development. Full stack web development is more powerful and now assemble with new technologies such as progressive web app, react native, electron and many other libraries and frameworks.
Blockchain

The new technology, which is changing the economic landscape, is called blockchain. The development of cryptography boost the blockchain which became the start of the today cryptocurrencies such as bitcoin. This field will highly affect the future world.
Network Engineering and Cloud Computing

Everyday, more people are connecting to the internet and there are also new newtwork infrastructures are being constructed by huge enterprises. We can already feel the presence of cloud computing which is helping in every aspects of services from different companies.
Cyber security

Today, most of our information are on internet and we are being lived under the thread of cyber crimes. Almost every industries are trying hard to save their customers privacy and information from cyber criminals and cyber security will help them to reach out to their goal.
Database Administration

You may heard of database, which are the structures or techniques most of the user information store using them. User information are always increasing, so need of database administrators will also increase.
Mobile App Development

Today most of the people are using mobile phones and they require the services only available on computers. Most of the enterprises, companies are trying to give their services using mobile apps and there are ton of mobile apps , some are useful and some are not. But a passionate app developer can develop a useful app for their customers.

Soft Skills

As we know there is no one perfect in every skills in the world, but we can train ourselves to level up our skills which in return the increase in our productivity. Although there are many skills, we don't need to master all those soft skills. By soft skills I mean skills such as time management, habit management, creativity, negotiation and others. We only need to improve some of the main skills. You can read about those skills below.

Cognitive flexibility

May be you might thinking that what is cognitive flexibility, right? Cognitive flexibility is actually the ability to change your thinking from one job to another job instantly. May be you have this skill, but those who have very little of that skill should try to develop this skill.
Negotiation

Negotiation is consider as one of the social skills. I think most of us do negotiation at least one time a day or two day or may be a week. This is also an important skill. As technology is advancing rapidly, all people should try to raise their social skills because robots or AI can't have social skills as we have.
Service orientation

As it is named service orientation, it is how we can think from users need not only for current time but also for the future events. This skill is also an important one.
Judgement and decision-making

There are many people who cannot make clear and fair decisions which is unacceptable in today developing industries. If we have to make decision, we need to be honest and have to trust ourselves before making any decision. Actually the main thing is to trust yourself. Be ready for may be difficult but most profitable decision for everyone.
Emotional intelligence

Many people think about that emotional intelligence is not important in business or today industries including me. I was thinking like this, but this is wrong. We need to develop our EQ(Emotional Quotient) if we don't have a recommended level. This is necessary for everyone in any career.
Coordinating with others

This is basically one of the most important social skills which is in demand in any job, mostly in tech industries. This is a vital skill for any tech related person. Most of today schools, colleges, and universities trying to develop this skill by organizing group projects, group trips and other tasks which need more than 2 students in groups.
People Management

If you become a project manager in a company for a project, you will need to allocate project resources which also include project members. Every enterprise or company need to watch their resources and have to maintain an acceptable level for the industries.
Creativity

As we know creativity is a necessary skill for everyone. Some are not creative type, but they can develop their creativity skill by putting some efforts on art or something like that.
Critical Thinking

Critical thinking is all about logic and reasoning, which are very important in computer science and economy. This is the basic skill and use logic and reasoning to solve different problems with various solutions. Critical thinkers also have to think about the pros and cons of their solutions.
Complex Problem Solving

If you have some ideas or solutions to some of the world complex problems, then your skill of solving complex problem will give benefits you then what you have ever imagined.But to solve complex problem you have to start from basic simple problems which will give you experiences.May be you can start by solving some of your daily life problems.
Time Management and Habit Management

As we know, time is valuable. So don't miss any opportunities and always seek for new opportunities and experiences. By managing your time, you can increase your productivity. You can use some schedules or time tables, but most of us never hit our goals. We will need to protect ourselves from distractions which are the main disruptors of our journeys to the our destinations.If we follow our time tables, it will help in developing good habits. We also have to tackle our bad habits.
Learning Management

There is no one who mastered the field he is studying or doing jobs related to that field. Everyone should learn something new to increase your knowledge.So you will need to manage your learning process to maintain the balance between your works and your learning.

These are the programming languages, tech fields and soft skills I think need to learn. You have to choose one or more programming languages and tech fields to master. Think of your interests. I hope this blog will help you to find out the path you want to go through this year. I think everyone should consider the develop all of the above soft skills to an acceptable level. Please try hard and think intelligently.

I wrote this blogs based on the following articles and blogs. If you want to know in details, read the followings and do some googling. I'm waiting for feedback upon this blog post.

10 Job Skills You’ll Need in 2020 and Beyond
The 3 Most Important Skills to Learn Now to Thrive in 2020
Programming Languages You Should Learn in 2020
10 Best Programming Languages to Learn in 2020 (for Job & Future)
What are the top IT skills to learn for 2020?

Cover Photo by Element5 Digital from Pexels

My First Seed of Blog Post

Vijay Kumar — Wed, 01 Jan 2020 09:55:32 +0000

Intro

Photo by cottonbro from Pexels

Hello guys!
First I want to say Happy New Year to all of my friends.

Bio

My name is Vijay Kumar. I'm a student from University of Computer Studies, Mandalay. Currently, I'm studying computer technology (computer engineering).

Learning

Although I'm a hardware student, I'm learning full stack web development . After all this doesn't matter what you do or who you are. Actually I'm studying full stack web development to make some money during this joyful university life and get some experiences from web projects.

Blog

This is my first ever blog and may be reading this blog will be like a block of texts with full of necessities what a good blog should have.I'll try to overcome with those necessities with the help of feedback from all of my friends.I also wanna ask for guidance if anyone found something wrong in any of my blog posts.In my future blogs, I'm going to write full stack web development related topics and some computer science and engineering topics too.

New Year Resolution

Photo by freestocks.org from Pexels
As today is new year day, everyone is goint to make some resolutions. I made mine too. Writing blog post is also included in my resolution. I hope all of my friends have also made some resolution and I wish they gonna meet their goals in near future.

Starting my blogging journey

I'm starting to blog on *** Dev Community *** form now and I hope I'll get full support from my senior developers and my friends.

Thank You Everyone and enjoy this new year's first day.
Please don't forget to comment.

.ltag__user__id__303185 .follow-action-button { background-color: #080e3b !important; color: #ffffff !important; border-color: #080e3b !important; }

Vijay KumarFollow

A frontend developer, who is passionate about learning to solve real-world problems using my web dev skills and explore new stuff on the go.💻🎶😍😀

Cover Photo by Dom J from Pexels

Forem: Vijay Kumar

Let's Explore Some Fundamental Concepts of Functional Programming

What is abstraction?

What is functional programming?

What are the higher-order functions?

Currying & chaining functions

Some useful higher-order functions in JavaScript

Let's summarize the above concepts

Asynchronous JavaScript In Details

1.Thread

What is a thread?

Single-Threaded

Multi-Threaded

2.Synchronous

3.Asynchronous

4.Traditional Methods

setTimeout()

setInterval()

requestAnimationFrame()

4.Promises

5.Async/Await

How does JavaScript engine work?

1. Execution Context

2. Execution Stack

3. Global Execution Context

4. Function Execution Context

Creation Phase

Lexical Environment

Variable Environment

Execution Phase

5. Hoisting

6. Eval Execution Context

What is variable in javaScript?

1. What is a variable?

2. Statically Typed Language Vs Dynamically Typed Language

3. Datatypes

Number

String

Boolean

Undefined and Null

Object

4. Declaring variables in JS

5. Difference between var and ES6 let, const

6. Immutable and Mutable Datatype

2020, Start of a new tech journey

Programming Languages

Python

Kotlin

Java

JavaScript and Node.JS

TypeScript

Go Lang

Swift

C/C++

R programming Language

C Sharp

Tech Skills/ Fields

Artificial Intelligence ( AI )

Internet of Things ( IoT )

DevOps

Web Development

Blockchain

Network Engineering and Cloud Computing

Cyber security

Database Administration

Mobile App Development

Soft Skills

Cognitive flexibility

Negotiation

Service orientation

Judgement and decision-making

Emotional intelligence

Coordinating with others

People Management

Creativity

Critical Thinking

Complex Problem Solving

Time Management and Habit Management

Learning Management

My First Seed of Blog Post