One of the best video tutorials about JavaScript async patterns is from Kyle Simpson. I watched this video about three years ago and it's still relevant today.

I am writing this post for myself to refer through the async concepts which are vital in writing JS applications.

Without further ado,

In summary he talks about,

1. Callbacks
2. Promises
3. async await
4. Observables (RxJS)
5. Communicating sequential processes (CSP)

All of which can achieve the same results (concurrent async calls) but he shows how you can improve your code by adapting advance async patterns.

I thought it's good one to remember even if it out-dates in the future.

For anyone looking for quick excel download of indexes like S&P 500, FTSE 100 with real time price, change %, PE ratio and market cap information, I am posting a google sheet link that you can utilize for your work.

Indexes

S&P 500 Symbol,Name,Sector,Exchange,Price,Change,Percentage,PE,EPS,Market Cap FLS,Flowserve Corporation,Industrials,NYSE IVZ,Invesco Ltd.,Financials,NYSE LB,L Brands Inc.,Consumer Discretionary,NYSE AIV,Apartment Investment & Management,Real Estate,NYSE RHI,Robert Half International,Industrials,...

Google Docs

I use it for my own personal investing. I though it will be useful for the wider community. Let me know your thoughts and if you like anything to be added to the sheet please contact me.

I will be updating the sheet with latest information and adding more indexes as time goes.

Few days back, I wrote an article about how helpful the Pipeline Operator could be for some use cases.

Two JavaScript experimental features that I’m already dreaming of implementing on my codebase.

Ever heard of AggregateError and Pipeline Operator (|>)

Karthik Vasudevancodesips

I shared this article on multiple forums and a lot of users from Reddit gave interesting thought, but one of them gave a rough sketch of writing pipeline decorator using curry. So I went ahead and gave it a try, and here I have it. I just thought it will be useful for anyone looking ways for writing cleaner code.

var-kar/pipe-decorator

A pipe decorator(Pipeline Operator) with promise callbacks for JavaScript - var-kar/pipe-decorator

var-karGitHub

It is a very tiny library with only 45 lines of code. It has room for loads of improvements. I welcome you to contribute to the codebase or you can use this decorator with your favourite libraries like lodash, underscore etc.

Syntax

pipe(arity)(Function)...();

Notice how it ends with an empty invocation, this will make sure it returns the result.

I knew similar functionality exists with libraries like RamdaJS. But, I just thought it will be good to learn and create a smaller library than Ramda.

Promise

The library also handles promise, for example, you can do pre and post-processing of data along with Promise to make it more useful.

Notice how step 2 passes two arguments to _.difference function and notice step 4, get results from Promise and pass it on to _.filter function along with the email to be found as a second argument.  

Use cases

1. Makes your code clean and easy to read
2. Better than chaining or at least in my opinion
3. Makes multiple Promise handling much cleaner and readable.
4. Pre and post-processing of data for a promise gets easier and cleaner.

Summary

It's always good to share with a wider JavaScript community to get a different perspective. I'm for sure going to give it a try on my next project to reduces the number of lines of code I write.

I welcome you to contribute and make it even more useful covering more use cases.

Finally, please share your thought. Thank you.

In JavaScript Currying is a technique to translate a function which takes multiple arguments into a sequence of functions which takes single argument yet producing the same result.

Why do we need it?

1. In functional programming, it provides a way of managing arguments to a function. Helps you deal with only one argument at a time.
2. It decorates your code by reducing the number of arguments supplied to a function directly.

How does it look?

// Simple function with multiple arguments
function sum(a, b) {
    return a + b;
}
console.log(sum(1, 2)); //Output: 3

// Function with returning sequencial function that takes one argument - Curry
function sum(a) {
    return function(b) {
    	return a + b;
    };
}
console.log(sum(1)(2)); //Output: 3

Notice that instead of returning the sum of a and b we return an anonymous function which takes b as an argument. This gets immediately invoked upon return when we do sum(1)(2).

One has to ask a big question here. How does the scope of variable a available to the inner anonymous function that gets invoked later 🤯?

The answer is very simple, its JavaScript Closures. If you haven't read my previous post about closures, please do.

JavaScript: Closures

Hide your secrets 😉

Karthik Vasudevancodesips

Perpetual Curry

You can make the above curry technique by infinitely returning a function which takes one argument and accumulate the result till you say its enough. Something like,

sum(1)...(n)() //Output: Sum of n numbers

Let's get to the crux,

function perpetualCurry() {

    return (() => {
    
        return perpetualCurry(); // Recursive
  
    });
}

console.log(perpetualCurry()()()()()()()) // Output: [Function] 

Writing a perpetual curry function is kind of writing a recursive function. The only difference is that for every recursion, our function will return another function. The above function perpetualCurry will always return an anonymous function that can be invoked  immediately. This is how a basic infinite curry is constructed.

Let's make the above perpetualCurry function a bit more useful that does our sum(). Something like,

sum = (x, y) => x + y;
perpetualCurry(sum)(1)(2)(3)(4)(5)(); //Output: 15

Notice how we end the infinite curry, and notice how the first invocation takes a function as an argument.

But before our function gets too complex to understand let do one more stage of problem break down. Let's accumulate all our arguments and return it as an array. Also, try and end the infinite loop and return accumulated arguments.

function perpetualCurry() {

    const curryWrapper = ((...args) => {
    	
        return (() => {
            if (!x) { // If no argument supplied, It ends the infinite curry
                return args;
            }
            return curryWrapper(...args, x); //Recursive, Accumulate args
        })
  
    });
    
    return curryWrapper();
}

perpetualCurry()(1)(2)(3)(4)(5)(); // Output: [1,2,3,4,5]

See how we added another layer of function called curryWrapper(). Notice on our recursion code how we use spread operator and accumulate our arguments. The first invocation is reserved for passing the sum() function that can be used with call or apply to return our desired result.

Let's do our final perpetualCurry() function that will return our desired result.

sum = (x, y) => x + y;


function perpetualCurry(fn) {

    const curryWrapper = ((...args) => {
        return ((i) => {
            if (!i) {
                //Only new thing
                return args.reduce((accmulate, arg) => {
            	    return fn.call(null, accmulate, arg);
                }); 
            }
            return curryWrapper(...args, i);
        })
    });
    
    return curryWrapper(0);
}

perpetualCurry(sum)(1)(2)(3)(4)(5)(); //Output: 15

The only new addition to the function is the reduce code block with fn.call. The reduce() just accumulates your result by executing our sum.call() by passing two arguments at a time to that function. Finally the reduce() returns the result of all addition when it reaches the end of args array.

If you would like to read more about reduce and call I have added their MDN links at the bottom.

One of the most popular libraries written with this technique is, https://ramdajs.com/

Voila! we reached to the end of this post.

Ideas to further improve

1. Accommodate more varied data types like inputting other functions, arrays, objects instead of just numbers.
2. Curry async/await or Promise methods.
3. Or a combination of all of the above.

Summary

1. Curry technique can make your code clean and reduce complexity for functional programming as it deals with one argument at a time.
2. You can extend currying by infinitely returning a curried function.
3. You can reduce the number of line of code on your project by making the perpetual curry function take any datatype as argument.

References

1. https://en.wikipedia.org/wiki/Currying
2. https://codeburst.io/perpetual-currying-in-javascript-5ae1c749adc5
3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

There are so many terminal emulators available for windows, but I have been using this lesser known terminal that no one would probably given it a try.

Git Bash

Git for Windows

We bring the awesome Git VCS to Windows

You can do all linux based commands, colour coded, tab complete and all the good things that you can get from a linux or mac terminal or at least close to.

Drawbacks,

1. No regular ctrl+c and ctrl+v for copy and paste.
2. No multiple tabs
3. No multiple screen option.

But you can get around these by other means.

So, Get Bash is the only terminal emulator you need for Windows or at least in my opinion ;)

Thats all I have for today.

AggregateError object takes multiple iterable Error instances and wraps them in a single error.

Syntax?

AggregateError(Array<Error>, "message");

How to throw an AggregateError?

throw new AggregateError([
    new Error("Required field missing");
    new TypeError("Looking for string by array found");
], "All errors in your operation");

How to catch an AggregateError?

try {
    throw new AggregateError([
        new Error("Required field missing");
        new TypeError("Looking for string by array found");
    ], "All errors in your operation");
} catch(e) {
    console.log(e instanceof AggregateError); //true
    console.log(e.message) //All errors in your operation
    console.log(e.name) //AggregateError
    console.log(e.errors); // [Error: "Required field missing", Error: "Looking for string by array found"]
}

Use cases

1. During Promise.all or Promise.any all errors from all async operations can be caught with a single error object. Helps you provide detailed error messages.
2. If you are an API developer, you can collect all validation errors in an array for a call and report it once, instead of going for a round trip. Most of you may already do it with different ways, AggregateError makes it easy by instantiating one object for each request and lets you collect many errors from ACLs, Authentication, Validation etc.
3. You don't have to interrupt an execution in the middle by throwing an Error object. You can let it pass and collect all errors in an array and finally deal with the errors if at all required.

MDN Docs

AggregateError

The AggregateError object represents an error when several errors need to be wrapped in a single error.

MDN Web Docs

Pipeline Operator

Functions with a single parameter, the value of a parameter can be piped into a function.

Syntax

expression |> function

Example

-5 |> Math.abs; // Output: 5

Chaining

Let's take an underscore.js library's example,

var stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];

stooges |> reverse |> last; //Output: {name: 'curly', age: 25}

With this new way of chaining methods in JavaScript, it gets rid of the whole debate about weather method chaining is a good practice or not.

Unknowns

1. As it takes only one parameter, do they allow more complex syntax? Like,

var names = ["John", "Sam", "Dave", "Bob"];
var age = [30, 16, 27, 35];
var getAgeFor = "Sam";

var ageOfSam = age[getAgeFor |> names.indexOf];

2. Can they play a role in async/await functions? Imagine how clean the code will look.

3. Can they also play a role for generator functions?

MDN Docs

Pipeline operator

The experimental pipeline operator | (currently at stage 1) pipes the value of an expression into a function. This allows the creation of chained function calls in a readable manner. The result is syntactic sugar in which a function call with a single argument can be written like this:

MDN Web Docs

Summary

1. AggregateError helps you collect all Error objects as one object.
2. Pipeline Operator makes calling functions with single parameter clean and helps you chain methods.

On our previous post, we looked at variable hoisting. In this post, we will take a look at function hoisting, which is part two of JavaScript Hoisting concept and part of our JavaScript basic concept series.

Let's start with a code example,

foo(); //Output: Hello world

function foo() {
	console.log("Hello world")';
}

The above way of writing a method with a function keyword is called a function declaration.

Function declarations are always hoisted by JavaScript in its existing scope. And you can see that the function foo() is available before its declaration.

You can write a function in another way and its called function expression. With function expression, you declare an anonymous function and assign it to a variable. Let's see that with a code example.

foo(); // Reference Error": 'foo' is not a function

var foo = function() {
	console.log("Hello world");
}

or in ES6

let foo = () => {
	console.log("Hello world");
}

Function expression on both ES5 and ES6 will not get hoisted. The variable declaration will get hoisted but without a function assignment. The interpretation of the above code by JavaScript will be,

var foo;
foo(); //Referance Error: 'foo' is not a function
console.log(foo); //Output: undefined

var foo = function() {
	console.log("Hello world");
}

ES6 Classes

The data type of an ES6 class is a Function. So, classes behave the same as function when it comes to hoisting. Class declarations are hoisted and Class expressions are not.

There is one extra rule with class declarations, you have to declare a class before you can use it. Let's take a look,

var rectangle = new Rectangle(10, 5, 5); // Reference Error: Cannot access 'Rectangle' before initialisation 
class Rectangle {
	constructor(length, width, height) { 
    	this.length = length;
        this.width = width;
        this.height = height;
    }
    volume() {
    	return this.length * this.width * this.height;
    }
    area() {
    	return this.length * this.width;
    }
}

The fact that the error is "initialisation" error and that it is not a 'is not defined' error, proves that JavaScript can see its definition hence it is hoisted.

Same as function expression, class expressions are not hoisted.

var rect = new Rectangle(10, 5, 5); // Type Error: Rectangle is not a constructor
var Rectangle = class Rectangle {
	constructor(length, width, height) { 
    	this.length = length;
        this.width = width;
        this.height = height;
    }
    volume() {
    	return this.length * this.width * this.height;
    }
    area() {
    	return this.length * this.width;
    }
}

Summary

1. Function and ES6 Class declarations are hoisted.
2. Function and ES6 Class expressions are not hoisted.
3. ES6 let and const hoist the same way as var does.

Despite a lot of advancements and optimizations on all technological fronts, image compression techniques have not changed a lot for more than 30 years (in the case of JPEG). Or at least their progress is very slow.

https://techcrunch.com/2020/05/07/deep-render/

Deep Render's founders claim that they are completely reinventing compression for images and videos and optimise more than 50% in size with better quality!

They claim that they achieve this by optimising the colour, hue and saturation details of an image to what human eye can see and grasp and getting rid of all other details. And they do this optimisation using AI & ML.

This is insanely blows my mind. Just imagine more than 50% of worlds storage capacity will be freed up overnight or it will take half the time to send good images of space from light-years away!

There are still a lot of unanswered questions that puzzles me. Some of them are, after optimisation do they then compress into JPEG or a completely new file format? If they are completely new format how quickly do current rendering devices and browsers adapt to this new file format? How do transparencies look? Is this lossy technique good enough for medical sciences or space?

Till I get those answers, I will be keenly watching Deep Render's progress.

I wish Deep Render's founders a very good luck for this important cause.

On our basic concepts of JavaScript series of posts, let's take a look at Variable Hoisting.

JavaScript moves variables and functions declaration to the top of its scope during execution. This behaviour in JavaScript is called Hoisting. Let's see that with a code example,

console.log(foo); // Output: undefined
var foo = "hello world";

In any other programming languages, the expected output for the above code would be some sort of "foo not declared error". But in JavaScript, it is already declared with the type of undefined. This is because JavaScript interprets the above code like,

var foo;
console.log(foo); // Output: undefined
foo = "hello world";

It takes all var declaration to the top of its scope and this is called variable hoisting.

Why we should learn Hoisting?

Because it will create a lot of unexpected behaviour during execution. On my previous posts, we looked into Closures and how they create a local scope whenever you declare a function. Let's take a look at this example to see how Hoisting breaks that rule when you don't declare the variable with var keyword,

function foo() {
    bar = "Hello world";
    var baz = "I'm new to coding";
}
foo();
console.log(bar); //Output: Hello world
console.log(baz); //Reference Error: baz is not defined

notice we haven't used var keyword in front of declaration bar. JavaScript first looks for its variable declaration on its local scope. If it can't find a local declaration, it goes up one level in scope and looks for bar declaration. On the above example, one level up to foo() scope is global scope. If it can't find in its parent scope it automatically declares your variable with var keyword like,

var bar;
function foo() {
    bar = "Hello world";
    var baz = "I'm new to coding";
}
foo();
console.log(bar); //Output: Hello world
console.log(baz); //Reference Error: baz is not defined

and no matter how deep the foo function scope is, JavaScript will keep looking at its parent scopes till it finds or declares bar variable.

ES6 Declarations

What happens to let and const keywords of ES6? Do they get hoisted? For that let's see what they output if you just declare them and don't assign a value same like what the var variables gets hoisted.

let foo;

console.log(foo); Output: undefined

const bar; //Syntax error: missing initializer in const declaration

so let's see if JavaScript hoist let and const

console.log(foo); //Output: undefined
let foo = "Hello world";

console.log(bar); //ReferanceError: cannot access bar before initialization
const bar = 200;

the fact that both the variables are available to console.log proves that they too get hoisted. But in the case of const, it is different. Declaring const bar; without assignment produces SyntaxError, because of this JavaScript hoist them but doesn't allow you to access the const variable before its initialization. So yes, they too gets hoisted.

To keep the post small and concise, I am splitting variable and function hoisting into two posts.  

We have learnt scopes and closures in JavaScript with my previous posts. Combining these two core concepts, JavaScript gives us a beautiful syntax called self-invoking anonymous functions. It simply means an unnamed function that executes itself. This special syntax can give us some extraordinary powers 💪,

1. Power to expose only selected set of variables and methods to its outer scope.
2. Power to close down on variable and method name clashes with other code blocks or third party libraries.
3. Power to control JavaScript asynchronous executions.
4. With all the above powers, comes the greater responsibility of writing your open source libraries for JavaScript using self-invoking anonymous function blocks.

Now let's take a look at its syntax. It's very simple.

(function() {

})()

The syntax is self-explanatory. Why self-invoking? Because the last () brackets executes the function. Why anonymous? Because the function doesn't have a name. You can have as many anonymous functions as you want in JavaScript.

One rule to declare anonymous functions is to have a wrapping () brackets. In other words, you can pass an anonymous function where ever you see a wrapping () brackets. Eg,

function executeAnonymousFunction(fn) {
	fn(); //Prints hello world when our anonymous function gets invoked at this place. 
}
executeAnonymousFunction(function() { // Note: anonymous fn passed as parameter
	console.log("Hello world");
});

or

setTimeout(function() {
	console.log("hello world"); //prints hello world after 1 second.
}, 1000);

Now let's take a look at how self-invoking anonymous functions or self-executing anonymous functions give you all the powers that we talked about earlier.

Power to expose a selected set of variables and methods to the outer scope.

Let's take a code example,

var myLibrary = (function() {
  var privateVariable = "I'm a private variable";
  var publicVariable = "I'm a public variable"
  
  function privateMethod() {
    console.log("I'm a private method");
  }
  function publicMethod() {
    console.log("I'm a public method and I have access to:");
    console.log(privateVariable);
    console.log(privateMethod());
  }

  // Expose only public items
  return {
    publicMethod: publicMethod,
    publicVariable: publicVariable
  }
})();

myLibrary.publicMethod(); // Prints all console.logs
console.log(myLibrary.publicVariable); // Prints I'm a public variable

console.log(myLibrary.privateVariable); // undefined
myLibrary.privateMethod(); // Uncaught TypeError: myLibrary.privateMethod is not a function

You can see that the private methods and variables are well encapsulated within our anonymous function, make themselves available within the block, but not outside.

Power to close down on variable and method name clashes with other code blocks or third party libraries.

Again let's look this through code example,

var myLibraryOne = (function() {
    var bar = "Hello world"; // same variable name 
    function foo() { // same method name
    	console.log(bar);
    }
    // some other operations
    return foo;
})();
var myLibraryTwo = (function() {
    var bar = "Hello world"; // same variable name
    function foo() { // same method name
    	console.log(bar); 
    }
    // some other operations
    return foo;
})();

Both of those self-executing anonymous functions have same-named variables and methods. But they never complain that the variable is already declared. Thus it avoids clashes with other libraries and code blocks.

Power to control JavaScript asynchronous executions.

Let's take this code,

for (var i = 0; i < 5; i++) {
    setTimeout(function() { // asynchronous operation
    	console.log(i);
    }, 1000 * i);
}

I have been asked this exact question in many interviews. Anyone assessing the code would think the console.log will print,

prints: 0 // after 0 second
prints: 1 // after 1 second
prints: 2 // after 2 seconds
prints: 3 // after 3 seconds
prints: 4 // after 4 seconds

And if you have answered the above, the interviewer might have kicked you out of the door! And if he doesn't, you please kick him out.

The answer for the above code is quite different and it is,

prints: 5 // after 0 seconds
prints: 5 // after 1 seconds
prints: 5 // after 2 seconds
prints: 5 // after 3 seconds
prints: 5 // after 4 seconds

Yes, it prints '5' five times at various intervals!

This is because the JavaScript event loop executes the code in a unique order. It priorities synchronous operations (in this code example it is the for loop) over asynchronous operations. So, the for loop registers all setTimeout for later execution. By the time for finishes, the value for variable i is 5 in the memory. Then comes the asynchronous operations like setTimeout. And this is why the console.log can only read 5 for variable i from the memory.

How can we fix this? The magic power here is the self-invoking anonymous functions. How is it going to help? let's take a look,

for (var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() { // asynchronous operation
            console.log(i);
        }, 1000 * i);
    })(i); // This is how we pass parameters to self-invoking functions
}

The above code will print exactly the result we wanted,

prints: 0 // after 0 second
prints: 1 // after 1 second
prints: 2 // after 2 seconds
prints: 3 // after 3 seconds
prints: 4 // after 4 seconds

Self-invoking anonymous functions give an individual private scope of i for each setTimeout we register to JavaScript event loop or eval loop. It means we have five times i declared with different values from 0 to 4 in the memory, each with its scope wrapped. Pure magic 🧝‍♀️!

In real-world project building, you might be asked to write a code to fetch a list of songs from an API and for each song, you will be asked to fetch its artist name using a different API. Something like this,

fetchSongsList(function(songs) {
    for (var songIndex=0; songIndex <= songs.length; songIndex++) {
    	fetchSongArtistBySongId(songs[songIndex].id, function(artist) {
            //Artist for song blah blah.
        });
    }
});

If you are following my post keenly, you would have immediately caught what's wrong with the above code. How to fix it? With the magic self-invoking anonymous function voila!

fetchSongsList(function(songs) {
    for (var songIndex=0; songIndex <= songs.length; songIndex++) {
        (function(song){
            fetchSongArtistBySongId(song.id, function(artist) {
                //Artist for song blah blah.
            });
        })(song);
    }
});

Last but not least,

Power of writing your libraries

Great soles who wrote popular libraries like JQuery, underscore or lodash would have started writing their first line of code with self-invoking anonymous function for their libraries. Request you to go and read the open-source library's codebase. You can learn a lot more from them.

Now that you know everything about it, you have the power to start writing your JavaScript library.

If you have reached this far, precious 💍 things in life will find your way.

With that note, adios.

This is the second part of the post on JavaScript core concepts series. In this post, we will look into JavaScript closures.

Closures

Whenever you create a function, JavaScript creates a local scope of all its parameters and variables available within that function. This means all parameters and variables are available only for that function declaration and not outside of it. This act is called closure. So if you would like to encapsulate any variable exposure to global scope, closure is what you are looking for. Let's have a look at closure with this code.

function closeMyVariablesAndParams(param) {
	var foo = "Hello " + param;
    
	console.log(foo); // prints Hello codesips
}
closeMyVariablesAndParams("codesips");
console.log(param); //Error: param is not defined
console.log(foo); //Error: foo is not defined

It also means, no matter how deeply nested they are, the child function will have access to all of its parents' variables and parameters but not the other way around.

var globalScopedVar = "I am globally available";

function grandParentFn() {
	var grandParent = "I'm available to myself also to all my children";
    
	function parentFn() {
		var parent = "I'm available to myself also to all my children";
        
		function childFn() {
			var child = "I'm only available to myself";

			console.log(globalScopedVar); //Prints
 			console.log(grandParent); //Prints
			console.log(parent); //Prints
			console.log(child); //Prints
		}
	}
}

As you can see, every time you create a function JavaScript creates a local scope for your function and this behaviour is called closures.

Some of the most fundamental concepts of JavaScript are hoisting, self-executing function blocks, closures, and scopes. They helps us understand how JavaScript relate variables and methods given a block of code. Learning how they work helps us write bug-free, controlled coding. I never been to an interview without a question from these concepts.

In the following series of posts, we will look at them in detail starting with this post about scopes.  

Scopes 🔭

Scopes are, availability of variables or methods to your block of code. Your block of code could be an if condition, for loop, function or simply global. Let's get to coding,

console.log(this); // prints window object

when you try typing the above code on your browser's developer console, it will print a big Window object, or on Node.js it will print a big global object. This is called the Global Scope. You can write your own variable on the global scope, which will obviously be available on all your if conditions, for loops and functions no matter how deep they go. It also exposes your variable to all third party libraries if you include them in the global scope.

var foo = "hello world";
console.log(window.foo); // prints hello world

The second type of scope is called Local Scope. Local scopes are variables available within your function. Let's have a look,

var foo = "Hello";

function america() {
	var bar = "Howdy";
	console.log(foo); // prints Hello
	console.log(bar); // prints Howdy
}

console.log(bar); // *Error: bar is not defined*
console.log(foo); // Prints Hello

america(); // Function declared on global scope, so the function is available globally

As you can see the variable bar is only available within america() method and not  globally.

The last type of scope is called Block Scope. Block scopes are only available on ES6, so you can use it on the latest Node.js but not widely supported by all browsers.

The secret recipe to write block scope variables in JavaScript is by declaring a variable with let keyword instead of var. Let's take our america() method and implement a block scope.

function america() {
	var bar = "Howdy";
 	if (bar === "Howdy") {
		let baz = "YeeHaw!"; // Notice let keyword
        
		console.log(baz); // prints YeeHaw!
		console.log(bar); // prints 
	}
    
	console.log(baz); // *Error: baz is not defined*
}
america();

Notice how variable baz declared with let is only available within the parentheses {} of  if condition. So variables declared with let encapsulates itself to whichever parentheses {} based code block. It could be for, while, switch, function, etc.

If you declare variable baz with keyword var, something special happens with JavaScript. The output on the last console.log will be undefined instead of not defined error. This special case is called variable "Hoisting". Which we can cover on another post.

These are three types of scopes in JavaScript. Understanding them will enable you to write bug-free code, control what to expose where, and generally become a better developer.

There are many versions of event loop tutorials that you can find around the web. At least for me, most of them are confusing or logically doesn't make any sense.

I find Bert Belder's keynote on event loop easy to understand. It makes sense on how JavaScript returns you the results at different intervals when performing various operations. I can clearly understand the differences between setTimeout() setInterval(), process.nextTick() and setImmediate(). Without further ado,

Why I am writing this post?

1. JavaScript execution patterns are difficult to understand for anyone transitioning from a type based languages. And this keynote may help them rewire their brains!
2. JavaScript backend developers may have asked to explain Node.js event loop probably on every single interview he/she may have attended. They can prepare confidently from this keynote.
3. For interviewers who think they know Node.js event loop but don't.
4. For myself so whenever I forget, I can come and refer my post.

At the time of writing this post, shockingly only 44k people have viewed this wonderful keynote. I'm sure there are more than 44k Node.js developers in the world! 😒

All values when passed to Boolean() returns false are 'falsy' values.

The below are the finite set which is considered as 'falsy' values in JavaScript. All others are considered as 'truthy'. It's like vowels and consonants in English alphabets.  

false
0
'' or `` or ""
0n //BigInt
undefined
null
NaN

It's very easy to filter the above 'falsy' values in a variable,

let a = false;
if (a) {
	//does not enter
}

or 

if (Boolean(a)) {
	//does not enter
}

But one has to be careful when dealing with 0, false, or null as users may genuinely what to input those values to your API or DB etc.  

The below method ignores 0, false, and null but only check for empty strings, undefined, NaN and empty object values. If you find it useful, please feel free to use it.

You can replace typeof value === 'string' and isNaN(value) with more reliable checking. Links below.

Reliable way to check datatypes in JavaScript

Many versions have come & gone, but this one liner is always a winner 🏆!

Karthik Vasudevancodesips

NaN? isNaN? Who’s NaN👵? Checkin’ out JavaScript NaNs the right way.

Hint💡: Please don’t use isNaN()

Karthik Vasudevancodesips

At the time of writing this post ES6 is not widely available on all browsers. So the purpose of this post, is to find a reliable solution to check if the variable is an integer or a float in ES5.

Unlike in other languages, integers and floats are not native data types in JavaScript. For both these types JavaScript assigns Number as it's common datatype.

Integer

We can find if a variable is an integer or not by using ES6's Number.isInteger() method. But that's just available only in ES6.

The more reliable two methods to check for an Integer in ES5 are,

Please go ahead and pick one and leave the worry to the isInt() method that we made.

Float 🏊‍♀️

Unlike ES6's Number.isInteger() method to check for Integers, we have nothing of that sort for float.

This forces us to make our custom method.

Both isInt() and isFloat() gives you a solid way to check for integer and float in JavaScript which doesn't require any compiler like Babel.

You can make it even more robust by replacing the typeof num === 'number' and isFinite(num) conditions with typeOf() and isInfinity() methods that we made on our previous posts. You can find the links below.

Reliable way to check datatypes in JavaScript

Many versions have come & gone, but this one liner is always a winner 🏆!

Karthik Vasudevancodesips

JavaScript: Infinity War

Don’t get too excited. We are not showing Avengers: Infinity War

Karthik Vasudevancodesips