Forem: Ashutosh

Mastering finally clause in JavaScript, for beginners

Ashutosh — Tue, 17 Jan 2023 20:08:29 +0000

What is finally clause in JavaScript?

The finally clause in JavaScript is used together with try and catch statements to provide a block of code that will always be executed, regardless of whether an exception was thrown or caught.

The code in the finally block is guaranteed to run after the code in the try block and any associated catch block(s). This makes it useful for performing cleanup tasks, such as closing a file or database connection, or for releasing resources that were acquired in the try block.

An example of using the finally clause:

try {
// code that may throw an exception
} catch (error) {
// code to handle the exception
} finally {
// code that will always be executed
}

ℹ️ It's important to notice that even if a return statement is called inside the try or catch block, the code inside the finally block will still be executed before the function exits. More on that later.

When to use finally clause in JavaScript

The finally clause in JavaScript is useful for performing cleanup tasks or releasing resources that were acquired in the try block.

Here are a few examples of how to use the finally clause in your JavaScript code:

Closing a file or database connection

If you open a file or database connection in the try block, you can use the finally block to ensure that the connection is closed, even if an exception is thrown.

Releasing resources

If you acquire a resource, such as a lock or semaphore, in the try block, you can use the finally block to release the resource, regardless of whether an exception is thrown.

Logging

You can use finally block to log an event, such as a function call, whether it completes successfully or not.

Cleaning up after an asynchronous operation

You can use a try-catch-finally block to handle errors thrown by asynchronous operations.

Handling return statements

Even if a return statement is called inside the try or catch block, the code inside the finally block will still be executed before the function exits, this allows you to perform some action before the function exits.

Demo time

Let’s see finally clause in conjunction to try-catch block in action. We’ll cover few cases step-by-step. Let’s go.

Case 1: `try` block execute without any error(exception)

// List of assets and operations to perform on some financial assets
const getOperationByAssetType = {
  bank: () => `Bank accounts needs to be updated.`,
  stocks: () => `Stocks generate good returns in long-term.`,
}

// Module.js
function performOperationInDatabase() {
  try {
      console.log('Connect to database...');
      console.log('Perform action:');
      console.log(`\t${getOperationByAssetType['bank']()}`);
      console.log(`\t${getOperationByAssetType['stocks']()}`);
      console.log('Save data...');
  } catch (e) {
      console.error('Something went wrong.');
  } finally {
      console.log('Close database connection...');
  }
}

// Server.js
console.log('Starting server...');

performOperationInDatabase();

We get the following output by executing the code above:

Case 2: An error is thrown in `try` block and code in `catch` block executes

As soon as we try to perform operation on crypto asset type our code throw an error because crypto is a bad investment. In fact it is not an investment 😛

The error thrown in try block is caught in catch block but still finally clause gets executed at the end.

The code will look as below after making the described changes:

// List of assets and operations to perform on some financial assets
const getOperationByAssetType = {
  bank: () => `Bank accounts needs to be updated.`,
  stocks: () => `Stocks generate good returns in long-term.`,
}

// Module.js
function performOperationInDatabase() {
  try {
      console.log('Connect to database...');
      console.log('Perform action:');
      console.log(`\t${getOperationByAssetType['bank']()}`);
      console.log(`\t${getOperationByAssetType['stocks']()}`);
     // NOTE: 'crypto' does not exist in object therefore executing undefined will throw an error
      console.log(`\t${getOperationByAssetType['crypto']()}`);
      console.log('Save data...');
  } catch (e) {
      console.error('Something went wrong.');
  } finally {
      console.log('Close database connection...');
  }
}

// Server.js
console.log('Starting server...');

performOperationInDatabase();

We get the following output by executing the code above:

Case 3: What happen when we use `return` statement inside `try` block?

Let’s remove the faulty line from our code and use a return statement in our try block.

We want to test whether the code in finally clause gets executed or not. In other words, does using a return statement affects the execution of finally clause.

The code will look as below after making the described changes:

// List of assets and operations to perform on some financial assets
const getOperationByAssetType = {
  bank: () => `Bank accounts needs to be updated.`,
  stocks: () => `Stocks generate good returns in long-term.`,
}

// Module.js
function performOperationInDatabase() {
  try {
      console.log('Connect to database...');
      console.log('Perform action:');
      console.log(`\t${getOperationByAssetType['bank']()}`);
      console.log(`\t${getOperationByAssetType['stocks']()}`);
      console.log('Save data...');

      return 'TRANSACTION_ID';
  } catch (e) {
      console.error('Something went wrong.');
  } finally {
      console.log('Close database connection...');
  }
}

// Server.js
console.log('Starting server...');

const result = performOperationInDatabase();
console.log(`Result: ${result}`);

We get the following output by executing the code above:

Surprise, surprise!! finally clause is still being executed before returning the result.

ℹ️ It's important to notice that even if a return statement is called inside the try or catch block, the code inside the finally block will still be executed before the function exits.

Case 4: What happen when we also use a `return` statement inside `finally` clause?

Let’s add a return statement in our finally clause as well.

The code will look as below after making the described changes:

// List of assets and operations to perform on some financial assets
const getOperationByAssetType = {
  bank: () => `Bank accounts needs to be updated.`,
  stocks: () => `Stocks generate good returns in long-term.`,
}

// Module.js
function performOperationInDatabase() {
  try {
      console.log('Connect to database...');
      console.log('Perform action:');
      console.log(`\t${getOperationByAssetType['bank']()}`);
      console.log(`\t${getOperationByAssetType['stocks']()}`);
      console.log('Save data...');

      return 'TRANSACTION_ID';
  } catch (e) {
      console.error('Something went wrong.');
  } finally {
      console.log('Close database connection...');
      return 'SAY_NO_TO_CRYPTO';
  }
}

// Server.js
console.log('Starting server...');

const result = performOperationInDatabase();
console.log(`Result: ${result}`);

You might be thinking, wait a minute, this can’t be right. 🤔
Well, the code runs without an error and we get the following output by executing the code above:

It turns out that the return statement in the finally block kind of overrides the return value from try or catch clause.

I do not have a concrete scenario where you might need to do that but it does not hurt to know. So there it is.

Conclusion

The finally clause in JavaScript is useful for performing cleanup tasks or releasing resources that were acquired in the try block. Use it to your advantage :)

I hope you find this article interesting and helpful.
If you did, please give it a like and share it with someone who might benefit from it.

My name is Ashutosh, and I work as a software engineer. I love to share my learning with the community.
You can connect with me on LinkedIn and follow me on Twitter.

Best way to Inspect JSON in Chrome DevTools

Ashutosh — Sat, 14 Jan 2023 16:36:34 +0000

Have you ever found yourself in a situation where you need to inspect the JSON data in developer tools? If so, you might click through properties to expand them and see what is inside. However, with a nested JSON it could take some clicks to get to what you are looking for. What if there is a better way? Well, there is :)

Did you know you could recursively expand JSON objects in Chrome DevTools?

You can expand a JSON object recursively in chrome developer tools by either right clicking on the object and choosing the expand recursively option from the context menu or using a keyboard shortcut for the same, which is ALT + Click on Windows and Command + Click on Mac.

If you prefer video format please do check out my YouTube video:

I hope you find this tip interesting and helpful.
If you did, please give it a like and share it with someone who might benefit from it.

My name is Ashutosh, and apart from working as a software engineer, I love to share my learning with the community.
You can connect with me on LinkedIn and follow me on Twitter.

How to do empty commit in git and why?

Ashutosh — Thu, 12 Jan 2023 19:08:03 +0000

Did you know you can make empty commits in git?

Have you ever needed to trigger a CI build but couldn't because manual re-trigger was not an option?
If so, you might be tempted to make a meaningless change to your source file only to make a git commit just to re-trigger the CI pipeline.

What if I told you there was a better way to do it? 🧐

Empty commit

Yes! You can make a git commit without making any changes to your source file(s) whatsoever. For example:

git commit --allow-empty -m "Trigger CI build"

I hope you find this tip interesting and helpful.
If you did, please give it a like and share it with someone who might benefit from it.

My name is Ashutosh, and I work as a software engineer. I love to share my learning with the community.
You can connect with me on LinkedIn and follow me on Twitter.

Understanding Currying in JavaScript with an Example

Ashutosh — Mon, 10 Jan 2022 04:17:15 +0000

Overview

The functional programming paradigm has been gaining traction in the JavaScript community for quite some time. It's hard to pinpoint when it all started, but I believe with the introduction of features like arrow functions, map, filter, reduce, etc., in ES6 (2015), we're seeing a lot more functional programming code in JavaScript.
Therefore, it would be fair to say one might expect functional programming questions in a JavaScript interview. For instance, let's take a look at the following problem statement:

Write a function that will provide the same output regardless of whether the arguments are passed all at once or one at a time(partially).

For example:

add3(1, 2, 3) // 6
add3(1)(2, 3) // 6
add3(1)(2)(3) // 6

The function invocation looks strange, to say the least.
No worries, in this article, we will learn how to implement such a function using functional programming concepts.
So without further ado, let's begin.

Basics

If we think about the add3 function, among other things, it should somehow partially apply the arguments passed to it.
In other words, it should apply them one at a time.
In functional programming, there is a concept known as currying.

We will use this same concept to our aid while implementing the add3 function. Let's see how:

Foundation

/**
 * The underlying base function is "add" which takes 3 arguments and return their sum.
 */
const add = (a, b, c) => a + b + c;

/**
 * We need such a function which will transform the base function such that
 * it can also process its argument one by one.
 */
const curry = (baseFunc) => {
  // TODO: Do something with it.
};

const add3 = curry(add);

All the code examples are in Code Sandbox and here is the CodeSandbox link to the final output. Let's get started.

Base Case

In its simplest form, the add3 function is equivalent to base function(add). In other words, the curry function will return the original function passed to it as an argument. With that in mind, let's start the implementation:

/**
 * The underlying base function is "add" which takes 3 arguments and return their sum.
 */
const add = (a, b, c) => a + b + c;

/**
 * We need such a function which will transform the base function such that
 * it can also process its argument one by one.
 */
const curry = (baseFunc) => (...args) =>
  args.length === baseFunc.length ? baseFunc(...args) : curry(baseFunc);

const add3 = curry(add);

Let's decode the function implementation:

Curry is a function (highlighted by the purple rectangle) that returns an anonymous function(highlighted by the green rectangle). The inner function do the following:

aggregate all of the arguments into a single parameter named args using the rest parameter
then check whether the arguments passed to it has the same length as the base function(baseFunc) arguments
if that is the case, we execute the base function with the provided arguments spread using the spread operator
otherwise, we need to carry on the process somehow, but more on that later

Now, let's understand what happens when we execute the following line of code:

const add3 = curry(add);

The add3 gets assigned the function returned by the curry function with baseFunc param gets replaced by the argument value that is add:

Now, let's understand how the following line of code gets evaluated to 6:

add3(1,2,3);

Execution illustration:

When we call the add3 function with arguments 1, 2, 3. They get aggregated into a single parameter named args as an array. Therefore, we're able to calculate the argument length which is 3 in this case.
We know it's our base case because args.length is equal to add.length therefore we return the result of add function by passing along the arguments.

Note: We do spread the arguments before passing because the underlying base function expects them individually rather than an array.

So far so good. Now, let's figure out how to make our curry function work for the following use cases:

add(1)(2, 3) // 6
add(1)(2)(3) // 6

Recursive Case

If we were to call, add3 as add(1)(2,3) using our current implementation, it would stop the execution just after the first call add(1).

To handle these cases, we need to add the following ability to the curry function:

accumulating the arguments over time (partially applying the arguments)
chaining execution (with the help self-invoking function)

Let's see how we can achieve the desired result by rewriting the curry function.

/**
 * The underlying base function is "add" which takes 3 arguments and return their sum.
 */
const add = (a, b, c) => a + b + c;

/**
 * We need such a function which will transform the base function such that
 * it can also process its argument one by one.
 */
const curry = (baseFunc, accumlatedArgs = []) => (...args) =>
  ((a) =>
    a.length === baseFunc.length ? baseFunc(...a) : curry(baseFunc, a))([
    ...accumlatedArgs,
    ...args
  ]);

const add3 = curry(add);

Let's not get ahead of ourselves and understand the updated curry function:

Curry is a function (highlighted in a purple rectangle) that returns an anonymous function(highlighted in a green rectangle) that returns another anonymous function(highlighted in a blue rectangle) that does
the same thing that the green function did previously. But there are two things in this case.

First, the curry function takes a second parameter named accumlatedArgs which is assigned an empty array as the default argument value.
Second, the innermost function(blue) is an Immediately Invoked Function Expression better known as IFFE and we're passing an array to it which contains all the accumulated arguments as well as the current arguments.

Now, let's understand what happens when we execute the following line of code:

const add3 = curry(add);

add3 gets evaluated as the following:

Notice that because we didn't pass any argument value for accumulatedArgs param, the default param value gets assigned here.

Let's take a walkthrough of the execution of add3(1).
Because accumulatedArgs is an empty array([]) and args is [1] the param a becomes equal to [1] which means the ternary operator condition results in false and we get:

add3(1) = curry(add, [1])

Now, let's see the execution of add3(1)(2,3):

This time accumulatedArgs is [1] and args is [2,3] so the param a becomes equal to [1,2,3] which means this time the ternary condition results in true and we call the base function with a:

which is basically the base case. Logically, it's equal to:

add3(1)(2,3) = add(1,2,3) = 6

Notice, how we accumulated the arguments that was passed into the add3 function.

Final Case

Now, let's also do the final case which is

add3(1)(2)(3);

but this time we use logs in our code to see how the execution is taking place:

const add = (a, b, c) => a + b + c;

const curry = (baseFunc, accumlatedArgs = []) => (...args) =>
  ((a) => {
    console.log("Received => ", JSON.stringify({ accumlatedArgs, args, a }));
    return a.length === baseFunc.length ? baseFunc(...a) : curry(baseFunc, a);
  })([...accumlatedArgs, ...args]);

const add3 = curry(add);

console.log("add3(1)(2)(3) => ", add3(1)(2)(3));

And as we expect, it accumulates the arguments provided to it over a while in sequential invocation. We get the following output:


Received =>  {"accumlatedArgs":[],"args":[1],"a":[1]} 
Received =>  {"accumlatedArgs":[1],"args":[2],"a":[1,2]} 
Received =>  {"accumlatedArgs":[1,2],"args":[3],"a":[1,2,3]} 

add3(1)(2)(3) =>  6

Conclusion

As you can see, we have successfully built the solution from the ground up using first principles. The example mentioned in the article is rather straightforward but in real-world scenarios, you will encounter other use cases for currying techniques in JavaScript.
And, now, you can apply the same approach to build such a solution :)

I hope you find this article interesting and helpful.
If you did, please give it a like and share it with someone who might benefit from it.

My name is Ashutosh, and apart from working as a Full-stack engineer, I love to share my learnings with the community.
You can connect with me on LinkedIn and follow me on Twitter.

If you prefer video format please do check out my YouTube video:

How to build UI elements using CSS pseudo elements

Ashutosh — Wed, 29 Dec 2021 14:25:47 +0000

Introduction

These days there are a lot of designs that intuitively display information. Instead of plain old one-to-one mapping of fields in a database, we're moving towards a more human-friendly and easy-to-understand UI element. For example, icons, loaders, badges, and progress indicators.

Being front-end developers, it's our responsibility to bring such UI to life using code(or magic 🪄).

An example of such a UI element is a simple status indicator that shows how many steps have been completed in a multi-step process. Because of its visual nature, it conveys this information in an instant look.

The problem arises when we use a bunch of <div>s and <span>s to build such UI. It gets complicated, unreadable, and hard to maintain very quickly.
In this article, we will see how we can build such UI using CSS pseudo-elements and minimising the need for <div>s (or <span>s).

Tools Used

I'm using React for making the UI element dynamic so that we can easily change the status of a step from pending to complete.
Also using the emotion library for writing css styles with JavaScript because it's efficient and fun! We can achieve the same result using CSS (SCSS, SASS).

Here is the CodeSandbox link to the final output. Let's get started.

Building the UI

We will build this UI component in a few steps. That way, it is easier to follow and recall a step later. So without further ado, let's go!

First Step

import styled from "@emotion/styled";
import checkmarkImage from "path-to-file/file-name.svg";

const Circle = styled.div`
/* We're using CSS variables here. */
  --primaryColor: #00ccb0;
  --secondaryColor: #e1e1e1;
  --scale: 2;
  --size: calc(16px * var(--scale));

  border-radius: 50%;
  position: relative;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  background-color: ${(props) =>
    props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};
  margin-right: var(--size);
`;

export default Circle;

First, we import styled from the emotion library and an image that we will use in a moment.
Then, we create a styled component named Circle and add a few CSS rules that make it a nice circle.

Let's decode this cryptic looking line:

 background-color: ${(props) =>
    props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};

Here we are using template literals syntax to dynamically assign the value of background-color based on the active prop which will be passed by the parent component.

At this point, if we wrap a couple of this components in a box, we will have a few nice circles:

(...)
   <Circle active={true} />
   <Circle active={false} />
   <Circle active={false} />
(...)

Connect the Dots :)

Let's go ahead and connect the dots(pun intended) by creating the link between these circles.

We use the ::after pseudo-element for this as shown below:

const Circle = styled.div`
  --primaryColor: #00ccb0;
  --secondaryColor: #e1e1e1;
  --scale: 2;
  --size: calc(16px * var(--scale));

  --linkWidth: calc(10px * var(--scale));
  --linkHeight: calc(2px * var(--scale));

  border-radius: 50%;
  position: relative;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  background-color: ${(props) =>
    props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};
  margin-right: var(--size);

  /* Make a pill shaped element that will act as link between two circles. */
  &::after {
    content: "";
    width: var(--linkWidth);
    height: var(--linkHeight);
    border-radius: 100px;

    position: absolute;
    left: calc(var(--size) + ((var(--size) - var(--linkWidth)) / 2));
    top: calc((var(--size) - var(--linkHeight)) / 2);
    background-color: ${(props) =>
      props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};
  }
`;

Let's understand the code:

First, make a rectangle with rounded borders to give it a pill-like shape using width, height, and border-radius properties.
Then, align it centrally relative to the circle using top and left properties.

Note: We use calc function to figure out values for top and left properties based on the dimension of the Circle and Link so that changing scale won't affect the alignment.

With that change in place our UI look as follow:

Remove Extras

Nice job! But, there is also a line at the end of the last circle that we don't need. So, let's remove it real quick with the following change:

const Circle = styled.div`
  --primaryColor: #00ccb0;
  --secondaryColor: #e1e1e1;
  --scale: 2;
  --size: calc(16px * var(--scale));

  --linkWidth: calc(10px * var(--scale));
  --linkHeight: calc(2px * var(--scale));

  border-radius: 50%;
  position: relative;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  background-color: ${(props) =>
    props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};
  margin-right: var(--size);

  /* Make a pill shaped element that will act as link between two circles. */
  &::after {
    content: "";
    position: absolute;
    width: var(--linkWidth);
    height: var(--linkHeight);
    left: calc(var(--size) + ((var(--size) - var(--linkWidth)) / 2));
    top: calc((var(--size) - var(--linkHeight)) / 2);
    background-color: ${(props) =>
      props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};
    border-radius: 100px;
  }

  /* We don't want to show the link after the last element. */

  &:last-child {
    &::after {
      display: none;
    }
  }
`;

Now, that looks better:

Final Step

The last missing piece in this UI is the checkmark icon which renders when the step is active.
We use ::before pseudo-element to create it as shown below:

const Circle = styled.div`
  --primaryColor: #00ccb0;
  --secondaryColor: #e1e1e1;
  --scale: 2;
  --size: calc(16px * var(--scale));

  --linkWidth: calc(10px * var(--scale));
  --linkHeight: calc(2px * var(--scale));

  --checkmarkWidth: calc(9px * var(--scale));
  --checkmarkHeight: calc(7px * var(--scale));

  border-radius: 50%;
  position: relative;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  background-color: ${(props) =>
    props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};
  margin-right: var(--size);

  /* Center svg (checkmark in this case). */
  &::before {
    content: "";
    display: ${(props) => (props.active ? "block" : "none")};
    position: absolute;
    top: calc((var(--size) - var(--checkmarkHeight)) / 2);
    left: calc((var(--size) - var(--checkmarkWidth)) / 2);
    width: var(--checkmarkWidth);
    height: var(--checkmarkHeight);
    background-image: url(${checkmarkImage});
  }

  /* Make a pill shaped element that will act as link between two circles. */
  &::after {
    content: "";
    position: absolute;
    width: var(--linkWidth);
    height: var(--linkHeight);
    left: calc(var(--size) + ((var(--size) - var(--linkWidth)) / 2));
    top: calc((var(--size) - var(--linkHeight)) / 2);
    background-color: ${(props) =>
      props.active ? "var(--primaryColor)" : "var(--secondaryColor)"};
    border-radius: 100px;
  }

  /* We don't want to show the link after the last element. */

  &:last-child {
    &::after {
      display: none;
    }
  }
`;

Voila! Nice and clean:

Conclusion

We can build many UI elements using this approach. And,
that way, we eliminate the need for extra HTML elements such as <div>.

I hope you find this article interesting and had fun reading it because I for sure had fun writing it.
If you find it helpful, please give it a like and share it with someone who might benefit from it.

My name is Ashutosh, and apart from working as a Full-stack engineer, I love to share my learnings with the community.
You can connect with me on LinkedIn or follow me on Twitter.

If you prefer video format please do check out my YouTube video:

Forem: Ashutosh

Mastering finally clause in JavaScript, for beginners

What is finally clause in JavaScript?

When to use finally clause in JavaScript

Closing a file or database connection

Releasing resources

Logging

Cleaning up after an asynchronous operation

Handling return statements

Demo time

Case 1: try block execute without any error(exception)

Case 2: An error is thrown in try block and code in catch block executes

Case 3: What happen when we use return statement inside try block?

Case 4: What happen when we also use a return statement inside finally clause?

Conclusion

Best way to Inspect JSON in Chrome DevTools

Did you know you could recursively expand JSON objects in Chrome DevTools?

How to do empty commit in git and why?

Did you know you can make empty commits in git?

Empty commit

Understanding Currying in JavaScript with an Example

Overview

Basics

Foundation

Base Case

Recursive Case

Final Case

Conclusion

How to build UI elements using CSS pseudo elements

Introduction

Tools Used

Building the UI

First Step

Connect the Dots :)

Remove Extras

Final Step

Conclusion

Case 1: `try` block execute without any error(exception)

Case 2: An error is thrown in `try` block and code in `catch` block executes

Case 3: What happen when we use `return` statement inside `try` block?

Case 4: What happen when we also use a `return` statement inside `finally` clause?