Forem: Tahir Ahmed Tapadhar

Earn a Microsoft Azure Certification for FREE !!!

Tahir Ahmed Tapadhar — Wed, 01 Jun 2022 18:30:01 +0000

Overview:

With the introduction of new technologies on a daily basis, cloud computing is one of the modern technologies that is growing fast. Cloud computing is one of the bigger industries that generate billions of dollars in revenue every year with hundreds and thousands of job opportunities. Many big names are offering unique cloud services to many customers all over the world, such as "Amazon Web Services (AWS), Google Cloud Platform (GCP), Oracle Cloud, IBM Cloud, Rackspace, and Microsoft Azure" — with 29% application workload of the overall cloud market.

Microsoft Azure, often referred to as Azure is a cloud computing service operated by Microsoft for application management via Microsoft-managed data centers. Azure is currently one of the leading public cloud service providers out there in the market.

It provides a range of cloud services, including compute, analytics, storage and networking. Users can pick and choose from these services to develop and scale new applications, or run existing applications in the public cloud.

To pursue a career in cloud computing, all major cloud services providers offer career paths and certifications, but Microsoft Azure is a single cloud service provider that offers role-based certifications that are specifically designed according to the market requirements and the job roles. Due to the large adoption of Microsoft Azure cloud services, Microsoft Azure certified professionals are in high demand for developing cloud applications and managing cloud infrastructures. Therefore from a developer perspective, gaining skills in cloud computing & specifically Azure is a win-win anytime.

Path:

Certifications normally come with a price. But still, Microsoft has provided ways & means for developers to acquire the certification completely free of cost. There are various paths using which one can easily bag a free certification for Azure. Today I would be talking about one of them.

Microsoft Events:

Microsoft has various global events Microsoft events of which there are 2 events that are major & takes place annually:

Microsoft Build
Microsoft Ignite

Like every year, "Microsoft Build 2022" comes again which such an opportunity where if you register yourself for the event (24-25-26 May) & signup for the "Microsoft Build Cloud Skills Challenge 2022", you can earn a free certification for yourself.

Registration Link:
Microsoft Build Cloud Skills Challenge | May 2022

Hurry up !!! grab the opportunity before the clock ticks out ⏱🔥

Microsoft Launches Q&A for .NET

Tahir Ahmed Tapadhar — Mon, 17 May 2021 13:12:14 +0000

Microsoft, the American multinational trillion-dollar technology company never fails to astound us. The tech giants have launched their own Q&A forum for their .NET community where developers can unreluctantly ask all things .NET. You can also think of it as something like Stack Overflow, but only for .NET-related technologies. For those who are thinking what is .NET, simply put, its a software framework put together, developed & maintained by Microsoft.

Overview:

.NET is a free, cross-platform, open source developer platform for building many different types of applications. With .NET, you can use multiple languages, editors, and libraries to build for web, mobile, desktop, games, and IoT.

.NET has come a long way from it's original implementation i.e. .NET framework which supported running websites, services, desktop apps, and more only on Windows operating system to .NET Core, a cross-platform implementation for running websites, services, and console apps on Windows, Linux, and macOS.

Introducing .NET 5:

.NET 5, as Microsoft says, is the future of .NET. During the Microsoft Build 2019, the Microsoft Team announced that .NET 5 is on its way out, and it would be arriving in 2020. The announcement added that there would be .NET 5 that is Opensource and Cross-platform, which will replace .NET Framework, .NET Core and Xamarin with a single unified platform called .NET 5 Framework.

As shown above, the main goal of .NET 5 is to empower unified .NET Client Application projects to create deliverables for various platforms including Windows, UNIX, Linux, Legacy Windows, iOS, Android, HTML5, and Macintosh. .NET 5 will be powered with the best features of the .NET Framework, .NET Core, Mono, and Xamarin to provide APIs, libraries, and run-time to create apps for Web, Windows, Mobile & IoT devices.

.NET Q&A:

Microsoft has always put its community first & have constantly upgraded their products based on the community feedback. Since we now know that .NET has come here to stay & is not going to go any where for a long long time, Microsoft has come up with a platform where the community can interact with one another and get their questions answered. You can visit the platform here:
https://docs.microsoft.com/en-us/answers/products/dotnet

Microsoft Q&A is the home for technical questions and answers about products from Microsoft. If you are looking for help on any Microsoft product you are sure to find it on Microsoft Q&A. Join the community of growing experts who are here to help developers get the help and answers they need on their projects. When you head to Microsoft Q&A for .NET you will find a wide range of .NET topics including runtime, app & web development, languages, data, and more. Browse questions from the community, ask your own, and help out others!

"Have you ever been working on some code and ran into an issue and needed to ask someone for help?" said Microsoft's James Montemagno in a Nov. 25 blog post Announcing Microsoft Q&A for .NET.

"Maybe you are looking for assistance on how to start your next app or perhaps you are seeking some architecture guidance? What if there were one place where you could go to get your technical questions answered by experts from Microsoft and the community? Well there is now with the launch of Microsoft Q&A for .NET!"

The .NET community can breathe a sigh of relief now that we have our own dedicated Stack Overflow💪😅😅...

References:

Arrow Functions in JavaScript, How is it different?

Tahir Ahmed Tapadhar — Sun, 18 Oct 2020 19:25:57 +0000

JavaScript has seen a lot of changes in the past few years making it robust, elegant & the primary choice language of the web. Ever since ES6 was released, JavaScript has become a different ballgame altogether with various drastic changes adding to it's elegance. With each successive ES release, it brought a lot of cool stuff to the table. One such major breakthrough came with the release of ES6 which introduced features like the let & const keywords, template literals, the class keyword, modules, destructuring and a lot more. Among these hallmark was the 'Arrow Functions'.

Ever since it's inception, it has been widely acclaimed & adopted by the JS developers/community. It is been widely used in libraries & big frameworks like Angular, React, Vue, etc. It has completely changed the way we look & write functions in JS making it short and concise. Before diving in, let's talk briefly about traditional ways of writing functions in JavaScript.

Functions in JS:

There are a few different ways to define a function in JavaScript.

Function declaration:

A function declaration defines a named function. To create a function declaration you use the function keyword followed by the name of the function.

// function declaration
function add(a, b){
   return a + b;
}

console.log(add(1,2)); //3

Function expression:

A function expression is very similar to and has almost the same syntax as a function declaration. The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions. In simple words, a function expression can be defined as an anonymous function assigned to a variable.

// function expression
var add = function (a, b){
   return a + b;
}

console.log(add(1,2)); //3

Function() Constructor:

The function statement is not the only way to define a new function, you can define your function dynamically using Function() constructor along with the new operator. This is how we can use the Function() constructor to create functions.

var add = new Function('a','b','return a+b;');

console.log(add(1,2)); //3

However creating functions using this method is not recommended. Calling the constructor directly can create functions dynamically but suffers from security and similar performance issues.

Apart from the above mentioned methods, there is a new way to define functions in JavaScript post the release of ES6 and that is the Arrow Function.

Arrow Functions:

The Arrow function is the latest way to define a function in JS. It is a shorter syntax for writing function expressions. An arrow function is a cleaner, concise & a compact alternative to a traditional function expression, but is limited and can't be used in all situations. Here is how we write the above function using the Arrow function syntax.

// arrow function
var add = (a,b) => {
   return a + b;
}

In an arrow function , we don't require a function keyword. Instead we use a fat arrow (=>) between the parameters and the body of the function. The above arrow function can also be compacted further. If the body of our function includes only a single line, we can write the function like this.

var add = (a,b) => { return a + b; }

Also, if there is a single line of code in the function body & returns a value, we can eliminate both the return keyword and the {} braces completely like this.

var add = (a,b) => a + b;

Here are the 2 methods: The latter arrow function that we have is exactly equivalent to the former function expression shown above.

// function expression
var add = function (a, b){
   return a + b;
}

// arrow function
var add = (a,b) => a + b;

You can see, this syntax is cleaner & more compact and makes you write less lines of code.😃

Note:

If the arrow function has a single parameter, we can skip writing the parenthesis () i.e. we need not require the parenthesis () for enclosing the single parameter. But if the function has more than one parameter, parenthesis is required.

var greet = name => console.log('Hi' + name);

greet('Tahir'); // 'Hi Tahir'

How are Arrow functions different?

The obvious question you must be asking yourself is what was the need for introducing arrow functions and why should I use it. One good reason would be, that it would make your code look more readable & smaller by eliminating good amount of lines.
Further more, I will replace all my existing functions that I have defined using function declaration/expression with Arrow functions and my code will work the same as before. Big deal? The answer to that is NO!!. Don't do that.

Even though at first it might look like there is just a syntax difference between them, but that is not true. There are quite subtle differences between the Arrow functions & the traditional methods. Let's discuss what are they.

'args' object:

Arrow functions don't have access to arguments object. Let's understand this with an example.

// function expression
var add= function(a,b) {
   console.log(arguments[0]); // 1
   console.log(arguments[1]); // 2
   return a + b;
}

add(1,2); // 3

// arrow function
var add = (a,b) => console.log(arguments[0]);

add(1,2); // arguments is not defined

Arrow functions don't have their own 'this':

The behavior of this inside of an arrow function differs considerably from the regular function’s this behavior. It does not have its own bindings to this and should not be used as methods.

var person = {
  age: 15,
  print() {
    console.log(this.age);
  }
};

console.log(person.print()); // 15

var person = {
  age: 15,
  print: () => {
    console.log(this.age);
  }
};

console.log(person.print()); // undefined

Traditional functions default this to the window scope. Arrow functions do not default this to the window scope, rather they execute in the scope they are created.

var person = {
   eat() {
      setTimeout(function(){
         console.log('this', this);
      }, 1000);
   }
};

person.eat(); // {Window Object}

Upon invoking person.eat(), this prints a window object. The reason this happened because here, the callback function inside setTimeout() is not part of any object. It's a standalone function. When we call a function as a standalone function outside of an object, by default this points to window object.

var person = {
   eat() {
      setTimeout(() => {
         console.log('this', this);
      }, 1000);
   }
};

person.eat(); // {person Object}

This can be resolved using an Arrow function because they don't rebind this. In other words, if we change the callback to an arrow function, it will inherit the this keyword. In the callback function, because we have used the arrow function syntax, the value of this is not reset. Instead it inherits the value of this in the context in which this code is defined.

Arrow functions cannot be used as a constructor:

If you are aware of constructor functions in JavaScript, then you should know that a regular function can easily construct objects. For example, the Person() function creates instance of a person class

function Person(name) {
  this.name = name;
}

var person1 = new Person('Tahir');
person1 instanceof Person; // true

The arrow function resolves this lexically. In another words, the arrow function doesn’t define its own execution context. A consequence of this resolved lexically is that an arrow function cannot be used as a constructor. If you try to invoke an arrow function prefixed with new keyword, JavaScript throws an error:

var Person = (name) => {
  this.name = name;
}

var person1 = new Person('Tahir'); // TypeError: Person is not a constructor

That's all there is to Arrow Functions. In a nutshell, we simply cannot interchangeably use Arrow functions over Function expressions or vice versa. The right way to go would fully depend upon the requirement of how you want to build things as per need. Hope this was helpful. Happy Learning🙂🙂..

What is Type coercion in JavaScript ?

Tahir Ahmed Tapadhar — Sat, 22 Aug 2020 20:42:39 +0000

It will not be incorrect to say that javascript falsely looks like other programming languages. Unlike languages like C++/Java/C#, javascript is nothing like those languages. It's a different concept, a different mindset, a different paradigm. While many programmers learning javascript or using javascript find some of its elements as they dig into more advanced features odd or difficult to learn or weird. You're going to find that when you truly understand it, how javascript works & how it works the way it does you'll discover that javascript is a deceptively powerful & beautiful programming language. This is also the reason why it is one of the most popular programming language.

We need to understand how javascript is functioning under the hood in order to be able to properly write javascript code; deep advanced javascript code. We're going beyond just the basics. So even though it may seem at moments during this post that we're covering that "Oh, you don't really need to know that!", you'll find as we progress that, fundamental foundational knowledge is going to brighten the path for you, because very quickly you'll see just how important they really are.

What lures devs into learning javascript is understanding it's weird parts. One such concept that we shall talk about today is the Type Coercion in JavaScript. During your time of development using the javascript language, I'm sure you must have encountered something like the below:

console.log(5 + '5'); // '55'
console.log(5 - '5'); // 0

console.log('2' * 2); // 4
console.log('2' / 2); // 1
console.log('2' - 2); // 0
console.log('2' + 2); // '22' 😳huh??..
console.log('' + 2); // '2'

Type Coercion:

Type coercion is the automatic or implicit conversion of values from one data type to another data type(eg. string to number & vice-versa). Type conversion is similar to Type Coercion because they both convert values from one data type to another with one key difference — type coercion is implicit whereas type conversion can be either implicit or explicit.
In simple terms, we as a developer don't explicitly perform type coercion. It is done internally by the javascript engine.

What causes type coercion?

First of, if I'm not wrong, you cannot perform mathematical operations on two operands of different type in any(compiled) language. In a compiled language, the compiler itself will throw an error during compilation.

// In any compiled language like C#, this is not possible

var operand1 = 2; // int
var operand2 = '5'; // char
var result = operand1 + operand2; // compilation error

But HEY!! this is JavaScript....it is dynamic, everything is possible here😛. So in javascript, when we perform some mathematical operations on two variables of the same type, the result would be similar to that of any other language. But when the operands are of different types, javascript internally tries to make things even by making both the operands of the same type. This is done by converting either one of the operand to match the type of the second operand.
Considering the above example.


// number 5 is coerced to string '5'
console.log(5 + '5'); //'55'

// string 5 is coerced to number 5
console.log(5 - '5'); //0

In the above example, javascript has coerced the value 5 from number to string making both the operands string type and then concatenates the values together resulting into '5' + '5' => '55'. Similarly, in the second example, javascript coerces one of the operand to match the type of the other. But this time string '5' is coerced to number 5 evaluating to 5 - 5 => 0.

Since JavaScript is a weakly-typed language, values are converted between different types automatically or rather implicitly. It usually happens when you apply operators to values of different types. JavaScript types can be broadly categorized into 2 categories

Primitive Types : (number, string, boolean, null, undefined, symbol)
Compound/Structural Types : (Object, Array, Map, Set, Date, etc..) basically almost everything made with new keyword

Types of conversion

Irrespective of any type, be it primitive/structural, when type coercion is performed, it converts the operand type into one of these types:

To String
To Number
To Boolean

Conversion logic for primitives and objects works differently, but both primitives and objects can only be converted in these three ways.

Primitive to String coercion:

When adding two operands with the binary(+) operator, the JavaScript engine will try to add the values if both the values are of number type.

console.log(3 + 2); // 5
console.log(20 + 10); // 30

But when either of the operand is a string type, javascript performs coercion on that operand & converts both of them to string. Hence the result is now a concatenation of 2 strings. The order of the operands doesn't matter.

// number,string
console.log(5 + 'hi'); // '5hi'
console.log('5' + 5); // '55'

// boolean, string
console.log('hi' + false); // 'hifalse'
console.log('12' + true); // '12true';

// number, boolean, string
console.log(1 + 'two' + false); // '1twofalse'
console.log(2 + true + '3'); // '2true3'
console.log('Three' + 4 + false); // 'Three4false'

// null, string
console.log(null + '123'); // 'null123'

// undefined, string
console.log('123' + undefined); // '123undefined'

What happens when both the operands are not number, or also if either of them is not a string as well while using the binary(+) operator

console.log(null + undefined); //NaN

When we try to add null and undefined, the JavaScript engine tries to convert the values to integer resulting in NaN.

Primitive to Number coercion:

There are multiple scenarios where a primitive value is coerced to number type. Any primitive is coerced to a number type when the following operators are involved

Comparison operators('>','<','>=','<=')
Unary operators('+','-')
Arithmetic operators('+','-','*','/','%')except for '+' when one operand is a string
Bitwise operators('|','&','^','~')
Loose equality operator('==')except for when both arguments are already the same primitive

1. Comparison operator

7 <= '3' // false
'5' > 4 // true

// true becomes 1
true > '1' 
1 > 1 // false

// false becomes 0
false < 1 // true

// string 'true' becomes NaN
'true' > 1
NaN > 1 // false

// null becomes 0
null < 5 // true

// undefined becomes NaN
undefined > 10 
NaN > 10 // false

2. Unary operator

+2
// 2

+"123"
// 123

+true
// 1

+null
// 0

+undefined
// NaN

3. Arithmetic operator

'33' - 10
33 - 10 
=> 23

'9' / 3
9 / 3 
=> 3

// false becomes 0
5 / false
5 / 0 
=> Infinity

5 % '3'
5 % 3 
=> 2

// true becomes 1
'true' * 10
1 * 10 
=> 10

// undefined becomes NaN
1 - undefined
1 - NaN 
=> NaN

4. Bitwise operator

true & 0 => 0
true & 1 => 1
true | 0 => 1
true | 1 => 1
true ^ 0 => 1
true ^ 1 => 0

5. Loose equality operator

/*In JS, == operator is very common to compare values. It compares the values based on their values ignoring their types*/
54 == '54'
54 == 54
//true

true == '1'
1 == 1
//true

false == '0'
0 == 0
//true

/* complex cases*/
//null can only be coerced to null and undefined
null == 0
=> false

// 'true' becomes NaN
true == 'true'
=> false

Primitive to Boolean coercion:

Primitives are coerced to boolean when using logical operators like '&&', '||', '!'. The most important point to remember here is even though logical operators do boolean conversions internally, but actually return the value of original operands, even if they are not boolean. The last evaluated operand is returned from each expression.

!(NOT)
!0 => ! (false) // true
!1 => ! (true) // false

&&(AND)
true && '20'
true && true
=> '20'

0 && false
false && false
=> 0

45 && 'hi'
true && true
=> 'hi'

||(OR)
null || 'hello'
false || true
=> 'hello'

null || undefined
false || false
=> undefined

Another interesting thing here is that a primitive type coercion to boolean can also be triggered by the surrounding context, where the type/value is coerced to boolean such as control flows like an if(value) statement. Truthy & Falsy values are the best examples of boolean type coercion. If you don't know what they are you can have a quick read about them here Truthy and Falsy values in JS.

// undefined evaluates to false
if(undefined){
   console.log('truthy');
}
else{
   console.log('falsy'); // falsy
}

Special cases:

NaN doesn't equal to anything, not even itself

console.log(NaN == NaN); // false

SIDE NOTE:

Ever wondered why NaN is not equal to anything, including itself?
Well, there are 2 types of NaN - Quiet NaN (silently assigned) and Signalling NaN (throws an exception). Though, both of them are NaN values, their bits differ in internal representation, so it's possible you are comparing Quiet NaN with Signalling NaN. Hence, JavaScript refuses to compare NaN with anything, including itself.

Take a look at V8 Engines internal function JSEqualTyper (C++).The second if statement clearly states that if either side of == is a NaN, straightaway return false.

Type Typer::Visitor::JSEqualTyper(Type lhs, Type rhs, Typer* t) {
  if (lhs.IsNone() || rhs.IsNone()) return Type::None();
  if (lhs.Is(Type::NaN()) || rhs.Is(Type::NaN())) return t->singleton_false_;
  if (lhs.Is(Type::NullOrUndefined()) && rhs.Is(Type::NullOrUndefined())) {
    return t->singleton_true_;
  }
  if (lhs.Is(Type::Number()) && rhs.Is(Type::Number()) &&
      (lhs.Max() < rhs.Min() || lhs.Min() > rhs.Max())) {
    return t->singleton_false_;
  }
  if (lhs.IsSingleton() && rhs.Is(lhs)) {
    // Types are equal and are inhabited only by a single semantic value,
    // which is not NaN due to the earlier check.
    DCHECK(lhs.Is(rhs));
    return t->singleton_true_;
  }
  return Type::Boolean();
}

When applying == to null or undefined, numeric conversion does not happen. null equals only to null or undefined, and does not equal to anything else.

null == 0               // false, null is not converted to 0
null == null            // true
undefined == undefined  // true
null == undefined       // true

This is because null and undefined, both are evaluated as false in terms of boolean in JavaScript. Hence, we get the values implicitly converted to Booleans.

Boolean(null)       // false
Boolean(undefined)  // false

Useful Tip:

Type coercion can be confusing sometimes, since the decision of converting an operand to a particular type is entirely made by the javascript engine. In real-world applications, this can be scary. One operator that does not trigger implicit type coercion is ===, which is called the 'strict equality operator'.Hence always use the '===' operator.Hope this article was useful. Let me know if you guys have any questions. Happy Learning 😊😊...

What is the Execution Context, Execution Stack & Scope Chain in JS

Tahir Ahmed Tapadhar — Sun, 09 Aug 2020 19:20:15 +0000

If you are or want to be a JavaScript developer, or are learning javascript, then you must know how the JavaScript programs are executed internally.Understanding of the execution context and execution stack is vital in order to understand how and why javascript works the way it does. Every javascript piece of code internally uses these concepts and knowing them well will surely make you a much better JavaScript developer.

Execution Context:

There is always a context present with javascript in which your code is being executed. Every block of code will have its own context in which it is executing. Simply put, an execution context is nothing but an environment where the Javascript code is evaluated and executed. Whenever any code is run in JavaScript, it’s run inside an execution context.

There are 3 different types of execution context in JavaScript:

Global Execution Context (GEC):
This is the default or base execution context. The code that is not inside any function is in the global execution context. It performs two things: it creates a global object which is a window object (in the case of browsers) and sets the value of _this_ to equal to the global object. There can only be one global execution context in a program.
Function Execution Context (FEC):
Every time a function is invoked, an execution context is created for that function. The execution context is destroyed when the associated function has returned or execution is over. Each function has its own execution context, but it’s created when the function is invoked or called.
Eval Execution Context (EEC):
code inside an eval function also has its own execution context. But since it is now deprecated & also not recommended, we shall not discuss it.

Below is a sample code snippet demonstrating the execution context.

/* global execution context */

// every execution context has it's own variable environment
// GEC: global execution context
// FEC: function execution context

function baz(){
   // FEC of baz
   var foo = 3;
   console.log(foo); //3
}

function bar(){
   // FEC of bar
   var foo = 2;
   console.log(foo); //2
   baz();
}

var foo = 1; //GEC
console.log(foo); //1
bar();
console.log(foo); //1

/* global execution context */

When the program runs, the first thing the javascript engine creates is a global execution context. Everything that is not inside a function is a part of the GEC. So the var foo is in the GEC & is put into memory space.
When the javascript interpreter comes across bar(),the function is invoked, a new execution context is immediately created and everything inside of it starts executing.
Now this is the most important point to remember: 'Every execution context (FEC) has it's own variable environment'. Therefore when the variable foo is declared again with value 2, it is created only within bar()'s execution context.
Then again baz() is invoked, and a new execution context with its own variable environment, it's own memory space for its variables is created. Hence, when the variable foo is re-declared in baz(), it is only limited to this environment, and is different altogether.
In short, every time you call a function, you get your own execution context.
So even though, foo is declared 3 times, they are distinct, they are unique, they don't touch each other.
Therefore calling functions bar() and baz() wouldn't affect foo = 1 in the GEC. To prove that, we have consoled foo again at the very end of the program after calling bar(). Should it have an impact? The answer is NO!!.

This is how it is executed internally from execution context's point of view.

Execution Stack:

In computer science, a call stack is a stack data structure that stores information about the active subroutines of a computer program. This kind of stack is also known as an execution stack, program stack, control stack, run-time stack, or machine stack, and is often shortened to just "the stack". Wikipedia

A subroutine in simple words is nothing but what we call a function. Simply put, JavaScript has a single call stack in which it keeps track of what function we are currently executing & what function is to be executed after that. But first- what's a stack? A stack is an array-like data structure where you can add items(push) to the back and only remove(pop) the last item from it.

Woof!! those are some big words. I know it is difficult to digest the above piece of information, but be patient. Trust me, a piece of code and some visual diagrams will definitely make the concept clearer. So let's examine a piece of code.

// Global execution context

console.log("global execution context");

function foo() {
  console.log("foo is executing");
  console.log("foo has finished executing");
}

function bar() {
  console.log("bar is executing");
  foo();
  console.log("bar has finished executing");
}

function baz() {
  console.log("baz is executing");
  bar();
  console.log("baz has finished executing");
}

baz();
console.log("program successfully executed");

// Global execution context

// global execution context
// baz is executing
// bar is executing
// foo is executing
// foo has finished executing
// bar has finished executing
// baz has finished executing
// program successfully executed

Initially, before running any piece of javascript code, the execution stack is empty. When we run a javascript program/file, the javascript engine creates a global execution context and pushes it on top of the stack the moment your program starts executing.

In simple words, it is the context of your entire javascript program/source code or the context within which your entire code runs(as shown in the code snippet).

Given below is a simple illustration of how it really looks from the execution stack's perspective.

When the javascript interpreter comes to baz(), the point of time when baz() is called, a new execution context is created for baz() and is put on top of the execution stack.
Inside function baz(), statements are executed then (if any). The moment bar() is called inside baz(), a new execution context of bar() is created and is pushed to the top of the stack.
The interpreter then executes bar() and the statements inside of it until it encounters invoking function foo() and a new execution context is created and pushed on top of the stack.
In the above diagram, at any given point:

(i). The running execution context is always on top of the stack.
(ii). There can be at most one execution context running on the stack at a time.
(iii). The arrow(⇨) on the stack denotes the current execution context.

After foo() has finished execution, it is popped off from the stack & the control comes to the next line from where it was invoked i.e from bar().
Similarly, the process goes on until each and every execution context gets completed and is removed from the stack.
Finally, the GEC remains on the stack and is eventually popped off when the program completely finishes executing.

Scope Chain:

What if, an execution context has no definition of a variable which it wants to print? Consider the code snippet below. baz() has no variable declared as foo in its execution context.

// every execution context has a reference to it's outer environment

function baz(){
   /* foo's value is taken from the outer environment i.e. global environment */
   console.log(foo); //1
}

function bar(){
   var foo = 2;
   console.log(foo); //2
   baz();
}

var foo = 1;
bar();

'Every execution context has a reference to it's outer environment', all the way up to the global scope. This hierarchy/chain of reference is what is termed as Scope Chain. So if the current execution context has a variable definition missing, it accesses its outer environment to look out for the variable. In the above code, when the execution context of baz() couldn't find a variable foo inside its environment, it went searching for it in it's outer environment i.e. Global execution context and prints out it's value. This is what happened when the current execution context couldn't find a variable foo.

The outer environment of baz() happens to be the global execution context in our example. This is not the case every time. Consider the code snippet below:

// every execution context has a reference to it's outer environment

function bar(){
   var foo = 2;

   /* here baz's outer environment is the execution context of bar */
   /* and not the global execution context*/
   function baz(){
      console.log(foo); //2
   }

   baz();
}

var foo = 1;
bar();

Now, we have moved baz() inside the function bar(), i.e. it is now nested inside bar(). In this case, it's outer environment has now changed from the global execution context to the execution context of function bar(). So now instead of printing foo as 1(from GEC) it prints foo as 2(from bar's execution context).

Conclusion:

Execution context had always been confusing for developers at first, especially those who are new to JavaScript. Visualizing these concepts and how they work internally helps simplify things making it a piece of cake 🍰. Knowing these concepts will help you know how & why javascript works the way it does. Do let me know if you guys have any queries or feedback for improvement. Hope you like it. Happy learning...😊

Truthy and Falsy values in JS

Tahir Ahmed Tapadhar — Wed, 29 Jul 2020 21:23:23 +0000

"Every value in JavaScript has an inherent boolean value. When that value is evaluated in the context of a boolean expression, the value will be transformed into that inherent boolean value."
The paragraph above is pretty dense with information. You should probably re-read it again.

Falsy values

A value is falsy if it converts to false when evaluated in a boolean context. For example, an empty String "" is falsy because, "" evaluates to false. You already know if...else statements, so let's use them to test the truthy-ness of "".

Here’s the list of all of the falsy values:

Boolean value false
number 0
number negative -0
BigInt 0n
empty string ""
null type
undefined type
NaN(stands for Not a Number).

There are eight falsy values in all of JavaScript! MDN
(at the time of writing this article)

Truthy values

A value is truthy if it converts to true when evaluated in a boolean context. For example, the number 1 is truthy because, 1 evaluates to true. Let's use an if...else statement again to test this out:

Here are some other examples of truthy values:

true
42
"pizza"
"0"
"null"
"undefined"
{}
[]

Simply put: if it's not in the list of falsy values, then it's truthy.

Be a little extra careful when working with the same element value but different element type. For example, 0 is a number while "0" is a string. Similarly null is different(falsy) from string "null"(truthy) and undefined(falsy) is different from string "undefined"(truthy)

Comparison operator

Even though as mentioned above that [] is a truthy value but behaves differently when used in conjunction with a comparison operator like ==, it evaluates to false. Likewise null is a falsy, but when used with a == operator evaluates to true. Similary for undefined and NaN.

That's all there is to this topic. For some people truthy & falsy values might be not of a big deal, but knowing how they behave can save you some real time instead of just scratching your head.Let me know if you guys have any questions. Happy Learning..

What is an Object in JavaScript? : Part II

Tahir Ahmed Tapadhar — Mon, 27 Jul 2020 20:49:59 +0000

In this post we will go into a bit deeper understanding of how an object is structured, enumerating properties of an object, property descriptors, etc.So if you haven't checked out my previous post What is an Object in JavaScript? : Part I where I have discussed the basics of objects, I highly recommend you check that out first.

So let's go ahead and create an object person which has 2 properties: name & age. If you notice here that both of these keys are of type string. In javascript an object key can only be a string. What if we want the property name to be a number and not a string. It is not possible to have a key which is not a string. But what if we want a number as a key?

Square bracket notation[]:

At first square brackets may just seem as an alternative to the dot notation to access a property but in fact, it has some unique applications. Using the square bracket notation, you can actually create a number as a key, define a key with a white space in it, also define an empty string as a key.

Now this is really weird!! Lets take a moment to let that sink in. So what is happening internally? When we use the [] bracket notation, anything inside it is stringified by javascript. For example, in the above code, when the key 404 was added to person, javascript calls the '404.toString()' method, and will use this result string as the new key. Well we just used a number as a key, I wonder is it possible to use a function as a key?

Function as Key of an object:

Yes, we can use a function as a key using the [] bracket notation. Remember that javascript calls the toString() method implicitly if you use a key other than string type or while using the bracket notation. In the above example, when we write obj[funny] javascript will call the funny.toString() method i.e. it will convert the whole function into a string & will use it as a key.If you print out obj, you will see something like this.

I know, JavaScript is funny that way. The question now is, how can we invoke the bunny function which is the value assigned to our key(funny) which is also a function. Calling obj.funny or obj.funny() simply won't work.

Enumerating object properties:

We can iterate through the properties of an object. There are three native ways to list all the object properties:

for...in: This method traverses all enumerable properties of an object and its prototype chain.
Object.keys(): This method returns an array with all the own (not in the prototype chain) enumerable properties' names of an object.
Object.getOwnPropertyNames(): This method returns an array containing all own properties' names (enumerable or not) of an object.

Property Descriptors:

Every object property in javascript has its own property descriptors which hold additional information about that property. Further more each property descriptors have certain inbuilt attributes defined by javascript. They are mainly divided into 2 categories: Data Descriptors and Accessor Descriptors

In this post, I'll be talking about data descriptors only. We can very easily in javascript access the property descriptors of an object property using the in-built method Object.getOwnPropertyDescriptor(obj, 'name') where obj is the reference object and name is the property name.

Here the value of the property name of person object is Betsy, is writable(can be modified), is enumerable, is configurable. Likewise we can also change these default attribute values of a property descriptor as per our needs using the in-built Object.defineProperty(obj, 'name', {descriptor}) method. An example illustrating its usage is given below.

And that is all about objects in javascript that you need to know for a head start. The predefined Object type of javascript however has a lot of other cool useful methods which can also be used to leverage performance of your application. Let me know if you guys have any questions. You could drop them in the comments section below. Happy learning !!....😊😊

What is an Object in JavaScript? : Part I

Tahir Ahmed Tapadhar — Thu, 23 Jul 2020 20:35:34 +0000

You may have quite often heard developers saying the phrase "Everything in JavaScript is an Object !!!" I'm pretty sure you have. So what exactly do we mean by that? What is it really? Today I will try to explain you what an object really is in this article...

Like every programming language, JavaScript also has building blocks which are known as "Objects" or formally speaking "Object Literals". So lets go ahead and see how to create an object in JavaScript.

Object:

Congratulations! you just created your first object in JavaScript.
So let's go ahead and examine the above line of code. In JavaScript we declare a variable using the var keyword followed by the name of the variable i.e. obj in our case. Curly braces{} here denotes an object in JavaScript. Since there is nothing inside of it, therefore we call it an empty object.

But real-world objects aren't as simple as this one. An object is a collection of properties, and a property is an association between a name (or key) and a value. An Object Literal or simply put Object have properties in the form of key-value pairs. So lets go ahead and define some properties of our object.

Object Properties:

A property's value can be of any type. Our above object person has 3 properties namely:

name which is of type string
age which is of type number
isEmployed which is of type boolean

Methods:

A method is a function associated with an object. We can also have functions as a property of an object. So if an object has a property which is a function, that property is known as a method. Lets see that in action.

Accessing Properties:

You see how easy it is to define properties of an object. Likewise, it is also easy to access the properties of an object. We do that using the dot(.) notation in JavaScript.

NOTE: One very important thing to note here is that both JavaScript objects & properties are case sensitive. So if you do something like person.Name it will give you undefined

There is another way using which we can access the properties of an object. You simply need to enclose the name of the property in a square bracket [] and need to put them inside single/double quotes '' / "". However accessing a property using this method is not recommended. Below is an example demonstrating the above method.

One advantage of using the bracket notation is that you can define a property with a white space between them which you cannot do using the dot notation. You can also define an empty property using the bracket notation.

Adding Properties Dynamically:

In JavaScript, we can easily add properties to an object dynamically at any instance of time.For instance, I could do something like this.

Here,we have added a property country to our person object dynamically(at run-time). Now if we print our person object again we could see a new property.

Deleting properties:

Similarly, javascript allows us to remove/delete a property of an object when ever we want. To remove a property we use the delete keyword followed by the object.property name as shown below.

Nested Objects:

It is possible that an object can be nested inside of another object. Since, the value of a property of an object can be anything from a string, number to a function...it can also be another complete new object. In the below example, the value of the property address is a complete different object.

So now I hope you guys are familiar as to what are objects in JavaScript and how to use them. I've demonstrated the very basics here. The second edition to this article will have a high level overview or more in-depth understanding of what JavaScript objects are & how are they structured internally. Please let me know if you guys have any questions. You could drop them in the comments section below. Happy learning !!....😊😊