I would like to simply define Technical debt as the actions taken by the engineering team to expedite delivery for a piece of functionality that often needs to be refactored at a later point in time. However, there's no one single definition that exists technically.

The term 'Technical debt' was originally coined by software developer, 'Ward Cunningham'. He had coined this term to explain to Non-Technical stakeholders why budgeting needs to be allocated for refactoring.

Cunningham's explanation to the stakeholders was along the following lines:

"With borrowed money, you can do something sooner than you might otherwise, but then until you pay back that money you’ll be paying interest. I thought borrowing money was a good idea, I thought that rushing software out the door to get some experience with it was a good idea, but that of course, you would eventually go back and as you learned things about that software you would repay that loan by refactoring the program to reflect your experience as you acquired it."

Why Technical Debt is necessary?

Typically an early-stage startup needs to validate their product idea first and ensure they can sign up customers rather than build out all the nuts n bolts of the feature. In order to do that, agility is of paramount importance. The engineering team deliberately incurs tech debt to reduce the time to market.

However, often companies have known to abuse this term and prescribe, “Hack it, for now, fix it later” mantra to ship the project fast and acquire more users than their competition. But, often they don't realize that having technical debt has its consequences. Before we dive into that, let us find out the various types of technical debt that exists and how to address them.

Types of Technical Debt

While you can categorize technical debt into more granular level such as code debt, design debt, infrastructure debt, testing debt, etc. I would broadly want to classify them into the following categories:

Planned Technical Debt

As explained above, it is a decision made by the engineering team to take a short-cut for shipping the feature faster.

How to address them?

The tech leads/managers must ensure to track the tech debt in the backlog and address them as the product grows. The Product & Sales team must be made aware of the consequences of not addressing them in a timely manner and everyone should be held accountable to ensure that the tech debt is addressed in a timely manner.

Unintentional Technical Debt

This occurs generally due to the lack of understanding of the product or poor communication that exists in the translation of business goals or simply poor engineering practices.

How to address them?

Retrospectives are necessary no matter how fast a project needs to build. It is imperative to reflect back to find out what went well & what needs to change. Tech leads/managers must involve themselves in understanding the true business objectives and the product team must keep validating the software being built and provide feedback incrementally.

Unavoidable Technical Debt

When there's a huge change in project scope or a complete pivot of technology choice during mid-project, it leads to unavoidable technical debt.

How to address them?

Typically, this is the hardest of them all and usually, the debt is paid back in phases. For e.g. mid-project, the engineering team decides to move from React to Vue. The way to do this would be to create new features for the project in Vue and migrate the existing features from React to Vue in phases.

Is Technical Debt bad?

It's yes and no based on which point in software development you view it. For example, at an early stage, having a technical debt is considered a good thing to ship your product faster to the hands of the end-users. However, as the product matures, it is important to pay back the debt to ensure the product is stable and can actually scale as more and more users start adopting the product.

One important thing to acknowledge is that Technical debt unlike Financial debt is much harder to detect and people generally tend to ignore it unless it really becomes a problem. It is important to have the consequences of technical debt explained to all stakeholders and ensure that the responsibility and accountability is shared between the engineering and product teams.

Conclusion

To summarize, technical debt can be described as the consequences of software development actions that intentionally or unintentionally prioritize client value and/or project constraints such as delivery deadlines, over more technical implementation, and design considerations.

Technical debt should not be confused with the mess. A mess is a just mess that is being created based on laziness and unprofessionalism and has no chance of payback in the future.

I hope you enjoyed the article. Please don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

You may also enjoy the following articles:

• Why you should learn 'React'?
• The React Ecosystem
• Async/Await explained in JavaScript
• What are JavaScript Promises
• JavaScript Callbacks Explained
• Everything you need to know about JavaScript Objects
• Everything you need to know about JavaScript Funtions
• ES6 - Higher Order Functions
• ES6 - Spread Operator
• ES6 - Understanding Destructuring
• ES6 - Arrow Functions
• What is Currying in JavaScript?
• Understanding Hoisting
• Introduction to Big O Notation, Time & Space Complexity

I recently interacted with a friend who had just started out as a developer and she told me that she found it really hard to provide estimates against the user stories assigned to her.

We had an interesting conversation following that and I thought this might actually be applicable not just to her, but, a much wider audience who might be going through the same thing.

In this article, I will provide my thoughts on how you can go about providing estimates when you start out as a new (junior) developer.

Please do note that the article is in NO way "the only" way to provide estimates and it may largely vary based on the project. This is merely some things to consider that can help you provide estimates and manage insecurities that arise while providing them as a new developer.

Estimation

One of the first things to understand whether you are a junior or a senior developer is that the word 'Estimation' means it's a 'ballpark', i.e., it is not supposed to be exact. Providing the amount of time to complete a task largely varies based on a number of factors such as your current skill level, your overall experience in the field to understand requirements, whether you are building something ground up vs adding functionality to an existing product, etc.

For example, let's assume you have joined a project which has a fairly large codebase. When you are asked to estimate for a feature, your first instinct would be to provide estimates for the time it takes to complete building out the feature. However, what is often 'untold' is the fact, you'll also need to include time in your estimates to perform 'impact analysis', i.e., performing analysis to ensure that the code you add does not impact any other existing functionality. Ensuring that you consider providing estimates for things that are untold requires some amount of experience and hence it is always recommended to have a senior review your estimates before providing them to the lead or manager.

Key Terminologies

I'm providing a list of key things that are commonly used with the Agile development workflow.

User Story

In an Agile process, a feature would be written in terms of a user story, i.e., what the feature means to the end-user. Generally, user stories will be worded like 'As a user, I should be able to do this, to meet a particular outcome'. A good user story should have the acceptance criteria clearly specified that should help you and others identify what are the things that need to be verified to mark the user story completed.

Every user story is sized based on the complexity level and 'T-Shirt' sizing is a common methodology followed in the industry. Every user story is marked with a sizing such as XS, S, M, L, XL based on the level of complexity. The sizing will most likely be provided by the senior members of the team, since, they understand the product and are generally more experienced with the software. As a junior developer, you will be required to break down the user story into smaller tasks and estimate them.

Scope

Scope can simply be explained as the agreed set of things that need to be developed as a part of the user story. Usually, during the development process, things might arise which have not been explicitly stated in the user story and it is important to call them out and notify your senior in the team.

Most likely that might get added to the current story or if the impact is much larger, a new story might get created to address that. However, the important thing to note is that, if you have to develop that as a part of the same user story, your initial estimates will get impacted.

This is something tough to spot for a new developer and a good lead should explain this and guide you on how to handle scope creep.

Velocity

The term 'Velocity' is used to measure how fast a developer can complete the user story assigned to them. The same user story might take 4 hours for a senior developer to complete, but can take up to, 2 days for a junior developer to complete.

You must understand that it is completely 'normal' and you must feel free to communicate with your seniors about how you feel and ask them for any specific directions/guidelines they recommend for providing estimates.

Imposter Syndrome is a big thing to tackle at this point and your ego might also take a hit sometimes. Acknowledge that and keep telling yourself that this is a learning phase and it's just a matter of time before you will have command over the product and technology.

Capacity

This one is relatively simple. Capacity planning is done before the beginning of the sprint to find out if the developers are on any planned vacation. You may ask, how does this change the estimates? While in most cases it does not. However, if your vacation duration is a week or more, you must ensure that you reach out to the team after you come back and find out if something has changed that might impact your coding before your break. Also, it usually takes a day to build context and get back to that 'work mindset' after a relaxing holiday 🙂

General Guidelines for Estimation

I would recommend the following steps for providing estimates when you are starting out as a new developer:

1. Break down the task into the most fundamental thing. For example, building the Home page of the application can be broken up into building individual components on the homepage.
2. Spend some time to understand if there are any more questions to clarify the requirement or things to be called out at this stage that will impact the estimation.
3. Think through the corner cases (not just the happy path ones) and find out if they'll impact your estimates in any way.
4. Add estimates in hours against each task.
5. Your estimates must include time to write unit tests.
6. Review your estimates with a senior developer and take notes of the feedback provided by the senior developer.

Even after this, it might be possible, you might take additional time to complete the task and that is perfectly normal. But, it is important to record how much more additional time you've spent as compared to the original estimates. This is 'super important' because, it's a big learning for yourself and your team on where your current skill/understanding level is, and in due time this number will improve as you gain more expertise in the project.

Conclusion

While it can be daunting and stressful as a junior developer while providing estimates in the beginning, remember in due time you'll gain expertise and knowledge about the project and your estimation will start to get much better.

A good project manager or a lead would constantly gather statistics regarding your estimates and provide you with constant feedback on how to improve them. As your productivity improves, they'll be aware of that and keep sending more work your way.

I sincerely hope this article helped you with some knowledge of providing software estimates as a developer who is just starting out in the industry.

Don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

You may also like the following articles:

• Hiring Software Engineers for Startups - An Engineering Manager's view
• Why do you want to work for us?
• How to evaluate your idea for Product Market Fitment
• What is Value Proposition?
• 5 Must-Read Tips for a Killer Blog Article
• History of ECMAScript and Beyond
• A Practical Guide to help you stay more organized and productive
• What is 'this' in JavaScript?

This is an article based on my experience working with startups for 4+ years. I have previously worked with enterprises and product companies, but with startups, the kind of unique experience of having both creative freedom and increased responsibility was probably the most fulfilling in my career.

While startup culture is often glamorized with a whole lot of cool-looking offices, young vibrant engineers, there are a lot of challenges that are important to be prepared for.

In this article, I will share my experiences on why you should consider working at a startup and what to expect while working with startups.

Why work with Startups?

Creative Freedom

I think the best way to explain this in a single phrase would be 'If you can do it, you can lead it'. Startups are generally known for having small teams and while this may mean that your workload increases, it also offers creative freedom. You can shape your job description by simply raising your hand or offering a solution.

For example, while you might have been hired to do a developer job, you can still jump into your areas of interest such as design or documentation, and lead the way if there's an opportunity.

Career Development

With startups, there aren't layers of management to weed through, so if you started off taking up a particular role and you realized that your skills probably suit a different role in the team, you have the freedom to explore such a thing and slowly turn that into your career.

There's a significant gap even today on what a university teaches and what skills are needed on a real job and the option to explore your career within a job is very liberating.

Develop Resiliency

This one is my personal favorite. As humans, we have been in-built with a mechanism to resist failure. However, failure is essential to any kind of growth. In startups, you are burning your hands constantly. Everyone fails, and it's considered fine. Oftentimes there are no wrong answers and some solution that’s more correct than another one may well emerge as the winning formula. However, failure will not only make you a seasoned professional with hands-on learning but a resilient individual.

If you join a healthy startup, you’ll see the commitment and conviction of founders, and the team will hold onto each other – celebrating success together and taking failure in collective stride. As a result, you’ll become a problem solver, think outside the box, and build your ability to find creative solutions to problems, solutions that have the potential to move the needle significantly.

A Unified feeling and connecting over the mission

A startup team works shoulder-to-shoulder. You’ll spend a lot of hours collaborating with the same few people. Startup culture is very very important and the team will have to be a network of like-minded people who have the same agenda. This is super important because the emotional connection towards a unified cause increases your resolve and you'll push each other to grow and in return create long-lasting friendships out of the understanding.

While the above are certainly some of the reasons why you should try to work for a startup, I'll also want to mention a few points on what to expect while working with startups.

What to expect while working with Startups?

Be comfortable with uncertainty

You'll need to embrace uncertainty as much as the fish would take to the water or at least 80% of it. It is not easy for everyone to embrace uncertainly. Not at least at first, but, ensuring you communicate to the team certainly relives pressure from self and also ensures that everyone understands that you are charting unknown waters.

You'll be encountered with questions that no one has the answers to, even the founders, but this is what makes a startup so special – you’re finding out together. Once you are through one such an experience, you would have learned a life skill of navigating through uncertainty.

Be Independent and a team player

While a healthy startup culture will rally the team together, understand how to structure your work. Let yourself be pushed outside of your comfort zone. At a startup, there is little traditional ‘management’. You’ll need to be a self-starter and know how to manage your time.

There will be days when it feels like a lot; stay motivated. You’re growing. Structuring how you spent your time and proactively checking in with your manager to ensure your Key Performance Indicators (KPIs) remain aligned will help you stay on course and feel connected. Know when to ask for help and communicate with your team. Use your team as support and as a pillar of strength. I promise whatever you’re feeling you’re not alone, and reaching out will only help everyone involved.

Find your Sparkle

Self-doubt can be an outcome of all-round rapid development. Focus on the larger goal and your part in it. Ask where you shine. Sometimes we can’t see our own sparkle. Again, with little traditional ‘management’ the standard review process most likely won’t exist the way it does at large, established companies.

Ask for the time you need, but be sure to ask for clear feedback. Reflect on your KPIs to make sure that your goals are well aligned with the company. Everyone is low on resources and time is the most important, so be specific where you need support and take ownership of your projects.

Enjoy the ride

There may be frequent spurts of feedback and periods with none at all. Write it down and keep it for later. Time moves FAST in a startup. Make sure that you remember to write down all the lessons you learn because they will be vast. Keep a journal to remember what you did well, what you learned, and to keep the memories.

One of the startup customers I had worked with, Carlos, who's currently an Engineer Manager at Google, is still my close friend and I remember the fights, arguments, laughter, and euphoric moments that we celebrated together while taking an idea from concept to launch. It is still one of my most fond memories of my career.

Conclusion

To summarize while working in a startup has its challenges, it also is equally rewarding in terms of experience. Not everyone likes it or is up for a challenge as steep as working for a startup. But, I would urge you to consider working with a startup at least once in your career.

I hope you enjoyed the article. Don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

You may also like the following articles:

• Hiring Software Engineers for Startups - An Engineering Manager's view
• Why do you want to work for us?
• How to evaluate your idea for Product Market Fitment
• What is Value Proposition?
• 5 Must-Read Tips for a Killer Blog Article
• History of ECMAScript and Beyond
• A Practical Guide to help you stay more organized and productive
• What is 'this' in JavaScript?

In this article, we will look at an overview of what NPM is. When we usually run 'npm install', we know that certain packages are being created inside the 'node_modules' folder. Let us look at what they mean and what role they play in order to support running your web application.

We will look at the following topics in detail:

• What is npm, Registry, and CLI?
• How to initialize your project with NPM?
• A detailed overview of 'package.json' and it's important properties.
• How to install and publish your packages?
• Version management of packages.

This article is based on my learnings from Tyler Mcginnis's course on React which you find over here.

What is NPM?

For a long time, I assumed 'NPM' meant 'Node Package Manager'. But, strangely and funnily it's not. 'npm, Inc.' is a for-profit, venture-backed company founded in 2014 and was acquired by Github in March of 2020.

npm.inc is behind the creation and management of the following components:

• Node Package Manager
• Registry
• npm CLI

But before, we jump into the details of the above components, let us take a step back and find out what problem NPM solves.

Why do we need a Package Manager?

Whenever we write any web application, it is generally composed of individual modules that are often bundled together.

If we have to use a certain package with our application, the traditional way of doing it is using the 'script' tag as shown below:

<body>

  ...

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<script src="libs/jquery2.1.4.min.js"></script>
</body>

While the above works, there are the following disadvantages using the above approach:

1. If the CDN network is down, then your application cannot access the resource.
2. In the JQuery import example above, while you have downloaded the library to your application. Managing version related changes are left up to us in terms of manually fetching the latest version and replacing them in our code, which is far from ideal.
3. Finally, the biggest them of all is the order of script tags placed inside the body tag which is required in order for them to be referenced appropriately inside your application.

'npm' precisely solves the above problems and more in terms of managing the way your packages are referenced, versioning, and more.

Node Package Manager

The node package manager manages the below-mentioned points and does it well:

• Provides a way to package your program for others to consume.
• Provides a way to download the packages from a centralized repository.
• Makes it easier for you to manage & switch versions.

Registry

The registry is a centralized repository that contains a list of all npm packages that have been published by others.

npm CLI

npm CLI provides you a way for you to install & publish the packages using the command-line interface.

How to install npm?

'npm' comes with Node. Hence, if you have installed NodeJS, then you should already have npm as it comes with it. You can install Node from here or if you are using Windows, I have a detailed article on how to install Node using a node version manager or 'nvm' over here.

If Node and npm are installed correctly, you should be able to run the following commands in your terminal to check which versions you have installed.

node -v # My installed version: v11.10.0
npm -v # My installed version: 6.9.0

Now that you should have Node and npm installed successfully, we will look at how to initialize your project with NPM and the important components associated with the node package manager.

How to initialize your Project with npm?

The first step to use npm is navigating to your project folder (e.g. myProject) and run the command 'npm init' command from the command terminal.

$ root> cd myproject

$ root/myproject> npm init

The above command will perform the initialization process and you’ll notice that you have a brand new package.json file and an empty node_modules directory.

node_modules

Whenever you install a package, the source code for that package will be put inside of the node_modules directory. Then, whenever you import a module into your project that isn’t a file path, i.e. import React from 'react', your app will look to node_modules for the source.

package.json

The 'package.json' file contains all of the meta-information for your project. It contains information like the project’s name, author, description, and most importantly, the list of packages (as well as what versions) that your project depends on and how to run your project.

Here's a sample of the 'package.json' file:

{
   "name":"Example Project",
   "version":"1.0.0",
   "description": "An Example Project demonstrating Node Package Manager",
   "author":"Skay",
   "license":"ISC",
   "homepage":"https://github.com/skaytech",
   "keywords":[
      "react",
      "react-router",
      "babel",
      "webpack"
   ],
   "repository":{
      "type":"git",
      "url":"https://github.com/skaytech/webpack-example.git"
   },
   "main":"index.js",
   "dependencies":{
      "prop-types":"^15.7.2",
      "query-string":"^6.2.0",
      "react":"^16.8.3",
      "react-dom":"^16.8.3",
      "react-icons":"^3.4.0",
      "react-router-dom":"^4.3.1"
   },
   "devDependencies":{
      "@babel/core":"^7.3.4",
      "@babel/plugin-proposal-class-properties":"^7.3.4",
      "@babel/preset-env":"^7.3.4",
      "@babel/preset-react":"^7.0.0",
      "babel-loader":"^8.0.5",
      "babel-plugin-syntax-dynamic-import":"^6.18.0",
      "copy-webpack-plugin":"^5.0.0",
      "css-loader":"^2.1.0",
      "html-webpack-plugin":"^3.2.0",
      "style-loader":"^0.23.1",
      "webpack":"^4.29.5",
      "webpack-cli":"^3.2.3",
      "webpack-dev-server":"^3.2.1"
   },
   "scripts":{
      "start":"webpack-dev-server --open",
      "build":"NODE_ENV='production' webpack"
   }
}

Let us look at a few of those properties in detail:

dependencies

The list of packages listed under the 'dependencies' property is the ones your application needs in order to run. When you install a new package, the source for the package will be placed inside the 'node_modules' directory. The name & version of that package will automatically be added to the 'dependencies' property in your 'package.json' file.

devDependencies

'devDependencies' is exactly like the 'dependencies' in the sense the source will be placed inside the 'node_modules' directory. However, these 'dependencies' will only be made available to your application while running them in your development environment.

In other words, these 'dependencies' will not be required to run in the production environment.

scripts

The 'scripts' property defines the set of commands you can provide to the node package manager to run any kind of automation tasks. In the above example, we have two scripts, namely the 'start' and 'build'.

The general syntax to run any script is:

$ root > npm run [SCRIPT NAME]

In the above example, if you run the to start the 'webpack-dev-server', you can run the script 'start' using the following command:

$ root/myproject> npm run start

NPM Registry and How to install packages from the registry?

Now, that we've looked at the basics of 'npm' and the 'package.json'. We will look at how you can install certain packages from the 'npm registry'.

As I had introduced earlier, the registry is a centralized repository where all the packages are published and are available for downloads.

For Example, if you want to install 'react', you can run the following command:

$ root/myproject> npm install react

The general syntax to install any package is:

$ root> npm install [PACKAGE NAME]

Running 'npm install', will do the following things:

• It will put the 'react' package inside of your 'node_modules' directory.
• It will add 'react' as a property on your 'dependencies' object inside your package.json file.

Install your dependency as a Dev Dependency

In order to tell 'npm' that your dependency needs to be added only as a 'dev dependency', i.e., the package needs to be made only for development purposes, you should run the following command:

$ root> npm install webpack --save-dev

The key differentiator is the '—save-dev' flag while running the 'npm install' command for installing the package as a dev dependency.

How to publish your package to NPM?

NPM has over a million packages as of the date and it wouldn't be possible if it wasn't easy to publish one. You need to have the following to publish a package on npm:

1. An account on npm
2. A package.json file with 'name', 'version', and 'main' (which points to the entry point of your package) properties.

Once you have the above, in your command line run the following commands:

$ root/myPackage > npm login

$ root/myPackage > npm publish

That's all there's to it! There are more advanced features that you can check out their official guide.

Versioning

If you remember, at the start of our post, we had discussed managing the different versions of our packages. Thankfully npm CLI provides a very nice way to manage it as well.

Typically each package on the npm registry follows semantic versioning. There are three parts to semantic versioning, major versions, minor versions, and patch versions.

For example, if your package version is v1.2.3, the following is the break-up:

• Major Version - 1 - If you had a breaking change, you'll increment the major version.
• Minor Version - 2 - If you had a non-breaking feature, you'll increment the minor version.
• Patch Version - 3 - Everything else, you'll increment the patch version.

Why is this important? We want to avoid having our app break because we installed the wrong version of a package. npm gives us some tools to prevent this.

The '^' operator in your Version number

Let us look at the 'dependencies' inside your 'package.json' file again:

"dependencies":{
      "prop-types":"^15.7.2",
      "query-string":"^6.2.0",
      "react":"^16.8.3",
      "react-dom":"^16.8.3",
      "react-icons":"^3.4.0",
      "react-router-dom":"^4.3.1"
}

You’ll notice that before each version number, there’s a little ^ or a 'carrot' symbol.

The ^ instructs npm to install the newest version of the package with the same major version.

Let's take, for example, the 'react' package released v16.9.0. After the new version of the package is released and you run 'npm install' inside your project, then that version of the package will be available to your project.

If 'react' released a v17.0.0, which means it's breaking change and you run 'npm install', the breaking change won't be installed and made available to your project.

The '~' operator in your version number

If your requirement is to only update your package only for updates for the same major and minor versions, then you'll use the '~' operator.

In the above example, if you change the 'prop-types' package to have the '~' operator:

"dependencies":{
      "prop-types":"~15.7.2",      
}

If you run 'npm install', a new package will only be installed if 'v15.7.3' is released. If 'v16.0.0' or 'v15.8.0' came out, neither would be installed.

Exact version

Finally, the simplest and direct use-case of having the exact version of what’s listed in your package.json file, you'll just need to remove all 'symbols' before your version number and only list only the version number as shown below:

"dependencies":{
      "prop-types":"15.7.2",      
}

Now if you run 'npm install' anytime, only the version 'v15.7.2' will ever be installed.

conclusion

A quick summary of what we discussed in this article:

• What is npm, Registry, and CLI?
• How to initialize your project with NPM?
• A detailed overview of 'package.json' and it's important properties.
• How to install and publish your packages?
• Version management of packages.

I hope you enjoyed the article. Don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

You will also enjoy the following articles:

• Why you should learn 'React'?
• The React Ecosystem
• Async/Await explained in JavaScript
• What are JavaScript Promises
• JavaScript Callbacks Explained
• Everything you need to know about JavaScript Objects
• Everything you need to know about JavaScript Funtions
• ES6 - Higher Order Functions
• ES6 - Spread Operator
• ES6 - Understanding Destructuring
• ES6 - Arrow Functions
• What is Currying in JavaScript?
• Understanding Hoisting
• Introduction to Big O Notation, Time & Space Complexity

When I started learning React, there was a huge debate on whether React is a library or a framework. While I assumed React to be a framework, since, it was always compared with the likes of Vue or Angular, it is actually a JavaScript library.

However, there are other components such as the Webpack, Babel, Router, etc. that make it more wholesome into a complete framework that it is. Often, this is hidden under the hood, since we typically use 'create-react-app' to generate a React boilerplate code to start our application with.

In this article, we will look at a brief overview of the following key components that comprise the 'React Ecosystem'.

• Babel
• Webpack
• Routing
• Styling
• State (Redux/Context)

This is my second article, in the 'React Series' based on my learnings from Tyler Mcginnis course @ ui.dev.

You can read the first article on Why you should learn 'React'?

React

As I had mentioned in the introduction, React is just a library and you can just include the 'react' and 'react-dom' script tag inside the index.html and it's perfectly valid.

You can run the below code and it's a perfect valid React application. You can find the code in action over here.

<!DOCTYPE html>
<html>
  <head>
    <title>React</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16.14/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16.14/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      function Hello({ name }) {
        return <h1>Hello, {name}</h1>;
      }

      ReactDOM.render(<Hello name='Skay' />, document.getElementById('app'));
    </script>
  </body>
</html>

So, then the question becomes why is it we don't use the above setup for building our React apps? The setup when we run 'create-react-app' looks quiet different. What's the role of other components such as 'Webpack', 'Babel', etc. in supporting a production-grade react apps.

Let us look at each of those components at a high-level and what they do behind the scenes to support a production-grade React app.

Babel

If you visit, Babel's website, it'll be mentioned that Babel is a JavaScript compiler. What that means is Babel is responsible to transform JavaScript code from one format to another based on specified configuration.

Now, let us look at the below code example.

import React from 'react'

export default function User ({ name }) {

  return (
    <div>
      <h1>Hello, {name}</h1>      
    </div>
  )
}

A couple of things to note here:

• User is a React component that returns a UI (view) Hello, "name" based on the name passed to the component.
• The 'HTML' syntax within the JavaScript context is called JSX. It is React's way to allow you to describe UI inside of your components.

Now, if your browser needs to display the above information, it needs to know to get hold of the HTML view and the regular old JavaScript. This looks like a perfect job for 'Babel' which accepts the JSX input and transforms it into a valid JavaScript that can be understood by the browser.

But what's cool about Babel is that it's not limited to JSX → JS transformations, but, it can do almost any kind of transformations and it is most commonly used to transform ES6+ code to the backward-compatible version of JavaScript that old browsers can understand.

Webpack

Webpack is a module bundler. It examines your codebase for all imports and exports and intelligently bundles all your modules into a single file that your browser can understand.

So in our above example, the following lines of code, the 'import' and 'export' statements are what Webpack will scan and bundle it into a single bundle.js file which will be referenced inside of index.html.

import React from 'react'

export default function User

I have an article that describes Webpack in much greater detail, which you can read over here.

Routing

The idea was to keep React as a simple UI library and not include the Router as a part of the core library. It was done with the intent to provide the users the flexibility to decide what kind of router they would want to integrate with React.

The most popular router for React is of course the 'React Router'

You can describe React Router’s job is to render specific React components based on the current URL path of the user.

<Router>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>

    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </div>
</Router>

When a user navigates to the home page (/), React Router will render the Home component. When they navigate to /about, React Router will render About. Likewise, when they navigate to /contact, React Router will render the Contact component.

React Router is again a vast topic and will warrant a separate blog post of its own. For now, you can simply understand it as the component that is responsible to render React components based on the URL path the user visits.

Styling

There are two ways to Style a React application. The traditional way and the React way. Let us look at both ways of defining styling to your react application.

Traditional Styling

The traditional approach includes adding all your styling inside index.css and you can have classes, cascading defined there typically how you would do for a non-react application. In fact, you can also have SASS or any CSS pre-processors included.

React Styling

The React approach of styling embraces the component model. Let's add styling to our above example and see how the code looks.

const styles = {
  header: {
    fontWeight: 400,
    fontSize: 55,
    color: '#a41c1c'
  }
}

export default function User ({ name }) {

  return (
    <div>
      <h1 style={styles.header}>Hello {name}</h1>      
    </div>
  )
}

As you can see from the above code, the styling is contained within each component. One of the most popular CSS in the JS library in the React ecosystem is the Styled Components. You can check them out over here.

State (Redux/Context)

Before we talk above Redux or Context, we will take a step back and define what state means to a React component.

React State

React's philosophy is that you build individual components that can each manage their own state as well as describe their UI. You then compose those components together to get your app.

But often in real-life applications, the state of components needs to be shared with other components and it becomes a challenge to pass the state through the component tree if there are multiple levels. This is generally the case as the application grows larger and becomes more complex.

Redux

To solve the above problem, Redux came into the picture. Redux is a state management library and while it's often used within the context of React library, it can in fact be used with any other view library and it's not tied to React.

The philosophy of Redux is pretty different. Instead of having state spread out in different places, with Redux, you stick all of your 'State' in a single location called a 'Store'. You then establish strict rules for how the state of your 'Store' can change through something called 'Actions'.

Context

Context API was introduced by the React team for providing a centralized way to manage a Component's state without relying on external libraries such as 'Redux'.

As per the official React docs, Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Each of the topics such as Redux, Context API requires a dedicated blog article to explain the details. The important takeaway as a part of this article is that 'State' management is a core part of React's ecosystem and you can manage it simply within a component's state management mechanism or use Context API or Redux library based on your use-case or the complexity of the application.

Conclusion

I think that's pretty much an overview of the core components. I hope after this article, you'll idea of what is under the hood when you run CRA (create-react-app) in your CLI, and when someone says it's a React application, it's an ecosystem and not just the React library.

Don't forget to subscribe to my newsletter and follow me on Twitter @skaytech.

You will also enjoy the following articles:

• Why should you learn React?
• Async/Await in JavaScript
• All you need to know about JavaScript Objects
• JavaScript Promises
• JavaScript Functions
• IIFE
• History of ECMAScript
• ES6 => Arrow Functions
• Docker Fundamentals
• What are Git Hooks?
• A Practical Guide to help you stay organized and productive
• What is Event Loop in JavaScript?
• A Basic Introduction to Webpack
• Understanding Closures
• What is 'this' in JavaScript?

I have been working with the React library for a while now and the more I understand it, the more I'm in awe of the library.

In this article, I wanted to share my thoughts on why I think React is one of the most popular JavaScript frameworks ever and why you should consider learning it if you are planning to learn a JavaScript framework.

This is the first article, under the series 'React' and is based on my learnings from Tyler Mcginnis course @ ui.dev. Do check out Tyler, he's one heck of a teacher.

A Powerful Composition Model

Composition is a language-agnostic programming principle that relies on building programs or functions by composing them together.

React extends the same concept and it is possible to build React components by composing them together.

Let us see a very simple example, to begin with, a page containing a header, main, and a footer component.

function Header (props) {
        <>
            <h3>{props.headerInfo}</h3>
    </>
}

function Footer (props) {
        <>
            <h5>{props.footerInfo}</h5>
    </>
}

function Main (props) {
    return (
        <>
            <h1>{props.mainInfo}</h1>
    </>
    )
}

function Home (props) {
  return (
    <div>
      <Header headerContent={props.headerInfo} />
      <Main mainContent={props.mainInfo} />
      <Footer footerContent={props.footerInfo} />
    </div>
  )
}

As you can see from the above example, every function such as Header, Main, and Footer returns a view. Each of those views is further composed within the 'Home' component. This idea of having the power to create a UI by combining any one or more components makes it incredibly powerful.

And this idea has been exploited by the community to develop a multitude of third-party React components that is available on NPM.

A simple analogy that can make all of the above 'click', is, React to composition is equivalent to Pizzeria to 'Build your own Pizza'.

Reference - https://reactjs.org/docs/composition-vs-inheritance.html

Unidirectional Data Flow

In a traditional application, you have event handlers that update the DOM which generally holds the state of the application as shown below.

As the application grows, the event handlers start updating other parts of the state and the above diagram starts to look like the Spaghetti below.

With React, it follows a Unidirectional Data Flow concept which means that data has one, and only one, way to be transferred to other parts of the application.

Every component has its own state and they need to only bother about updating them. Based on the change in state, React does the hard work of updating the UI based on the change in state.

Advantages of a system with a Unidirectional data flow:

1. Since the state is maintained at a single location, it can be easily traced to what actions are updating the data as the flow is one way only.
2. You can control which components to re-render on a common state change. You put all those components under one common state containing the parent component.
3. Easy to trace and fix bugs and errors caused by any poorly written code.

Declarative UI

In React everything is a component and each component has primarily two things (three actually which includes the lifecycle methods) that you need to be bothered about while defining a component.

a. The Components state.

b. How the UI looks based on the state.

Let us take a look at the following code example in JQuery & React:

Using JQuery:

$('btn').click(() => {
  $(this).toggleClass('highlight')
  $(this).text() === 'Add Highlight'
    ? $(this).text('Remove Highlight')
    : $(this).text('Add Highlight')
})

Using React:

<Btn
  highlight={this.state.highlight}
  onToggle={this.toggleBtn}
/>

Key things to note based on the above code example:

1. In the JQuery example, you have to access the DOM and ensure that is updated based on events.
2. In the React example, you have to only worry about the following two things:
   • The state or how to update the state based on an event. React will do the hard lifting of updating the DOM.
   • How the Button component's UI should respond when the state changes? This is described in the 'this.toggleBtn' function.

React provides the abstraction, so that, the Component does not need to worry about updating the DOM.

Utilizes "Core JavaScript" features - Minimal Custom API

React does not try to re-create functionality that you can already do using JavaScript.

Let us look at the following example of creating unordered lists from a 'products' array using the three different JavaScript Frameworks: Angular, Vue & React.

Angular uses 'ngFor' to loop through the 'products' array.

<ul id="products">
        <li *ngFor="let product in products">
                {{product.name}}
        </li>
</ul>

Vue uses 'v-for' to loop through the 'products' array.

<ul id="products">
        <li v-for="product in products">
                {{product.name}}
        </li>
</ul>

React uses

<ul id="products">
        {products.map((product, index) => (
            <li key="index">
                {{product.name}}
          </li>
</ul>

As you can see from the above example, React uses JavaScript's map method as compared to any special APIs provided by Vue or Angular. Before Angular or Vue folks jump on me, by no means, I'm trying to belittle other frameworks. It is just one significant point that I wanted to highlight over here.

The important point to note here is that React's API layer is kept to the minimum and it utilizes the features provided by JavaScript.

The Right Abstraction

I think that 'React' provides the right abstraction due to the following reasons:

1. React is highly opinionated as any abstraction should be.
2. The abstraction provided by React empowers users to adopt it without making it very complicated.
3. The behavior provided by the abstraction is simple enough to extend and supports almost infinite use-cases as possible without giving away the implementation details.

As the saying goes, the 'proof is in the pudding' and you just need to look at the tools built using or on top of React to realize how powerful the abstraction provided by React is.

• Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.
• Next.js is a JavaScript framework that lets you build server-side rendered, static web applications using React.

Conclusion

I hope the reasons mentioned in the post make it compelling enough for you to start learning ReactJS as the JavaScript framework of choice.

Don't forget to subscribe and follow me on Twitter @skaytech

You may also like the following articles:

• JavaScript Objects
• JavaScript Functions
• ES6 - Higher-Order Functions
• What is currying?
• A Guide to Big O, Time & Space Complexity
• Understanding Hoisting
• ES6 - Spread Operator
• How to make an argument "required" in JavaScript?
• 5 Must-Read Tips to write a killer blog article
• What are Git Hooks?
• What is Event Loop in JavaScript?
• A Basic introduction to Webpack
• ES6 => Arrow Functions

I have previously written articles on Callback & Promises which I recommend you read first to understand the absolute fundamentals of asynchronous processing

• What is Callback in JavaScript?
• Promises in JavaScript explained

With the introduction of Async/Await in ES7, the code looks and behaves more like a synchronous code. However, you should know that async/await is basically syntax sugar built on top of promises.

How does Async/Await work?

Async - The keyword 'async', when added before a function, indicates that it returns a promise & the functions inside it are asynchronous in nature and are denoted by the keyword 'await'.

Await - The keyword 'await' can only be used within a function that is defined with the 'async' keyword. The 'await' tells the JavaScript engine to ensure that the execution is paused until the function completes execution and returns a promise.

Let us look at the below code snippet to understand it better.

Without Async/Await:

Let us assume we have a function getCake, that returns the cake. There are two more functions, buyEggs and bakeCake. In order to bakeCake, we need to buyEggs first. However, in the buyEggs function, there's a timeout set to 2 seconds , which means, the bakeCake function will run immediately and buyEggs function will run after the time interval of 2 seconds.

Hence, the output 'undefined' (since the variable 'eggs' isn't assigned a value yet) & 'Cake' is displayed as the output on the console.

//Function getCake calls the buyEggs & bakeCake functions
//the code execution will not wait for Promise to be resolved
const getCake = function() {
    //Buy Eggs
    const eggs = buyEggs();
    console.log(eggs); //Output -> undefined

    //Bake Cake
    const cake = bakeCake();
    console.log(cake); //Output -> Cake on the console
}

//Function Buy Eggs returns a promise after 2 seconds
const buyEggs = function() {
    setTimeout(() => {
        return 'Eggs';
    }, 2000);    
}

//Bake cake returns cake - But Cake can only be baked after buying eggs
const bakeCake = function() {
    return 'Cake';
}

//Call the getCake() async method
getCake();

//Program Output
//undefined
//Cake

After adding Async/Await:

In order to ensure that buyEggs function runs before bakeCake function, first, you'll need to return a promise from buyEggs function.

The next step would be to add 'async' keyword to the getCake function to indicate that there are asynchronous functions inside the function.

Further, add the keyword 'await' before the buyEggs function to indicate to the JavaScript engine, that the code execution should be paused until the promise is resolved from the buyEggs function.

//Function getCake calls the buyEggs & bakeCake functions
//The async keyword to the getCake function indicates that the function needs to be run asynchronously
//The await keyword to function call buyEggs ensures that 
//the code execution will not proceed unless the promise is returned from buyEggs()
const getCake = async function() {
    //Buy Eggs
    const eggs = await buyEggs(); //Adding await ensures that code execution is paused until promise is resolved
    console.log(eggs); // Output -> Eggs

    //Bake Cake
    const cake = bakeCake();
    console.log(cake); // Output -> Cake
}

//Function Buy Eggs returns a promise after 2 seconds
const buyEggs = function() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Eggs');
        }, 2000);
    });
}

//Bake cake returns cake - But Cake can only be baked after buying eggs
const bakeCake = function() {
    return 'Cake';
}

//Call the getCake() async method
getCake();

// Program Output
//Eggs
//Cake

Async returns Promise by default

In the above example, we wrapped the buyEggs function to return a promise. But, by adding an 'async' keyword before any function, it returns a promise implicitly.

The first code snippet below contains the keyword 'async' added before the buyEggs function. In the second example, the function buyEggs function explicitly returns a promise.

What I wanted to show in the example was how the function behaves internally, when the keyword 'async' is added in front of it.

//The below function will return a promise when the 'async' keyword is added 
async function buyEggs(){
    //Do something
}

//The above is same as the below one
function buyEggs() {
    const promise = new Promise((resolve, reject) {
        //Do something
    });
    return promise; 
}

Let us look at an actual code example

//The Sum function is indicated with the 'async' keyword
//Hence the sum of two numbers x & y is wrapped inside a promise
async function sum(x, y) {
    return x + y;
}

//When the async function 'sum' is invoked
//It returns a promise and the return value can be accessed using 'then'
sum(2, 3).then(result => console.log(result));

As you can see from the above code example using async before a function will implicitly have a promise returned. Since a promise is returned, the return value can be accessed using the 'then' keyword.

What happens when you use Await without Async?

Let us take the above getCake example and see what happens when we remove the async keyword but retain the await keyword beside the buyEggs function.

/*
    getCake Function without the async keyword
    await is added to the buyEggs function
*/
const getCake = function() {
    //Buy Eggs
    const eggs = await buyEggs(); //Adding await ensures that code execution is paused until promise is resolved
    console.log(eggs); // Output -> Eggs

    //Bake Cake
    const cake = bakeCake();
    console.log(cake); // Output -> Cake
}

//Output -> Uncaught SyntaxError: await is only valid in async function

As you can see, a syntax error is thrown saying 'await' can only be used inside an async function. I think the reason for this is because when the JavaScript notices the keyword 'await', it first looks up the parent 'async' function it is present within and when it cannot locate one, it ends up complaining that you've violated the declarative rules of async/await.

Error Handling

Finally, the last topic about async/await is how we'll need to approach error handling. If you remember from the promises example, we had a 'then' as well as a 'catch' block which was used for error handling.

Using Promise - catch block for error handling

//Using Promises
const someAsyncFn = function() {
    return new Promise((resolve, reject)) {
            if(someCondition) {
                    resolve(data);
            } else {
                    reject(err);
            }
    }
}

//Invoking someAsyncFn
someAsyncFn
.then(data => console.log(data));
.catch(err => console.log(err)); //Error Handling is done through the 'catch' block

Using Async/Await - Error Handling using try/catch block

In the below example, the code inside the 'async' function fetchFruits is wrapped within a try and a catch block. When the promise returns 'Resolved' then the 'updateUI' function is invoked.

When Promise is Resolved:

//Using Async Await
const fetchFruits = async function() {
    try {
        const fruits = await getFruits();
        updateUI(fruits);
    } catch (e) {
        showError(e);
    }
}

function getFruits() {
    return new Promise((resolve, reject) => {
        resolve(['apple', 'orange', 'banana']);
    });
}

function updateUI(items) {
    let output = '';
    items.forEach(item => {
        output += `
        <li>${item}</li>        
        `
    })
    const list = document.querySelector('.list-item');
    list.innerHTML += output;
}

function showError(e) {
    const error = document.querySelector('#error');
    error.appendChild(document.createTextNode(e));
}

fetchFruits();

When the promise is rejected, the 'showError' function defined within the catch block will be executed as shown in the code below.

When Promise is rejected:

//Using Async Await
const fetchFruits = async function() {
    try {
        const fruits = await getFruits();
        updateUI(fruits);
    } catch (e) {
        showError(e);
    }
}

function getFruits() {
    return new Promise((resolve, reject) => {
        reject(['apple', 'orange', 'banana']);
    });
}

function updateUI(items) {
    let output = '';
    items.forEach(item => {
        output += `
        <li>${item}</li>        
        `
    })
    const list = document.querySelector('.list-item');
    list.innerHTML += output;
}

function showError(e) {
    const error = document.querySelector('#error');
    error.appendChild(document.createTextNode(e));
}

fetchFruits();

You can play around with the code over here

The biggest benefit of using async/await is that it makes code much more readable and maintainable. It makes the code feel it's streamlined and structured similarly as though it is synchronous.

Conclusion

A quick recap of what we've covered in this article:

• What is Async/Await?
• How do they work?
• Async functions return promise by default.
• Error Handling

I hope you enjoyed the three-part series on asynchronous functions. Don't forget to subscribe to my newsletter & connect with me on Twitter @skaytech

You will also enjoy the following articles:

• JavaScript Objects
• JavaScript Functions
• ES6 - Higher-Order Functions
• What is currying?
• A Guide to Big O, Time & Space Complexity
• Understanding Hoisting
• ES6 - Spread Operator
• How to make an argument "required" in JavaScript?
• 5 Must-Read Tips to write a killer blog article
• What are Git Hooks?
• What is Event Loop in JavaScript?
• A Basic introduction to Webpack
• ES6 => Arrow Functions

Almost everything in JavaScript is an Object. In this article, I'll share my understanding of what an object is, how an object can be created, modified, and how its properties can be accessed.

What is an Object?

An object is a collection of properties having name-value pairs. The value of the property could be a simple string, integer, boolean, or could be another object or even a function.

//Object with the value String
const name = 'Skay';

//Object with the value Integer
let number = 5;

//Object with the value boolean
let isCorrect = true;

//Object with the value of another Object
const car = {
    make : 'Honda',
    modal : 'CR-v',
    year : 2018
}

//Object with the value of a function
const greeting = function() {
    return 'Hello, How are you?';
}

Object Creation

In JavaScript, there are many ways to create an object. Let us look at each of them with examples.

Using the Object Literal

The simplest form of object creation is using the Object literal, which we saw in the 'Car' example above. Let us look at another example of the book object.

    const book = {
        name : 'Atomic Habits',
        author : 'James Clear',
        year : 2018
    }

The values assigned to an object within the braces are referred to as the properties of an object.

Using the New Keyword

Using the new keyword, you can first create the object and then add the properties to it later.

const book = new Object();
book.name = 'Atomic Habits';
book.author = 'James Clear';
book.year = 2018;

console.log(book);

Using a Constructor

Constructors are code snippets that run while creating an object. You can optionally pass parameters while the creation of an object. Generally, in modern object-oriented languages such as Java, the constructors are defined within a class and are used to create an instance of the class.

const Movie = function(title, director, genre, rating) {
    this.title = title;
    this.director = director;
    this.genre = genre;
    this.rating = rating;
    this.getDetails = function() {
        console.log(`${this.title} of the genre ${this.genre} has a rating of ${this.rating}. It is directed by ${this.director}.`);
    }
}

const matrix = new Movie('The Matrix', 'The Wachowski Brothers', 'Sci-Fi', 8.7);
const inception = new Movie('Inception', 'Christopher Nolan', 'Sci-Fi', 8.8);

console.log(matrix.getDetails());
console.log(inception.getDetails());

It is considered a good practice to use Capital letters while naming the constructor.

This method of creating an object is favored in real-life projects since you can create as many objects as you would like by using the new keyword and if you need to add/edit a property at a later time, it's very simple to do it within the constructor.

Another thing to note in the above example is that the property getDetails is also a function. What this means is that you can literally define anything as a property to an object, such as a literal, object, or a function that I mentioned at the beginning of this article.

There are two more ways to create an object. Using the object.create() method which was introduced with ES5 and using the prototype pattern. These will require some understanding of JavaScript Prototype and I will cover this in a separate article.

Accessing the Properties of an Object

The properties assigned to an object can be accessed using one of the two ways:

a. Using the '.' operator.

const book = {
        name : 'Atomic Habits',
        author : 'James Clear',
        year : 2018
    }

console.log(book.name);

b. Using the square brackets []

const book = {
        name : 'Atomic Habits',
        author : 'James Clear',
        year : 2018
    }

console.log(book["author"];

The dot operator is generally more popular in use, due to it's the simplicity of use. However, the other option is particularly useful in two instances

a. When the property name contains a space and cannot be used with a dot operator. Although, the chances of this are pretty rare.

b. If a property name of the object is only known at run-time. In the example below, person.propName will give an undefined, whereas a person[propName] will display 38.

const person = {
    name : 'Skay',
    age : 38
}

const propName = 'age';

//Will output 38
console.log(person[propName]);

//Will output undefined
console.log(person.propName);

Objects are referenced by Type

When a variable is assigned a non-primitive value (except string, integer, boolean, null, and undefined), then the variable is assigned a reference to the value and not the actual value.

If you did not understand a word of the above statement, don't worry, let us break it down by using the below code as a reference:

Step 1

As you can see the variable 'person' is assigned the object {name : 'skay', age : 38}. But what happens internally is that, the object {name : 'skay', age : 38} is stored in a location in your computer's memory.

const person = {
    name: 'Skay',
    age: 38
}

const newPerson = person;

console.log(newPerson === person);

Step 2

The memory location allocated to the object {name : 'skay', age : 38} is assigned to the variable 'person'.

Step 3

In the above code, when the newPerson variable is assigned to the person variable, then it also receives a reference of the same address location of the object {name : 'skay', age : 38} and hence the console.log(newPerson === person) will output the value of 'true'.

Conclusion

If you gotten until here, thank you so much for taking the time to read through the article, and hope you've gained some insight into what JavaScript objects are.

Let me summarize what I have covered so far in this article.

• Except for primitive types such as strings, numbers, boolean, null, and undefined, everything else is an object in JavaScript. For example, an array is an object and so is a function.
• In JavaScript objects are mutable, i.e. they can be changed.
• Objects are referenced by type and hence the variable containing the object has a reference to the object and not the value.

Hope you enjoyed this article. Don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

You might also be interested in:

• JavaScript Functions
• ES6 - Higher-Order Functions
• What is currying?
• A Guide to Big O, Time & Space Complexity
• Understanding Hoisting
• ES6 - Spread Operator
• How to make an argument "required" in JavaScript?
• 5 Must-Read Tips to write a killer blog article
• What are Git Hooks?
• What is Event Loop in JavaScript?
• A Basic introduction to Webpack
• ES6 => Arrow Functions

I think Async is one of the most powerful yet not-so-direct concepts to grasp at first for JavaScript Newbies.

In this article, I have covered the following topics:

• What does asynchronous execution mean?
• What are higher-order functions and callback functions?
• How to create & pass callback functions?
• Inversion of Control

Asynchronous Execution

Let us first understand what an asynchronous activity is. Let us assume, you need to go to a laundromat to wash your clothes and to the bank to withdraw some money.

You first head over to the laundromat and put your clothes to wash and it says the wash/dry cycle will take about an hour. Instead of waiting in the laundromat for an hour, you decide to go to the bank instead which is a 20-min drive, and make the withdrawal. You realize you are still left with some time and make a quick stop at the supermarket and pick up a few things. Finally, at the end of the hour, you return to the laundromat to collect your clothes.

In the above example, while the clothes were being washed, you still proceeded to do other activities. This is precisely what asynchronous activity is all about. One program execution does not happen sequentially to other program executions.

Higher-Order Function & Callback

In the example shown below, we have a simple function returning the sum of two numbers.

//Function returns the sum of two numbers
const add = function(a, b) {
    return a + b;
}

//Output the sum of two numbers
console.log(add(2, 3));

A cool thing that you can do in JavaScript language is that you can pass other functions to your function. If you would like to revisit JavaScript functions basics, you can read them over here.

//Function returns the sum of two numbers
const add = function (a, b) {
  return a + b;
};

const multiply = function (a, b) {
  return a * b;
};

const calculate = (funcParam) => (a, b) => {
  return funcParam(a, b);
};

//PASSING FUNCTION AS AN ARGUMENT
//Pass the 'add' function to the 'calculate' function
const sum = calculate(add);
console.log(sum(2, 3)); //Output the sum of two numbers -> 5

//PASSING FUNCTION AS AN ARGUMENT
//Pass the multiply function to the 'calculate' function
const multi = calculate(multiply);
console.log(multi(2, 3)); //Output the multiplication of two numbers -> 6

Things to note:

• The function 'add' is passed as an argument to the calculate function and assigned to the 'sum' variable. Likewise, the function 'multiply' is passed as an argument in the next line and assigned to the variable 'multi'.
• The parameter 'funcParam' of the 'calculate' function holds a reference to either the 'add' or 'multiply' function based on what is passed in while invoking the function.

NOTE: The function 'sum' or 'multi' is known as the 'higher-order function' and the function 'add' or 'multiply' that is passed as an argument is known as the 'callback'.

Using the above semantics, the same example can be demonstrated as shown below:

const callback = (a, b) => {
    return a + b;
}

const higherOrderFunction = (callback) => (a, b) {
    return callback(a, b);
}

Callbacks are used everywhere in JavaScript. Array-based functions such as a map, filter, sort, etc. use callbacks and if you are already using JavaScript most likely you are already using them without realizing that they are callbacks.

So, How does Callback help?

In most of the real-life applications we build, the UI will have to wait to fetch data from the backend, while the user continues to interact with the web application. This is exactly the use-case for callback functions.

Let us look at an example of a function making an external API call:

//Define the Github User ID
const userId = 'skaytech';

/*
Function to fetch data using XMLHTTPRequest
The function accepts a callback to invoke upon the success
*/
const fetchData = function(userId, callbacks, callback2) {
    //Initialize xhr to a new XMLHttpRequest object 
    const xhr = new XMLHttpRequest();

    // Define the parameters to call an External API
    // Calling the Github getUsers API by userId
    // Params are - HTTP Method name, URL, Async (true/false)
    // When the third param is 'true', it means it's an asynchronous request
    xhr.open(
      'GET', `https://api.github.com/users/${userId}`, true);

    //The onload method will execute when a response has been received from external API
    xhr.onload = function() {
        //Checking for a response of 200 (It's a success (OK) response)
        if (xhr.status === 200) {
            //On success - invoke the callback method passed to the function
                        //In this example - displayUserPicture function will be run
            callback1(xhr.responseText);
        } else {
            //On Error - invoke the onError method and pass the HTTP status
            callback2(xhr.status);
        }
    }

    //Upon Send the XMLHttpRequest will actual be processed
    //This is the method that actually triggers the API call
    xhr.send();

}

//UI method to display the picture of Github User
function displayUserPicture(response) {
    const data = JSON.parse(response);
    const imgUrl = data.avatar_url;
    document.querySelector('#userimg').setAttribute('src', imgUrl);
}

//UI method to display Error if the Github User does not exits
function onError(status) {
             document.querySelector('#userimg').style.display = 'none';
  document.querySelector('#errorDiv').textContent = `Error Status: ${status}`;
}

//Invoke the fetch data function
//Params - userId & displayUserPicture is the callback function
fetchData(userId, displayUserPicture, onError);

Things to note:

• In the above example, I have used the XMLHttpRequest which is used to make external API calls. This is one of the earliest methods in JavaScript to make API requests. You can read about them over here.
• The function 'fetchData' accepts the callback methods 'displayUserPicture' and 'onError'.
• If the HTTP response status is 200 then the function 'displayUserPicture' will be executed or else the function 'onError' will be executed.
• Here the UI update method will not be invoked until the data from the external API is available. If it's successful, the GitHub user's image will be displayed and on error, the error status will be displayed on the UI.

You can find play around with the above code over here.

Callback Hell

In the above example, we had seen that the callbacks are separate methods that are invoked from within the main function. Let us look at an example where instead of calling a separate function, you are nesting the function calls.

//Define the Github User ID
const userId = 'skaytech';

/*
Function to fetch data using XMLHTTPRequest
The function accepts a callback to invoke upon the success
*/
const fetchData = function(userId, callback1, callback2) {
    const xhr = new XMLHttpRequest();

    xhr.open(
        'GET', `https://api.github.com/users/${userId}`, true);

    xhr.onload = function() {
        if (xhr.status === 200) {
            //Parse the incoming response to JSON object
            const data = JSON.parse(response);
            //Fetch the user's followers URL
            const followersUrl = data.followers_url;

            //Create another XMLHttpRequest
            const xhr1 = new XMLHttpRequest();

            xhr1.open('GET', followersUrl, true);
            xhr1.onload = function() {
                if (xhr.status === 200) {
                    //Get the followers Data
                } else {
                    //Show Error
                }
            }
            xhr1.send();
        } else {
            callback2(xhr.status);
        }
    }
    xhr.send();
}

//Fetch the User's Github details based on the user ID
fetchData(userId);

The code gets harder to read and maintain when the callback functions are invoked in a nested order and that's what usually referred to as callback hell.

Callbacks are considered hard for a fact that the human mind perceives things sequentially or in a linear fashion, whereas, the way callback works in an inverted manner. This brings us to the next topic, inversion of control.

Inversion of Control

When your main function invokes the callback function, it basically hands over the program execution to the callback function. In essence, the entire program's flow depends on the response of the callback function, and then it proceeds from there onward. This nature of program execution is referred to as inversion of control.

Let us take a simple example and look at what I mean:

//Displays the name on the console
function sayHello(name) {
    //Displays the name on the console
    console.log(`Hello ${name}`);
}

//Function accepting the callback and a string parameter
function greeting(callback, name) {
    //The callback function passed here is 'SayHello'
    return callback(name);
}

//Call the greeting function
greeting(sayHello, 'Skay');

Note: The execution of the function 'greeting' will be completed only after the execution of the function 'sayHello' (callback) completed. In essence, the flow of control is inverted.

Conclusion

A quick recap on what we've covered in this article:

• What does asynchronous execution mean?
• What are higher-order functions and callback functions?
• How to create & pass callback functions?
• Inversion of Control

I think we've covered in great detail on what Callback is all about and an excellent article to continue reading is on Promises and you find it over here

Don't forget to subscribe and connect with me on Twitter @skaytech

You'll also enjoy the following articles:

• What are JavaScript Promises
• What is currying in JavaScript?
• ES6 - Higher-Order Functions
• ES6 - Spread Operator
• Understanding Hoisting
• A Gentle introduction to the Big O Notation, Time & Space Complexity
• A Basic Introduction to Webpack
• What is Event Loop in JavaScript?
• History of ECMAScript and beyond
• Understanding Closures

While JavaScript Async/Await have gained immense popularity over the recent years. It is important to understand Promises first, since, they lay the foundation over which Async/Await works.

In this article, we will look at the following concepts:

• What are 'Promises'?
• What are the various execution states of a 'Promise'?
• How to create and modify a 'Promise'?
• How to use the 'Then' & 'Catch' blocks?
• What is 'Promise Chaining'?

What are 'Promises'?

If you've ever been to a Starbucks during peak hours, you would have come across a scenario where the barista asks for your name and notes it down on your cup. When the order is ready, she calls out for you, so that you can pick up your order. Promises do exactly that.

Promises return back the execution status to the calling function to let them know what their current state of execution is.

What are the various execution states of a 'Promise'?

Promises are in one of the below three states:

• Pending - This is the state when the execution is still under processing.
• Resolved - This is the state when the promise is fulfilled and the resolution will be returned back to the calling function.
• Rejected - This is the state when something has gone wrong and the error will be returned back to the calling function.

If you remember the callback example, once the main function passes over the control to the callback function, the responsibility of returning the status of execution to the main function solely lies on the callback function.

'Promises' solve this problem by returning back the status of execution. Let's look at how to create a promise.

How to create & Modify a Promise?

A promise can simply be created by calling the constructor.

const promise = new Promise();

A callback is generally passed to a Promise with the resolve and reject status as parameters as shown below.

//A new promise is created and an anonymous function is passed on resolve & reject as the parameters
const promise = new Promise((resolve, reject) => {
    //After a timeout of 3 seconds the status of promise will be changed to resolved
    setTimeout(() => {
            resolve(); //Promise status changes to resolve
        }, 3000) //End of setTimeout method - After 3 sec resolve will be run
})

//Displays the status of the promise immediately. Note that the above function will run after 3 seconds
console.log('Status of Promise before being resolved: ', promise);

//Function will run after 5 seconds and hence will run after the promise has been resolved
setTimeout(() => {
    console.log('Status of Promise after being resolved: ', promise);
}, 5000); //Timeout set to 5 seconds

//Output
//Status of Promise before being resolved:  Promise {<pending>}

//After 5 seconds, the following will be output to the console
//Status of Promise after being resolved:  Promise {<resolved>: undefined}

Things to note:

• A promise is created using the 'new' constructor.
• To the promise constructor, an anonymous function (callback) is passed with the 'resolve' and 'reject' parameters.
• The above example uses ES6 arrow functions and setTimeout for delaying the execution of the function. If you like a refresher on ES6 arrow functions, you can read over here & about setTimeout function over here.
• The anonymous function changes the promise state to resolved after 3 seconds.
• Hence, the first statement will output the status of promise as 'pending'.
• The second anonymous function setTimeout will output the status of promise as 'resolved' since the function runs after 5 seconds and by then the previous anonymous function would have run and changed the status of promise to resolve.

The 'Then' & 'Catch' Blocks

'Then' & 'Catch' are two methods of the JavaScript object that can be invoked. When a promise is resolved, then the function that is passed to the 'then' will be invoked. Likewise, when a promise is rejected, the function passed to the 'catch' will be invoked.

Let us take a look with at the following examples:

Promise (resolved)

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(); //Promise is resolved after 3 seconds
    }, 3000)
});

promise.then(onSuccess); //the function 'onSuccess' will be invoked upon resolve()
promise.catch(onError);

function onSuccess() {
    console.log('The Promise has been resolved');
} //onSuccess() will be executed since the promise is resolved()

function onError() {
    console.log('An error has been encountered');
}

Promise (rejected)

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(); //Promise is rejected after 3 seconds
    }, 3000)
});

promise.then(onSuccess);
promise.catch(onError); // the function 'onError' will be invoked on reject()

function onSuccess() {
    console.log('The Promise has been resolved');
}

function onError() {
    console.log('An error has been encountered');
} //onError() will be executed since the promise is rejected()

A Practical Use-Case of a 'Promise'

Let us modify the previous example to use promise instead of callback.

//Define the Github User ID
const userId = 'skaytech';

/*
Function to fetch data using XMLHTTPRequest
The function uses Promise to resolve, reject based on the external API response
*/
const fetchData = function(userId) {

    return new Promise((resolve, reject) => {
        //Initialize xhr to a new XMLHttpRequest object 
        const xhr = new XMLHttpRequest();

        // Define the parameters to call an External API
        // Calling the Github getUsers API by userId
        // Params are - HTTP Method name, URL, Async (true/false)
        // When the third param is 'true', it means it's an asynchronous request
        xhr.open(
            'GET', `https://api.github.com/users/${userId}`, true);

        //The onload method will execute when a response has been received from external API
        xhr.onload = function() {
            //Checking for a response of 200 (It's a success (OK) response)
            if (xhr.status === 200) {
                //On success - resolve the promise and send response as a parameter
                resolve(xhr.responseText);
            } else {
                //On Error - reject the promise and pass the HTTP status as a parameter
                reject(xhr.status);
            }
        }

        //Upon Send the XMLHttpRequest will actual be processed
        //This is the method that actually triggers the API call
        xhr.send();
    });
}

//UI method to display the picture of Github User
function displayUserPicture(response) {
    const data = JSON.parse(response);
    const imgUrl = data.avatar_url;
    document.querySelector('#userimg').setAttribute('src', imgUrl);
}

//UI method to display Error if the Github User does not exits
function onError(status) {
    document.querySelector('#userimg').style.display = 'none';
    document.querySelector('#errorDiv').textContent = `Error Status: ${status}`;
}

//Invoke the fetch data function & pass the userId as a parameter
//then function is invoked upon success
//catch function will be invoked upon error
fetchData(userId)
    .then(response => displayUserPicture(response))
    .catch(err => onError(err));

Things that have changed from the previous example:

• The XMLHttpRequest is wrapped within a promise.
• Upon Success, the promise is resolved & the response data is passed as a parameter to the displayUserPicture function.
• Upon Error, the promise is rejected & the error is passed to the onError function.

You can play around with the code over here

Promise Chaining

One last concept, before we are done and dusted with Promises. If you remember, we talked about how asynchronous programming generally isn't naturally tuned to the way we think. Chaining takes care of that and it is easier to explain with the following example.

/*
    A function that returns a resolved Promise after 2 seconds
    After a duration of 2 seconds, 'Wake up in the morning' is displayed on the console
*/
function getPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Wake up in the morning');
            resolve();
        }, 2000);
    });
}

function workout() {
    console.log('Workout');
}

function breakfast() {
    console.log('Breakfast');
}

function college() {
    console.log('College');
}

function sleep() {
    console.log('Sleep');

    throw new Error();
}

/*
    Promise Chaining in action
    Each then resolves and invokes the next function one by one
    For e.g. If getPromise() is successful, then workout() is invoked and only if
    workout() is successful, then breakfast() is invoked and so on
*/
getPromise()
    .then(workout)
    .then(breakfast)
    .then(college)
    .then(sleep)
    .catch(err => console.log(err));

//Output
/*
Wake up in the morning
 Workout
 Breakfast
 College
 Sleep
 Error
    at sleep 
*/

As you can see, chaining improves readability a lot and it's a lot easier to follow the code and it appears sequentially processing, while it is actually asynchronous in nature.

Conclusion

A quick recap on what we've covered in this article:

• What is a Promise?
• What are the execution states in a promise?
• How to create and modify a promise?
• The 'Then' & 'Catch' blocks of a promise.
• Promise Chaining.

Hope you enjoyed the article. Don't forget to subscribe to my newsletter and you can follow me on Twitter @skaytech

You will also like the following articles:

• JavaScript Functions
• ES6 - Higher-Order Functions
• What is currying?
• A Guide to Big O, Time & Space Complexity
• Understanding Hoisting
• ES6 - Spread Operator
• How to make an argument "required" in JavaScript?
• 5 Must-Read Tips to write a killer blog article
• What are Git Hooks?
• What is Event Loop in JavaScript?
• A Basic introduction to Webpack
• ES6 => Arrow Functions

Functions are one of the most fundamental concepts of JavaScript that you must ensure to get a good understanding of. It could be a little challenging for Newbies since a JS function can be defined in multiple forms. In this article, I'll be covering the various ways you can define a JavaScript function and its relevant use-cases.

Before you dive in, if you haven't read my article on JavaScript Objects, I would strongly recommend you do so before we proceed. Since it provides you the right foundation to build upon.

What is a function?

On the lighter side, whenever I think about a JavaScript function, I visualize a Chameleon. In a sense, it can essentially be defined in numerous ways.

If you are to define a function, it is simply a set of statements defined in a certain order to perform an action. Let us look at the various ways a function can be defined with an example.

A Simple Function

A simple function will contain the 'function' keyword followed by the function name and a set of angular brackets () which can accept optional parameters. The parameters passed within the angular brackets can be used inside the function body. The content within the function's curly braces {} is referenced as the function body. Let us look at a few examples below.

//FUNCTION DECLARATION - No Parameters
//Function (keyword) followed by the name of the function (sayHello)
//Followed by a set of '()' that can optionally accept parameters
//The statements within the '{}' is the function body
function sayHello() {
    console.log('Hello');
}

//Function can be invoked using the Function Name
sayHello(); //Output -> Hello

//FUNCTION DECLARATION - 1 Parameter
//The '()' accepts the name parameter
//Using the backticks `` we can reference the variable 'name' using the syntax ${}
//Use of ${variable} was introduced with ES6
function greet(name) {
    console.log(`Hello ${name}`);
}

//Invoking the function 'greet'
greet('Skay'); //Output -> Hello Skay

function displayFullName(firstName, lastName) {
    console.log(`The Full Name is ${firstName} ${lastName}`);
}

//Invoking the function 'displayFullName'
displayFullName('John', 'Smith'); //Output -> The Full Name is John Smith

A Function that can return values

The above examples demonstrated functions that execute the set of statements within the function body. Let us look at examples of functions that can return a value or a set of values to the invoking statement.

//A simple function that accepts 'color' as a parameter
//The function checks the color and returns a String with the name of a fruit matching the color
function nameFruitByColor(color) {
    if(color === 'red') {
        return 'apple';
    } else if (color === 'yellow') {
        return 'banana';
    } else if (color === 'green') {
        return 'watermelon';
    }
}

//Display the value on console returned by the function 'nameFruitByColor'
console.log(nameFruitByColor('red'));
//Output -> apple

The above example shows that the function returns a string. In fact, anything can be returned from a function such as a string, number, boolean, object, etc.

Up until now, we've seen some relatively simple examples of functions. Now, let's look at some complex variations of function declarations.

Anonymous Functions

A JavaScript function is referred to as an anonymous function when you omit the 'Function Name' from the declaration. But, the catch is that it must be assigned to a variable. Let us look at the code below.

//Main things to note in the function declaration
//Function Name is omitted
//The function is assigned to a variable 'fullName'
const fullName = function(firstName, lastName) {
    return `The Full Name is ${firstName} ${lastName}`;
}

//If you console.log the 'fullName' variable as is then
//it returns the entire function
console.log(fullName);

//If you console.log without any parameters
//It displays 'The Full Name is undefined undefined'
console.log(fullName());

//If you console.log with parameters passed to the function
//It displays 
console.log(fullName('John', 'Smith'));

The above syntax is also referred to as a function expression. You can treat 'fullName' as the function name and hence it is used to invoke the function.

Now, function expressions are handy when you need to pass them as parameters to other functions.

Let us look at the following example in detail:

Step 1:

Define two function expressions, one to add two numbers and one to subtract two numbers. The functions also return the value of addition and subtraction to the invoking statement.

//Function 'add' returns sum of two numbers
const add = function(a, b) {
  return a + b;
}

//Function 'subtract' returns difference of two numbers
const subtract = function(a, b) {
  return a - b;
}

Step 2:

Watch this declaration closely, the function 'calculate' has a simple function syntax, but it also accepts 'func' function as a parameter. In the return statement, when the code 'func(a, b)' runs, the function 'func' is invoked.

function calculate(func, a, b) {
  return func(a, b);
}

Step 3

In the code below, we have two function expressions, calculateSum and calculateDifference.

In the first line, the 'calculate' function is called with the 'add' function and the numbers 6 and 4 are passed as parameters. The output of the function will be number 10.

In the second line, the 'calculate' function is called with the 'subtract' function and the numbers 6 and 4 are passed as parameters. The output of the function will be number 2.

//Two functions are made over here
//First call is to the 'calculate' function with the parameters 'add', 6 and 4
//The second call is to the 'add' function that is passed as a parameter
const calculateSum = calculate(add, 6, 4);

console.log(calculateSum); //10

//Two functions are made over here
//First call is to the 'calculate' function with the parameters 'subtract', 6 and 4
//The second call is to the 'subtract' function that is passed as a parameter
const calculateDifference =  calculate(subtract, 6, 4);

console.log(calculateDifference); //2

Hope you were able to follow the above example. This pattern is heavily used in AJAX when you pass callback functions to handle success or failure scenarios.

Nested Functions

Nested functions are functions that contain one or more functions inside them. The inner functions can further contain functions and so on. Let us look at the code below to understand better.

//A Simple Function called myWorld that contains two inner functions
function myWorld() {

    //Inner Function that displays My Hobbies
    function myHobbies() {
        console.log('Music & Programming');
    }

    //Inner Function that displays My Bank Balance
    function myBankBalance() {
        console.log('Not enough money to diplay balance!!!');
    }

    myHobbies();

}

//Invoking the outer function will invoke the inner function myHobbies() defined within it's body
//Output -> Music & Programming
myWorld();

//Will display an error - Cannot read property, since myBankBalance() is a private function
myWorld().myBankBalance();

Couple of things to note from the above code:

• The myWorld function contains 2 inner functions myHobbies and myBankBalance.
• When myWorld function is invoked, it will in turn invoke the myHobbies function defined in its body.
• The inner functions myHobbies & myBankBalance have access to all the variables & parameters of the outer function myWorld.
• However, inner functions are like private implementations. They cannot be invoked from outside the function. Hence, the statement myWorld().myBankBalance() will display an error.

The use of Inner functions is sort of a good starting point to understand a very important concept in JavaScript called 'Closures'. I'll discuss that in a separate article.

Immediately Invoked Function Expression (IIFE, pronounced 'iffy')

An IIFE is an anonymous function expression that is invoked immediately. You can define an IIFE as shown in the code below.

//Syntax-1
(function(param){
    //Functional Code
}());

//Syntax-2
(function(param){
    //Functional Code
})();

(function() {
    console.log('Say Hello');
}());

The above function will be self-invoked and will display the statement 'Say Hello'. You can read more about IIFE over here.

Constructor Functions

One of the features of object-oriented is the use of a constructor to create objects. JavaScript supports this feature through constructor functions. A constructor function can be used to create many objects with predefined properties and methods. Let us look at the below example to understand it better.

//Constructor Function Phone that accepts three parameters make, model and color 
function Phone(make, model, color) {
    //All parameters passed to the function are assigned as properties to the Phone object
    this.make = make;
    this.model = model;
    this.color = color;

    //Method that will display the Phone's model clicking a selfie
    this.clickSelfie = function() {
        console.log(`${this.model} is clicking a selfie`);
    }

    //Displays the color of the phone
    this.displayColor = function() {
        console.log(`The color of the phone is ${this.color}`);
    }
}

const iPhoneX = new Phone('Apple', 'iPhoneX', 'Red');
const onePlus7 = new Phone('One Plus', 'One Plus 7', 'Blue');

iPhoneX.clickSelfie();
onePlus7.clickSelfie();

iPhoneX.displayColor();
onePlus7.displayColor();

Couple of things to note from the above example:

• The function 'Phone' accepts 3 parameters and when a 'new' Phone object is created, it sets the parameters to the object's properties.
• To create an object using the Constructor Function, you must use the 'new' keyword.
• The 'this' keyword refers to the 'Phone' instance. So, when the statement iPhoneX = new Phone('Apple', 'iPhoneX', 'Red') is executed, the parameter 'Apple' will be set to the iPhoneX's property called 'make'. Whereas in the case of onePlus7, the make property will be One Plus. Hope that makes sense.
• Further, you can invoke all methods defined inside the function using the dot-operator. In the above example, iPhoneX.clickSelfie(); will output 'iPhoneX is clicking a selfie'. Whereas onePlus7.clickSelfie() will output 'One Plus 7 is clicking a selfie'.
• Also, it is considered best practice to name constructor functions using the Capital letter.

A Word of Caution!

Always remember to use the 'new' keyword to create objects from constructor functions. Forgetting the 'new' keyword and trying to create an object like the code shown below, will result in the object being created in the global window object which is really really bad.

const samsungGalaxy = Phone('Samsung', 'Galaxy S20', 'Gray');

By default, the keyword 'this' points to the global window object unless specified explicitly and hence when the 'new' keyword was not used, the object was being created as a part of the global window object.

There's a way to circumvent the above problem using the 'strict' mode on. Strict mode enforces coding guidelines and throws an error whenever it encounters unsafe code. You can use 'strict' mode as shown below.

'use strict'
function Phone(make, model, color) {
    ......
    ......
}

Arrow Functions

With ES6, JavaScript introduced Arrow Functions. It is a topic that needs a dedicated article and you can read more about it over here.

Conclusion

I hope you enjoyed the article. I hope I have covered everything there's to know about JavaScript functions. Please leave your comments, likes and share it with other JavaScript newbies out there.

Don't forget to subscribe to my newsletter and follow me on twitter @skaytech.

You might also be interested in:

• What is currying?
• A Guide to Big O, Time & Space Complexity
• Understanding Hoisting
• ES6 - Spread Operator
• How to make an argument "required" in JavaScript?
• 5 Must-Read Tips to write a killer blog article
• What are Git Hooks?
• What is Event Loop in JavaScript?
• A Basic introduction to Webpack
• ES6 => Arrow Functions

In this article, we will first understand what a higher-order function is and then look at a few code examples of the popular higher-order functions such as forEach, map, filter, reduce, etc.

What are Higher Order Functions?

It is important to first understand what first-class citizens are before we move to higher-order functions.

First-Class Citizens

In JavaScript, functions are treated as 'First Class' citizens. The reason is that in JavaScript a function is fundamentally an object.

Let us take a quick example to explain this better. The below code is an example of a simple function.

//A simple function
function sayHello() {
    console.log('Hello');
}

//Invoke the function
sayHello(); //output -> Hello

When we say that Functions are objects, we can assign properties to the function similar to an object as shown below.

//Since the function is essentially an object, you can add properties to it
sayHello.greet = 'Namaste';

console.log(sayHello.greet); // Output -> Namaste

Note: While we can assign an attribute to a function. It is generally considered a bad practice. If you must add an attribute, then ensure you use an object.

You can also assign variables to a function as the code example shown below:

//A simple function
const sayHello = function() {
    console.log('Hello');
}

//Invoke the function
sayHello(); //output -> Hello

The above examples are that of 'First-Class' functions.

Higher-Order Functions

Higher-order functions are functions that take other functions as arguments or functions that return a function as their result.

The below code example will hopefully make the above explanation more clear.

//Function Sum of two arguments a & b
const sum = function (a, b) {
  return a + b;
};

//Higher order function - takes 'func' as an argument & returns a 'func' for execution
const higherOrderFunction = (func) => (a, b) => {
  return func(a, b);
};
const sumFor = higherOrderFunction(sum);

console.log(sumFor);

/**
 *  The Output of sumFor (HigherOrderFunction) is
 *  (a, b) => {
 *     return func(a, b);
 *  }
 * 
 */

console.log(sumFor(2, 3)); //Output -> 5

Things to note:

• The function 'higherOrderFunction' accepts a function 'func' as a parameter.
• The function 'func' that is passed in as a parameter is referred to as a callback.

Array.prototype.forEach, Array.prototype.map, Array.prototype.filter are few examples of high-order functions introduced with ES5.

Let's dive into the actual functions.

Array.forEach

The forEach function was introduced with ES5 as Array.prototype.forEach and with ES6, it's simply referenced as Array.forEach.

Syntax: Array.forEach( callback( currentValue, currentIndex, array));

The callback function receives three parameters:

• The current element value - Mandatory
• The current element index - Optional
• The array that is being traversed.

Let us look at a code example:

//An array of Marvel Movies with the title & year of release
const marvelMovies = [
  {
    title: "Iron Man",
    year: 2008,
  },
  {
    title: "The Avengers",
    year: 2012,
  },
  {
    title: "Doctor Strange",
    year: 2016,
  },
  {
    title: "Avengers: Infinity War",
    year: 2018,
  },
  {
    title: "Avengers: End Game",
    year: 2019,
  },
];

//forEach loops through each movie & prints the name of the title & year it was released on the console
//The anonymous function accepts 'movie' as an argument which matches with the current element
marvelMovies.forEach((movie) => {
  console.log(`The title of the movie is $${movie.title}`);
  console.log(`${movie.year} is the year the movie was released.`);
});

/*
Output
---------
The title of the movie is $Iron Man
2008 is the year the movie was released.
The title of the movie is $The Avengers
2012 is the year the movie was released.
The title of the movie is $Doctor Strange
2016 is the year the movie was released.
The title of the movie is $Avengers: Infinity War
2018 is the year the movie was released.
The title of the movie is $Avengers: End Game
2019 is the year the movie was released.
---------
*/

Things to note:

• The callback function is an anonymous function. It is used in conjunction with an arrow function. If you would like a refresher on arrow function, you can read over here.
• I have used 'movie' to reference the current element that is passed in as the argument. In reality, you can use any name to the variable you are referencing the current element.
• The forEach loops through the 'marvelMovies' array and displays the title and the year of release on the console.

Array.map

The map function was introduced with ES5 as Array.prototype.map and with ES6, it's simply referenced as Array.map.

Syntax: Array.map( callback( currentValue, currentIndex, array));

The callback function receives three parameters:

• The current element value - Mandatory
• The current element index - Optional
• The array that is being traversed.

The important thing to note here is that the 'map' function returns a 'new' array with the results of the callback function applied to every element of the original array, in the same order.

Let us take the same marvelMovies array and use the map function to rate only the movies with the title 'Avengers'.

//An array of Marvel Movies with the title & year of release
const marvelMovies = [
  {
    title: "Iron Man",
    year: 2008,
  },
  {
    title: "The Avengers",
    year: 2012,
  },
  {
    title: "Doctor Strange",
    year: 2016,
  },
  {
    title: "Avengers: Infinity War",
    year: 2018,
  },
  {
    title: "Avengers: End Game",
    year: 2019,
  },
];

//map Function
//marvelMovies.map function will return a new array that'll be assigned to newMarvelMovies
const newMarvelMovies = marvelMovies.map((marvelMovie) => {

        //Check if the title contains 'Avengers'
    if(marvelMovie.title.includes('Avengers')) {
                //Add the 'rating' atrribute to the current element
        marvelMovie['rating'] = 5;
    }
        //the element will be returned as a part of the anonymous function
        //the element will be added as a part of the new array being returned from the map function
    return marvelMovie;
});

//Display the value of the new Array 'newMarvelMovies'
console.log(newMarvelMovies);

/*
Output ->
0: {title: "Iron Man", year: 2008}
1: {title: "The Avengers", year: 2012, rating: 5}
2: {title: "Doctor Strange", year: 2016}
3: {title: "Avengers: Infinity War", year: 2018, rating: 5}
4: {title: "Avengers: End Game", year: 2019, rating: 5}
*/

Things to Note:

• The 'map' function returns a 'new' array.
• In this example, I've used 'marvelMovie' name for the current element, just to demonstrate that any name can be used for referencing the current element.
• The main use-case for a 'map' function is to edit or manipulate the elements of the array.

Array.filter

The filter function was introduced with ES5 as Array.prototype.filter and with ES6, it's simply referenced as an Array.filter.

Syntax: Array.filter( callback( currentValue, currentIndex, array));

The callback function receives three parameters:

• The current element value - Mandatory
• The current element index - Optional
• The array that is being traversed.

The filter function creates a new array with all the elements that pass the condition check specified in the callback function.

Let us look at the following code example:

//An array of Marvel Movies with the title & year of release
const marvelMovies = [
  {
    title: "Iron Man",
    year: 2008,
  },
  {
    title: "The Avengers",
    year: 2012,
  },
  {
    title: "Doctor Strange",
    year: 2016,
  },
  {
    title: "Avengers: Infinity War",
    year: 2018,
  },
  {
    title: "Avengers: End Game",
    year: 2019,
  },
];

//filter Function
//filteredMarvelMovies is a new array
//marvelMovies.filter function will return only the elements who's title does not contain 'Avengers'
const filteredMarvelMovies = marvelMovies.filter((marvelMovie) => {
    return !marvelMovie.title.includes('Avengers');
});

//Display the value of the new Array 'filteredMarvelMovies'
console.log(filteredMarvelMovies);

/*
Output ->
0: {title: "Iron Man", year: 2008}
1: {title: "Doctor Strange", year: 2016}
*/

Things to Note:

• The 'filter' function returns a 'new' array.
• The main use-case for a 'filter' function is to extract a specific sub-set of elements of the array matching a specific condition.

Array.some

The 'some' function was introduced with ES5 as Array.prototype.filter and with ES6, it's simply referenced as Array.some.

Syntax: Array.some( callback( currentValue, currentIndex, array));

The callback function receives three parameters:

• The current element value - Mandatory
• The current element index - Optional
• The array that is being traversed.

The 'some' function tests for whether at least one element in the array passes the test condition specified in the callback function. It returns a boolean value.

Let us look at the following code example:

//An array of Marvel Movies with the title & year of release
const marvelMovies = [
  {
    title: "Iron Man",
    year: 2008,
  },
  {
    title: "The Avengers",
    year: 2012,
  },
  {
    title: "Doctor Strange",
    year: 2016,
  },
  {
    title: "Avengers: Infinity War",
    year: 2018,
  },
  {
    title: "Avengers: End Game",
    year: 2019,
  },
];

//some function
//Checks & return a true if any one element title of the marvelMovies array 
//matches with the string 'Thor'
const checkTitle = marvelMovies.some(movie => {
    return movie.title === 'Thor'; 
});

//Display the boolean value returned from the 'some' function
console.log(checkTitle); //output -> false

I believe that the above code with the comments above is self-explanatory. Basically, the 'some' function checks if any one of the values in the array matches the condition (title matching 'Thor') and returns the value 'false', since there's no matching value in the marvelMovies array.

Array.every

The 'every' function was introduced with ES5 as Array.prototype.every and with ES6, it's simply referenced as Array.every.

Syntax: Array.every( callback( currentValue, currentIndex, array));

The callback function receives three parameters:

• The current element value - Mandatory
• The current element index - Optional
• The array that is being traversed.

The 'every' function tests whether all the elements in the array pass the condition specified in the callback function. It returns a boolean value.

Let us look at the code example below:

//An array of Marvel Movies with the title, year of release & rating
const marvelMovies = [
  {
    title: "Iron Man",
    year: 2008,
    rating: 5
  },
  {
    title: "The Avengers",
    year: 2012,
    rating: 5
  },
  {
    title: "Doctor Strange",
    year: 2016,
    rating: 4
  },
  {
    title: "Avengers: Infinity War",
    year: 2018,
    rating: 5
  },
  {
    title: "Avengers: End Game",
    year: 2019,
    rating: 5
  },
];

//every function
//Checks & returns a 'true' if all of elements in the marvelMovies array have a rating above 3
const checkRating = marvelMovies.every(movie => {
    return movie.rating > 3; 
});

//Display the boolean value returned from the 'every' function
console.log(checkRating); //output -> true

Array.find & Array.findIndex

The find & findIndex were introduced with ES5 as Array.prototype.find & Array.prototype.findIndex. With ES6, they can be used as Array.find & Array.findIndex.

The Array.find function returns the first matching element based on the condition specified in the callback function.

The Array.findIndex function returns the index of the first matching element based on the condition specified in the callback function.

The code example below gives a quick example of how to use find & findIndex functions.

//An array of Marvel Movies with the title, year of release & rating
const marvelMovies = [
  {
    title: "Iron Man",
    year: 2008,
    rating: 4
  },
  {
    title: "The Avengers",
    year: 2012,
    rating: 3
  },
  {
    title: "Doctor Strange",
    year: 2016,
    rating: 4
  },
  {
    title: "Avengers: Infinity War",
    year: 2018,
    rating: 5
  },
  {
    title: "Avengers: End Game",
    year: 2019,
    rating: 5
  },
];

//find function
//Checks & returns the first element that matches with the condition 'rating' equals 5
const found = marvelMovies.find(movie => {
    return movie.rating === 5; 
});

//Display the value of 'found' in the Console
console.log(found); 

//output -> {title: "Avengers: Infinity War", year: 2018, rating: 5}
//Even though the movie 'Avengers: End Game' also contains the rating 5,
//the first matching element is returned

--------------------------------------------------------------------------

//findIndex function
//Checks & returns the first element that matches with the condition 'rating' equals 4

const foundIndex = marvelMovies.findIndex(movie => {
    return movie.rating === 4; 
});

//Display the value of 'foundIndex' in the Console
console.log(foundIndex); //Output -> 0 (Array index starts from 0)
//The first matching element with a rating 4 is present in Array Index location 0

Array.reduce

The 'reduce' function was introduced with ES5 as Array.prototype.reduce. With ES6, it's simplified as Array.reduce.

Syntax: Array.reduce( callback( accumulator, currentValue, currentIndex, array));

The callback function receives four parameters:

• The accumulator - Mandatory
• The current element value - Mandatory
• The current element index - Optional
• The array that is being traversed.

The reducer function executes the callback function specified over each element of the array to finally return a single value.

In simplified words, through each iteration, the value returned by the callback function is assigned to the 'accumulator' and ultimately becomes the final single resulting value.

The reduce function is the one that's most often not well understood. Hence, I'll take an example without reducer and then use a reducer to explain the code flow.

//The marvelMovies array contains the title & profit each movie has made
const marvelMovies = [
    {
      title: "Iron Man",
      profit: 100000
    },
    {
      title: "The Avengers",
      profit: 200000
    },
    {
      title: "Doctor Strange",
      profit: 200000
    },
];    

//Initialize the totalProfit variable
let totalProfit = 0;

//Use forEach function to loop through the iteration & add the profit of each movie
//to the totalProfit variable
marvelMovies.forEach(movie => {
    totalProfit += movie.profit;
});

//Display the value of totalProfit on console
console.log(totalProfit);

Let us see how the above code can be simplified using the reduce function.

//The marvelMovies array contains the title & profit each movie has made
const marvelMovies = [
    {
      title: "Iron Man",
      profit: 100000
    },
    {
      title: "The Avengers",
      profit: 200000
    },
    {
      title: "Doctor Strange",
      profit: 200000
    },
];

//Use reduce function to loop through the iteration & add the movie's profit
//to the accumulator & return it to the 'totalProfit' variable
const totalProfit = marvelMovies.reduce((accumulator, movie) => {
    return accumulator + movie.profit;
}, 0);

//Display the value of totalProfit on console
console.log(totalProfit);

Things to note:

• The 'reduce' function takes in an 'accumulator' variable which holds the return value after every iteration.
• In the example, the movie's profit is added to the 'accumulator' exactly as how 'total' did in the previous example.
• The main use case of a reduce function is whenever any computation in an array needs to result in a singular value.

Conclusion

To summarize, we started with understanding what higher-order functions are and then saw a few code examples for functions such as forEach, map, filter, reduce, same & every.

The important thing to remember is that both the functions map & filter return 'new' arrays.

The 'map' function is primarily used to manipulate the values of elements of the array based on a condition, whereas, a filter function is used to generally filter out few elements from the array based on a condition. They are very heavily used in actual real-world applications especially with the React framework.

I hope you enjoyed this article. Don't forget to connect with me on Twitter @skaytech.

You will also enjoy the following articles:

• What is currying?
• A Guide to Big O, Time & Space Complexity
• Understanding Hoisting
• ES6 - Spread Operator
• How to make an argument "required" in JavaScript?
• 5 Must-Read Tips to write a killer blog article
• What are Git Hooks?
• What is Event Loop in JavaScript?
• A Basic introduction to Webpack
• ES6 => Arrow Functions

I have been in Software Engineering for a decade and a half and I am not a Computer Science graduate. Hence, I've never truly been taught Data Structures or Algorithms as a part of the course curriculum. Having said that, it did not stop me from being a good software engineer.

However, I was always curious to find out what it was all about and finally got some time to understand the absolute fundamentals. I'm hoping I can share my learnings in a way most of the non-computer science graduates can relate to.

In this article, we will look at the following three concepts:

1. Big O Notation
2. Time Complexity
3. Space Complexity

Big O Notation

Big O notation is used in computer science to describe the performance or complexity of an algorithm. In simple words, it is used to denote how long an algorithm takes to run and how much memory it takes as the input to the algorithm grows over time.

With Big O Notation we express the runtime in terms of how quickly it grows relative to the input, as the input gets larger.

Let's expand on the words highlighted in 'italics' above:

1. How quickly the runtime grows - It is generally hard to pin down the exact runtime used by your program, since, it is dependent on the processor speed and the other programs running on the computer at the moment. So, instead of talking about the 'runtime' directly, we use Big O Notation to talk about how quickly the runtime grows.

2. Relative to the input - If we were measuring our runtime directly, we could express our speed in seconds and minutes. Since we are measuring how quickly our runtime grows, we need to express our speed in terms of something else. With Big O, the size of the input is denoted as 'n'. So, we can say that as the runtime grows “on the order of the size of the input” (O(n)) or “on the order of the square of the size of the input” (O(n²)).

3. As the input gets larger - Our algorithm may have steps that seem expensive when the input size 'n' is small but is eclipsed eventually by other steps as 'n' gets larger. For Big O Notation analysis, we care more about the stuff that grows fastest as the input grows, because everything else is quickly eclipsed as 'n' gets very large.

Time Complexity

We have sort of defined time complexity in the above section while introducing Big O Notation.

Time complexity is a function describing the amount of time an algorithm takes in terms of the amount of input to the algorithm. In layman’s terms, We can say time complexity is the sum of the number of times each statement gets executed.

There are three different types of time complexity:

1. Constant Time ⇒ O(1) - The runtime does not change irrespective of the input size.
2. Linear Time ⇒ O(n) - The runtime grows linearly as the input 'n' grows.
3. Quadratic Time ⇒ O(n²) - The time it takes to complete a function increases like a quadratic function.

Let us look at a few code examples to understand time complexity in a better way.

Constant Time - O(1)

function displayFirstItem(inpArray) {
    console.log(inpArray[0]);
}

The above function runs in O(1) time (or “constant time”) relative to its input. This means that the input array could be 1 item or 1,000 items, but this function would still run once and display the first item in the array.

Linear Time ⇒ O(n)

function displayAllItems(inpArray) {
    inpArray.forEach(function(item) {
            console.log(item);
  });
}

The above function runs in O(n) time (or “linear time”), where 'n' is the number of items in the array. This means that if the array has 10 items, the function will run 10 times. If it has 1,000 items, the function will run 1,000 times.

Quadratic Time ⇒ O(n²)

function displayAllPossibleOrderedPairs(inpArray) {
  inpArray.forEach(firstItem => {
    inpArray.forEach(secondItem => {
      console.log(firstItem, secondItem);
    });
  });
}

In the above example, there are two loops nested. If the array has 'n' items, the outer loop runs 'n' times, and the inner loop runs 'n' times for each iteration of the outer loop, giving us n² total prints.

Thus, the function runs in O(n²) time (or “quadratic time”). If the array has 10 items, the function will run 100 times. If it has 1,000 items, it will run 1,000,000 times.

The Worst-Case Scenario

The worst-case scenario is generally discussed with Big O Notation, since, there are often cases when the worst-case runtime is significantly worse than the best case runtime.

function contains(haystack, needle) {

  // Does the haystack contain the needle?
  for (let i = 0; i < haystack.length; i++) {
    if (haystack[i] === needle) {
      return true;
    }
  }

  return false;
}

In the above example, there might be 100 items in the haystack, but the first item might be the needle, in which case I would return in just 1 iteration of the loop. In such a case, it would appear O(1) to the runtime.

However, if the needle was to be found in the last iteration, then the runtime would be O(n). Hence, to be more specific, we could always say that the best-case scenario would have an O(1) runtime, and the worst-case scenario would be O(n) runtime.

Space Complexity

Space complexity is a function describing the amount of memory (space) an algorithm takes in terms of the amount of input to the algorithm. When we say “this algorithm takes constant extra space,” because the amount of extra memory needed doesn’t vary with the number of items processed.

So, the question is when would we compromise the speed of execution? A simple answer to that is the availability of resources that you can allocate to the running program.

Let us look at a few code examples:

O(1) - Fixed Space (For a fixed input size)

function greet(inpArray) { 
 for (let i = 0; i < inpArray.length; i++) {
    console.log('Hello');
  }                                          
}

In the above example, the function takes O(1) i.e. fixed space, since the size of the input array does not change and we are only printing a String on the console.

O(n) - Space takes grows linearly

function greetNTimes(n) {
  const greetArray = [];
  for (let i = 0; i < n; i++) {
    greetArray[i] = 'Hello';
  }
  return greetArray;
}

In the above function, as the size of input 'n' grows, the size of greetArray also grows. This requires additional memory resources to be allocated to accommodate the larger array.

O(1) - Fixed Space (For a variable input size)

function getLargestItem(items) {
  let largest = -Number.MAX_VALUE;
  items.forEach(item => {
    if (item > largest) {
      largest = item;
    }
  });
  return largest;
}

In the above example, while it the size of 'items' might change, it does not result in any allocation of memory resources. Hence, the function takes a fixed space or O(1) and does not depend on the input.

Conclusion

So how to optimize our code?

Before optimizing the code, we should first understand the goal behind the optimization. Are we optimizing the code that is running a part of a batch job or are we optimizing a code that is being used in real-time while being accessed by thousands of users?

The goal is very important, since, then we can work towards finding out alternate solutions for the problem, and we can compare their runtimes to satisfy our goal.

While it might appear that constant time O(1) is probably better than linear time O(n), you must consider other factors such as is the code readable enough and is the code easy to maintain, how much memory is it consuming overall, etc.

I hope you enjoyed the article. I sincerely hope this article can act as a useful guide especially for the non-computer science graduates who want to venture into the world of Software development.

You can follow me on twitter @skaytech

You will also enjoy the following articles:

• ES6 - Arrow Functions
• A Basic Introduction to Webpack
• ES6 - var, let & const
• Understanding Closures
• setTimeout vs setInterval
• What is 'this' in JavaScript?
• IIFE - Immediately Invoked Function Expressions
• Docker Fundamentals
• History of ECMAScript
• JS Design Patterns-Module & Revealing Module Pattern

Before we talk about hoisting, I think it is important to understand how the JavaScript engine looks at the code, interprets, and runs it. Once we understand this, hoisting becomes straightforward to explain.

Execution Context

JavaScript engine breaks up the code into smaller segments to manage the complexity of interpreting and running it. If I have to explain this easier, think about a scenario where you attempt to write a web application. Your application typically would comprise of modules, functions, variable declarations, etc. Essentially, you have broken down the application into logical pieces in order to understand, maintain, and debug it.

Just like how modules, functions, etc. allow you to manage program complexity, Execution Context is the JavaScript engine's way to manage the complexity of interpreting the code. Hope makes things a little clearer.

Global Execution Context

The first execution context that gets created when the JavaScript engine runs your code is called the “Global Execution Context”. Initially, this Execution Context will consist of two things - a global object and a variable called 'this'.

The above image represents the global execution in the most basic form. The 'this' keyword references the global object which is the 'window' object.

Creation & Execution Phases

Now that we understand the global execution context, let us understand the two phases that exist while running any JavaScript program.

Let us consider the following code example:

var fruit = apple;

function getFruit() {
    return fruit;
}

Creation Phase

The below diagram depicts how the Global Execution Context looks during the creation phase.

In the Global Creation phase, the JavaScript engine will:

1. Create a global object.
2. Create an object called “this”.
3. Set up memory space for variables and functions.
4. Assign variable declarations a default value of “undefined” while placing any function declarations in memory.

Execution Phase

The below diagram depicts how the Global Execution Context looks during the execution phase.

In the Global Execution Phase, the JavaScript engine will:

1. Starts running the code line by line.
2. Assigns the 'real' values to the variables already present in the memory.

Now that we've understood the creation & execution phases, let us take another example and look at the output on the console.

console.log(`The fruit is ${fruit}`);
console.log(`The color is ${color}`);

var fruit = 'apple';
var color = 'red';

function getFruit() {
    return fruit;
}

function getColor() {
    return color;
}

//Output
//The fruit is undefined
//The color is undefined

Things to note:

• During the creation phase, the variables 'fruit' & 'color' are initialized with the values 'undefined'.
• Hence when the console.log statement is encountered, the value 'undefined' is printed on the console.

Hoisting

The process of assigning variable declarations a default value of 'undefined' during the creation phase is called Hoisting.

The thing that’s confusing about “hoisting” is that nothing is actually “hoisted” or moved around. A lot of other explanations out there talk about how the code variables and functions are moved up the stack before execution without clearly talking about the creation and execution phases in the execution context.

A quick example of the below code will make sense after understanding hoisting.

//The Variable x is initialized
x = 5;

//Output the value of x multiplied by 2 on the console
console.log(x * 2);

//The variable x is declared over here
var x;

//Output -> 10

In the above code example, you would notice that the variable 'x' is initialized in the first statement and then in the last statement there's a declaration of x. But, when the JavaScript engine is in the creation phase, it moves up the declaration statement to the top of the stack and hence the above program would look like below when the JavaScript engine runs it.

//The variable x is declared over here
var x;

//The Variable x is initialized
x = 5;

//Output the value of x multiplied by 2 on the console
console.log(x * 2);

//Output -> 10

Ideally, I would have expected the JavaScript engine to throw an error for using a variable before it has been declared, but thanks to ES6, this problem has been addressed with let & const. You can learn more about let & const over here.

What is not Hoisted?

While it might appear that the variable declarations using let & const are not hoisted. There is a subtle difference, which I will try to explain.

The Variable declarations (variable name bindings to memory) with let and const are hoisted, but not their definitions (i.e. function definitions). Hence, they cannot be accessed for any read/write operations before their first assignment (initialization).

Let me try and explain the above concept using the code example below:

// console will return Uncaught ReferenceError: randomVar is not defined
console.log(randomVar); 

// console will return Uncaught ReferenceError: Cannot access 'hoistedVar' before initialization
console.log(hoistedVar); 

function log() {
    // console will not return any error as this line isn't actually executed yet, so hoistedVar is not being accessed
  console.log(hoistedVar); 
}

// console will return Uncaught ReferenceError: Cannot access 'hoistedVar' before initialization
log(); 

// The hoistedVar is initialized here
let hoistedVar = "Hi";

// console will log "Hi"
log();

Important to note:

• The ReferenceError from trying to access the hoisted "let" variable declaration is different than the ReferenceError from trying to access a variable that has not been declared.

To reiterate, all variable declarations are hoisted, but the 'let' and 'const' variable declarations will give a ReferenceError if the variable is accessed before being initialized.

In addition, 'Arrow Functions' are not hoisted by the JavaScript engine.

Conclusion

Hoisting is nothing but the process of assigning variable declarations a default value of 'undefined' during the creation phase.

I would suggest that now that you immediately jump to my article on Closures since it's a continuation of the concepts described in this article. You can read it over here.

I hope you enjoyed this article. Do connect with me on Twitter @skaytech

You may also be interested in:

• Understanding Closures
• What is 'this' in JavaScript?
• The WAR - var vs let vs const
• When to use setTimeout vs setInterval
• What is Event Loop in JavaScript?
• Docker Fundamentals
• IIFE - Immediately Invoked Function Expressions
• History of ECMA/ES6/ES2015
• ES6 - Arrow Functions
• ES6 - Destructuring

In this article, we will first look at what first-class citizens and higher-order functions are to lay the foundation to explain 'Currying' in JavaScript. The code samples provided along with the explanation should make it easy to follow and understand the concepts.

First-Class Citizens

In JavaScript, the functions are treated as 'First Class' citizens. What this means is that any function can be returned to another function, since a function is fundamentally an object.

Let us take a quick example to explain this better. The below code is an example of a simple function.

//A Simple Arrow Function returning a value '50'
const sum = () => {
  return 50;
};

//Invoke the function and display the value on the console.
console.log(sum()); //Output -> 50

In the above example, the number 50 is returned when the function sum() is invoked.

As per the definition of a First-Class citizen, we can return the function sum() instead of the value 50 as shown in the code example below.

//Return the Function sum() instead of returning the value by adding the additional ()
const sum = () => () => {
  return 50;
};

//Invoke the function and display the value on the console.
console.log(sum());

/*
Output
-------
() => {
  return 50;
}
*/

Higher-Order Functions

Higher-order functions are functions that take other functions as arguments or functions that return a function as their result.

The below code example will make the above explanation more clear.

//Callback Function - Returns the sum of a & b
const sum = function(a, b) {
    return a + b;
}

//Higher order function - takes 'func' as an argument & returns a 'func' for execution
const higherOrderFunction = function(func, a, b) {
    return func(a, b);
}

//Invoke the higherOrderFunction and pass 'sum' function as an argument with the digits 2 & 3
console.log(higherOrderFunction(sum, 2, 3)); //Output -> 5

Things to note:

• The function 'higherOrderFunction' accepts a function 'func' as a parameter.
• The function 'func' that is passed in as a parameter is referred to as a callback.

Array.forEach, Array.map, Array.filter are some examples of high-order functions.

Currying

Currying a function is the process of taking a single function of multiple arguments and decomposing it into a sequence of functions that each take a single argument.

Let us take the following simple example:

//An Arrow function taking in arguments x & y and returning the sum
const sum = (x, y) => {
  return x + y;
};

//Output -> 5
console.log(sum(3, 2));

//By applying Currying the same can be broken into a function returning another function
const sum = (x) => {
  return (y) => {
    return x + y;
  };
}; 

//Output -> 5
console.log(sum(3)(2));

Using ES6 Arrow Functions, the above code can further be written in a simple manner as shown below.

//Simplified way to write the function using ES6 - Arrow Functions
const sum = (x) => (y) => x + y;

//Output -> 5
console.log(sum(3)(2));

That's all there is to currying. Let us look at a practical use-case of where it can be applied.

A Practical Use-Case

Let us assume we have to read entries from a database of an e-commerce application that has the entities, user, product, and ratings.

To query a single product from the database, we can write a function 'getProductById' as shown below.

//Simplified way to write the function using ES6 - Arrow Functions
const getProductById = (connection, id) => {
    connection.select('products').where({ id })    
}

//Invoke the function getProductById by passing the connection object & the product Id
getProductById(connection, 1);

By applying the 'currying' concept, we can simplify the above code as shown below.

//By applying Currying -> The function productById will return a function that'll query the products table by 'id'.
const getProductById = (connection) => (id) => {
    connection.select('products').where({ id })
}

//Invoke the function getProductById by passing the connection object & the product Id
const getProductByIdQuery = getProductById(connection);

/**
 * The Output of the above function 'getProductById' will be
 * 
 * (id) => {
 *    connection.select('products').where({ id })
 * }
 * 
 * and it will be assigned to getProductByIdQuery function
 */

//getProductByIdQuery can be simply invoked to fetch the product by it's Id
const product = getProductByIdQuery(1); //Ouput -> Return product matching the 'id' 1

The advantages of the above approach:

• The above approach obviously simplifies the code by avoiding the calling method to pass the 'connection' object repeatedly.
• Further, the biggest advantage is that we can encapsulate the 'connection' object by modifying the access level to the getProductById() function as private. In simple words, nobody should know about the 'connection' object who is querying for products.

We can further apply the 'currying' concept to the above example and take it to the next level and make it even more generic, so that, you can query for products, users, and reviews table.

//By applying Currying -> The function productById will return a function that'll query the products table by 'id'.
const getConnection = (connection) => (table) => (id) => {
    connection.select(table).where({ id })
}

//While we initialize the application - Get the Database connection
const getTableQuery = getConnection(connection);

/**
 * The Output of the above function 'getConnection' will be
 * (table) => {
 *    (id) => {
 *        connection.select('products').where({ id })
 *     }
 * }
 * and it will be assigned to getTableQuery function
 */

//Pass the table name 'products' to get the 'getProductById' query
const getProductByIdQuery = getTableQuery('products');

/**
 * The Output of the above function 'getTableQuery' will be
 * 
 * (id) => {
 *    connection.select('products').where({ id })
 * }
 * 
 * and it will be assigned to getProductByIdQuery function
 */

//getProductByIdQuery can be simply invoked to fetch the product by it's Id
const product = getProductByIdQuery(1); //Ouput -> Return product matching the 'id' 1

Now that we have found a way to generalize querying any table, querying users and reviews are as simple as the code shown below.

/**
* Pass the table name to get the 'getUserById' and 'getReviewById' query
*/
const getUserByIdQuery = getTableQuery('users');
const getReviewByIdQuery = getTableQuery('reviews');

//Fetch the user with the 'id' 5 using getUserByIdQuery
const user = getUserByIdQuery(5);

//Fetch the review with the 'id' 10 using getReviewByIdQuery
const review = getReviewByIdQuery(10);

As you can see, using the above code simplifies things, promotes reuse, and overall encourages the use of encapsulation.

Conclusion

I hope you enjoyed the article. Do connect with me on twitter @skaytech.

You will also love the following:

• ES6 - Arrow Functions
• A Basic Introduction to Webpack
• ES6 - var, let & const
• Understanding Closures
• setTimeout vs setInterval
• What is 'this' in JavaScript?
• IIFE - Immediately Invoked Function Expressions
• Docker Fundamentals
• History of ECMAScript
• JS Design Patterns-Module & Revealing Module Pattern

In this article, let us look at a very powerful yet simple feature introduced with ES6 or ES2015 version of JavaScript, the Spread Operator.

Spread Operator

The spread operator expands an iterable object into its individual elements. An iterable object is anything that you can loop over such as Array, Map, Set, DOM NodeList, etc.

A quick and easy example of the spread operator is shown below:

//An Array of fruits
const fruits = ['Apple', 'Banana', 'Watermelon'];

//Output the value of the array using the spread operator
console.log(...fruits);

//Output -> Apple Banana Watermelon

The spread syntax is denoted by three periods before the object. In the above example, the spread operator is used with the 'fruits' array and the values of the array are printed in a single line using the console.log statement.

Use-Cases of Spread Operator

Copy Arrays

I think this is one of the most practical examples that you'll come across while programming using ES6 syntax.

The important thing to note from the below code example is that a shallow copy of the elements of the array 'animals' array is made while assigning to the array 'animalsCopy. This means they do not hold the same reference, which you can verify using the 'triple equals check' operator.

//animals array initialized
const animals = ['dog', 'sheep', 'goat'];

//animalsCopy array is created with a Shallow copy of animals array values
const animalsCopy = [...animals];

//Display value on the console
console.log(animalsCopy);

//Output -> Array(3) ["dog", "sheep", "goat"]

console.log(animals === animalsCopy); //Output -> false

//Important thing to note here is that animals !== animalsCopy (Only a Shallow copy is made)

Copy Objects

This is exactly the same as copying arrays, except that we are using objects.

//Person object
const person = 
{ name : 'Skay', 
  age : 38 
}

//Shallow copy Person object using spread operator to create personCopy object
const personCopy = {...person};

console.log(personCopy); //Output -> { name: "Skay", age: 38 }

console.log(person === personCopy); //Output -> false (Shallow copy)

Merging Arrays

The Spread operator provides a simple and effective way to merge arrays without the need to loop through them.

const maleActors = ['Brad Pitt', 'Chris Evans', 'Matt Damon'];

const femaleActors = ['Jennifer Aniston', 'Jennifer Lawrence', 'Emma Stone']; 

const movieActors = [...maleActors, ...femaleActors];

console.log(movieActors); 
//Output -> Array(6) [ "Brad Pitt", "Chris Evans", "Matt Damon", "Jennifer Aniston", "Jennifer Lawrence", "Emma Stone" ]

Merging Objects

Merging Objects is similar to merging arrays except that there's a 'key' or an 'attribute' in the picture.

There are 2 possibilities when the two objects are merged:

• key is unique - The key/value will be copied over to the new object.
• key is common in both the objects - The value of the last object will replace the value of the previous object during the merge.

The code example below will help in understanding the scenario in a better way.

//Person1 Object containing the attributes name & age
const person1 = 
{ 
  name : "Skay", 
  age : 32 
};

//Person2 Object containing the attributes name, age & occupation
const person2 = 
{ 
    name : "Skay", 
    age: 38,
    occupation: "Web Developer" 
};

//Both objects are merged using the spread operator
//If key is not common between person1 & person2, then it's copied to the newPerson object
//However, for the age attribute, the value of 'person2' will be replaced with the value of 'person1'
const newPerson = {...person1, ...person2};
console.log(newPerson) ; // Output -> {name: "Skay", age: 38, occupation: "Web Developer"}

Spread Operator - With Strings

The spread operator also works with strings. One practical example is extracting characters from a string.

//'name' variable
const name = 'Skay';

//Spread Operator extracts the characters from the String and assigns to an array
const chars = [...name];

console.log(chars); //Output -> Array (4) ["S", "k", "a", "y"]

Spread Operator - Argument to a Function

This is another great practical example of passing an array into an argument of a function. Though, code readability becomes a topic of discussion when seeing spread operators as parameters to functions.

In the code example below, the spread operator spreads the variables into the argument in the same order they appeared in the array. So 1 is passed into a, 2 is passed into b, and 3 is passed into c.

//Array of numbers
const arr = [1,2,3];

//Arrow Function to add numbers
const add = (a,b,c) => a+b+c;

//Passing the array as a spread operator to the function 'add'
//The values of the array are spread across the variables in the same order 
//they appeared in the array
console.log(add(...arr)); //Output -> 6

Spread Operator with Destructuring

Another common use-case which you will come across in several places is combining spread operator while destructuring.

Destructuring is another powerful feature introduced with ES6. You can read more about it over here.

In the code example below, the attributes 'occupation', 'skills' are by default assigned to the 'others' variable when the spread operator is used.

//Person Object
const person = 
{
    name : 'Skay',
  age: 38,
  occupation: 'Web Developer',
    skills: 'HTML, CSS, JavaScript'
};

//Destructuring the Person object and assigning the values to name & age
//The attributes occupation & skills are automatically assigned to 'others'
//By using the spread operator
const { name, age, ...others } = person;

console.log(`Name is ${name}`); //Output -> Name is Skay
console.log(`Age is ${age}`); //Output -> Age is 38
console.log(others); 
// Output -> {occupation: "Web Developer", skills: "HTML, CSS, JavaScript"}

Convert NodeList to Array

This is another common example where you can use a spread operator. Typically, if we need to do any DOM manipulation of lists in a page, we will choose the elements from the DOM using a 'querySelectorAll' command.

When the 'querySelectorAll' command is used, it returns a NodeList. NodeList is similar to an array, but do not have the high-order methods of an array such as forEach, map, filter, etc.

However, with the spread operator, we can convert a NodeList into an Array in a single line.

/* Note: This is a sample code & will run with HTML code*/
//Assuming there's a number of list items with the className of 'items'
//It will return a NodeList 
let nodeList = document.querySelectorAll('.items');

//Using the spread operator, the nodeList is converted to an array
//This gives us the flexibility to use high-order array methods such as map, filter, etc.
var nodeArray = [...nodeList]

Conclusion

As we can see, the 'spread' syntax is a great convenience feature of JavaScript. We have seen the following features of the spread operator in this article:

• Combines 2 arrays into one.
• Pass arrays into a function as arguments with a single line of code. Very useful, when there are a larger number of arguments exist for a function.
• Can be combined with destructuring to extract specific values and assign the rest of the values to a single variable.
• Shallow copying of arrays & objects is possible.
• Practical use-cases such as extracting characters from a string or converting a NodeList into an array can be achieved in a single line.

I hope you enjoyed this article. Don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech.

You might also like the following articles:

• A Basic Introduction to Webpack
• How to make an argument 'required' in JavaScript?
• ES6 - var, let & const
• ES6 - Destructuring
• ES6 - Arrow Functions
• What are Git Hooks?
• Build a Custom SPA Router with VanillaJS
• What is Eventloop in JavaScript?
• Understanding Closures
• What is 'this' in JavaScript?

My friend Simon Hoiberg, had recently made a super cool video tweet and provided an excellent tip on how to make an argument in JavaScript as a "required" field.

In this article, I have provided an explanation with some code examples on Codepen to explore the concept further.

Arguments passed to a JavaScript function is Optional by default

The arguments passed to a JavaScript function is optional by default. Let us look at the code example below to understand the default behavior.

//someFunction is an ES6 Arrow function that accepts 'name' as a parameter and returns the string
//By default, the parameter name is optional
const someFunction = (name) => {
  return `My name is ${name}`;
};

//Invoking the 'someFunction()'
const output = someFunction();

console.log(output);

//Output -> My name is undefined

Things to note:

• Since no argument is passed to the function 'someFunction()', a default value of 'undefined' is assigned to the 'name' argument by the JavaScript engine.
• Hence, the value of the 'output' variable outputs to the console as 'My name is undefined'

You can play with the code over here.

How to make the Argument passed to a JavaScript function mandatory?

A very simple technique is to assign a default value to the argument. This default value will be a function that will simply throw an error with the message 'Argument is required'.

Let us look at the code example below, to see that in action.

//The function isRequired() throws an Error with the msg 'Argument is required'
const isRequired = () => {
  throw Error('Argument is required');
};

//someFunction is an ES6 Arrow function that accepts 'name' as a parameter and returns the string
//The parameter name is 'Mandatory' by assigning a default value of the function 'isRequired()'
const someFunction = (name = isRequired()) => {
  return `My name is ${name}`;
};

try {
  //Invoking the 'someFunction()'
  const output = someFunction();

  //Append the value of output to the HTML
  document
    .querySelector('#output')
    .appendChild(document.createTextNode(output));
} catch (err) {
  console.log(err.message);
}

// Output -> Argument is required

Things to note:

• When the someFunction() is invoked without passing the arguments, the default value assigned to the 'name' argument is invoked.
• The default value assigned to the 'name' argument is the function 'isRequired()'.
• When the function 'isRequired()' is invoked, the error 'Argument is required' is thrown.
• The error is caught within the catch block and the output 'Argument is required' displays on the console.

You can play with the code over here.

Conclusion

Thanks to my friend Simon for this simple, yet, powerful tip on how to make JavaScript argument mandatory when passing it to a function.

Hope you enjoyed the simple article. Don't forget to subscribe to my newsletter and follow me on Twitter @skaytech

You might also be interested in the following:

• Docker Fundamentals
• Understanding Closures
• 5 Must-Read Tips to write a Killer Blog Article
• Build a Custom SPA Router using VanillaJS
• A Practical Guide to stay more productive and organized
• IIFE - Immediately Invoked Function Expressions
• JS Design Patterns: Module & Revealing Module Pattern
• ES6 - var, let & const
• ES6 - setTimeout vs setInterval

KISS is an acronym coined by the U.S Navy in 1960 (source wikipedia) and it is also a very famous design principle in the technology world. I cannot stress how much it also applies while writing your blog.

It is recommended to have a simple introduction, telling the audience what they can expect from your blog article and what how the reader will benefit if they read the article. This sets up a good premise to capture the engagement of the reader.

Likewise, a good conclusion summarizing the points that you've covered in your article, along with any reference links for further reading will be a good way to conclude the article.

A bonus tip is to have your subscription and the twitter handle at the end of the post to ensure your reader has the ability to connect with you to increase your overall engagement.

KIC - Keep it Concise

It is highly recommended to keep it to the point and concise. The simple reason being that your readers are generally very busy. Ask yourself if your reader could ready your entire article during a 5-10 coffee/tea break.

As a rule of thumb, the ideal length for an article is the length occupied when you press the 'Page Down' key 4 times. If you feel you want to explain more, then evaluate if you can make it into a series of articles vs one blog post.

Regarding the content, break it down into points and turn them into sub-headings. Each sub-heading should have a logical start and end. As a bonus, it'll be good to conclude your sub-heading by introducing the next topic in your article. This improves your overall continuity and increases reader engagement.

Count the number of "You"s in the Article.

While this might sound silly, this is very important. Why? The simple reason is that I'm writing to you, the reader, and not for myself. So I'll comb through the article and change as many self-references as possible from "me" or "I" to "you"s in the article.

If I'm not able to change it, it's a good indication that the article will never work in terms of engagement, since the readers will not be able to relate to the article nor the topic.

Use Illustrations, Images & Code Examples

To the age-old saying of 'A picture is worth a 1000 words', it's cannot be more true especially when it comes to your blog article. If you are explaining an article, completing it with illustrations ensures that the concepts are reinforced in your brain.

Images with the text help the readers consume content easily, as compared to just text, which can tend to get monotonous. Placing the images strategically within your article is important and care should be taken to not break the reader's flow while placing the images.

A good rule of thumb is to either read out your article yourself or give it to a friend and ask them where it kind of gets monotonous or the attention slip away and place the image around those portions.

The above can be extended while embedding code snippets while writing your technical article. It is easier with code snippets, since, your article would naturally go about explaining the code.

Show and Tell

Finally, you'll need to tell your reader how they've benefited from your article in a way they can identify. A good way to do this is by providing them with a bunch of actionable items, for example, you can provide them with the required resources to take the knowledge they have gained from your article and move forward.

For a technical article, providing a demo to your work and possibly the Github repository greatly increases engagement and is very satisfying to the reader.

Conclusion

In simple words, write from your heart. Write about the things you are most passionate about and the rest will follow. Start writing consistently and you'll improve leaps and bounds.

I hope you've enjoyed this article and I would like to recommend two more excellent articles on blogging tips:

How to write a blog without motivation? by @iamshadmirza

A Guide for writing consistently for technical writers! by @atapas

If you enjoy my articles, don't forget to Subscribe. You can also find me on Twitter @skaytech

You may also enjoy the following articles:

• IIFE
• Build a custom SPA router using VanillaJS
• History of ECMAScript
• ES6 => Arrow Functions
• Docker Fundamentals
• What are Git Hooks?
• A Practical Guide to help you stay organized and productive
• What is Event Loop in JavaScript?
• A Basic Introduction to Webpack
• Understanding Closures
• What is 'this' in JavaScript?

In this article, I will explain how I had built a custom SPA router using Vanilla JavaScript. I had to build a UI project without any using framework and had to figure out how to handle routing and discovered that you can build your own router using Vanilla JavaScript quiet easily.

Disclaimer

I agree with the philosophy that we should not reinvent the wheel. And with the advent of frameworks such as ReactJS, Vue, each of them has its own custom routing library and I'll recommend you using them rather than building something ground up. However, the intent of this article is to explain that it is possible to write a custom router using VanillaJS and it also gives an opportunity to find out what happens under the hood.

Window - History & Location Objects

In order to build a custom router, we need to first understand the 'history' and the 'location' objects of the 'window' object and few methods that are required to handle the page navigation.

History Object

The window.history object provides the details regarding the browser's session history. It contains methods & properties that help you navigate back and forth through the user's history.

You can open your browser console and type history, and you'll see all the methods and properties of the history object listed as shown below.

Location Object

The window.location contains all the information related to the current location such as the origin, pathname, etc.

You can open your browser console and type location, and you'll see all the various properties and methods associated with the location object as shown below.

History - pushState()

The method pushState is used to add a state to the browser's session history stack.

Syntax: history.pushState(state, title, [, url]);

• state - The JavaScript object associated with the new history entry. The state object can be anything that can be serialized.
• title - The title is actually not used by Modern browsers yet. it is safe to pass an empty string or the title you wish you refer your state.
• URL - The new history entry's URL is specified by this parameter.

We will be using the pushState method to update the browser's URL during page navigation.

Window - popstate event

The popstate event) is fired when the active history changes when the user navigates the session history.

In other words, whenever a back or a forward button is pressed on the browser, then the history changes and at that moment the 'popstate' event is fired.

We will be using the 'popstate' event to handle logic whenever the history changes.

Implementing the Router

Now that we've got the fundamentals in place, we will look at a step-by-step approach to implementing the router using VanillaJS.

The View

The index.html is a very simple page which contains an unordered list of links for the pages:

• home
• about
• contact

In addition, there are 3 separate HTML for the home, about, and contact views.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla JS Router</title>
  </head>
  <body>
    <ul class="navbar-list">
      <li class="navbar-item">
        <a href="#" onclick="onNavClick('/about'); return false;">About</a>
      </li>
      <li class="navbar-item">
        <a href="#" onclick="onNavClick('/'); return false;">Home</a>
      </li>
      <li class="navbar-item">
        <a href="#" onclick="onNavClick('/contact'); return false;">Contact</a>
      </li>
    </ul>
    <div id="root"></div>
    <script src="./js/app.js"></script>
  </body>
</html>

home.html

<div>
  <h1>******Welcome to the Home Page*****</h1>
</div>

about.html

<div>
  <h1>******Welcome to the About Page*****</h1>
</div>

contact.html

<div>
  <h1>******Welcome to the Contact Page*****</h1>
</div>

Load the HTML pages (Async)

I have used the async/await with 'fetch API' for asynchronous loading of pages and have used 'promise' to assign the values to home, about and contact variables.

//Declare the variables for home, about & contact html pages
let home = '';
let about = '';
let contact = '';

/**
 *
 * @param {String} page - Represents the page information that needs to be retrieved
 * @returns {String} resHtml - The Page's HTML is returned from the async invocation
 */

const loadPage = async (page) => {
  const response = await fetch(page);
  const resHtml = await response.text();
  return resHtml;
};

/**
 * The Async function loads all HTML to the variables 'home', 'about' & 'contact'
 */
const loadAllPages = async () => {
  home = await loadPage('home.html');
  about = await loadPage('about.html');
  contact = await loadPage('contact.html');
};

Let us walk through the flow for one page:

• When the 'loadAllPages' function is invoked, the first function loadPage('home.html') first fired.
• Inside the 'loadPage' function, the fetch('home.html') will be fired to load the home.html asynchronously.
• The 'await' keyword ensures that the 'response' variable is populated and the 'resHtml' is assigned 'response.text()' since the text is returned in the API call.
• The value of 'resHtml' is returned to the 'loadAllPages' function and assigned to the 'home' variable.

Likewise, API calls are made for 'about' and 'contact' pages as well and the values are populated to the variables about & contact.

The Main Function & Root Element

Fetch the 'rootDiv' from the 'index.html' document.

The main function will be invoked on the Page load. Inside, the main function, we are first ensuring that all the HTML pages are loaded into the variables 'home', 'about' and 'contact'.

In order to ensure that the 'home' page is loaded to the root element upon page load, the rootDiv.innerHTML is set to 'home' variable.

Further, the 'routes' are set up with the corresponding page mapping in order to load the appropriate page when the routes are called.

//Get the Element with the Id 'root'
const rootDiv = document.getElementById('root');

/**
 * The Main Function is an async function that first loads All Page HTML to the variables
 * Once the variables are loaded with the contents, then they are assigned to the 'routes' variable
 */
const main = async () => {
  await loadAllPages();
  rootDiv.innerHTML = home;
  routes = {
    '/': home,
    '/contact': contact,
    '/about': about,
  };
};

// Invoke the Main function
main();

Routing - When a link is clicked on the Main page

From the above index.html, we are invoking the 'onNavClick' method and passing in the 'route' upon clicking the 'a' link as shown in the code snippet below.

<li class="navbar-item">
    <a href="#" onclick="onNavClick('/about'); return false;">About</a>
</li>

/**
 *
 * @param {String} pathname - Pass the 'pathname' passed from onClick function of the link (index.html)
 * The function is invoked when any link is clicked in the HTML.
 * The onClick event on the HTML invokes the onNavClick & passes the pathname as param
 */
const onNavClick = (pathname) => {
  window.history.pushState({}, pathname, window.location.origin + pathname);
  rootDiv.innerHTML = routes[pathname];
};

The onNavClick method accepts the 'pathname' which is the 'route' link and uses the window.history.'pushState' method to alter the state.

The second line 'rootDiv.innerHTML = routes[pathname]' will render the appropriate page based on what is configured within the routes in the main function (see above).

At this point, you have a functional router that navigates to the appropriate page upon clicking a link and the corresponding link is also updated in the URL browser.

The only thing that you'll notice is that when you hit a 'back' or 'forward' button on the browser, the links are correctly updated on the URL, however, the contents on the page are not refreshed.

Let us take care of that in the last section of the article.

Handle Page Rendering upon State Change

If you would recall from the above definition of 'onpopstate event' method, it'll be invoked whenever the active history changes in the browser.

We are using that hook to ensure that the rootDiv is populated with the appropriate page based on the routes configured.

That's it!! You should now have a fully functional custom router built using Vanilla JavaScript.

/**
 * The Function is invoked when the window.history changes
 */
window.onpopstate = () => {  
  rootDiv.innerHTML = routes[window.location.pathname];
};

If you would like the complete code, you can find it on Github over here.

Conclusion

To summarize, we've covered how to build a basic custom router using VanillaJS. The router uses the window's history and location objects primarily and the methods pushState & onpopstate event.

Hope you enjoyed this article. Don't forget to subscribe and connect with me on Twitter @skaytech

Cover Photo by Nick Fewings on Unsplash

You might also enjoy the following articles:

• IIFE
• History of ECMAScript
• ES6 => Arrow Functions
• Docker Fundamentals
• What are Git Hooks?
• A Practical Guide to help you stay organized and productive
• What is Event Loop in JavaScript?
• A Basic Introduction to Webpack
• Understanding Closures
• What is 'this' in JavaScript?

In this article, we'll look at what Git Hooks are, why using Git Hooks are beneficial, and some practical examples of how to use them for development.

What are Git Hooks?

Git hooks are scripts that run automatically every time a particular event occurs in a Git repository. Through the scripts, you can customize Git’s internal behavior and trigger customizable actions at key points in the development life cycle.

There are two kinds of hooks:

• Client-side (local) hooks - They are prompted by the events on the local repository. For example, when a developer commits or merges the code.
• Server-side (remote) hooks - They are prompted by the events on the server hosting the repository. For example, when a developer pushes the code.

Why should you use Git Hooks?

As a part of the learning process, the question of 'Why to use a certain piece of technology?' is very vital to understand it's true intent or purpose of existence.

In my opinion, the adoption of well-defined processes and the use of automation greatly enhances the team's productivity to deliver software in a predictable manner.

A developer in a typical day writes code and commits to the project repository. A senior developer, in general, adopts to writing meaningful commit messages when performing a code commit. However, the same cannot be expected of junior developers who have just come into the project.

As a check-point to this, the project lead could establish a standard commit message format and must ensure that it must be followed by other team members. A good example of that could be to ensure that every commit message should start with a JIRA task Id. This becomes an excellent use-case of a Git hook. All you have to do is customize the 'pre-commit' git hook, that can intercept any commits made by the developer and validate for a JIRA task Id to be present.

The above mentioned is one simple example. In reality, we can do much more with the hooks such as check for code style (run lint or some equivalent), run static code analyzer tools such as Sonarqube or an equivalent, check for documentation of API methods if they are newly introduced and so much more. The possibilities are quite endless.

Implementing a Hook

Git hooks are a built-in feature that comes with every Git repository. Upon initializing a new project, Git automatically populates the hooks folder with template files.

Let us take a step-by-step approach:

Step 1 - Create a New Project folder & Initialize Git

1. Go to any folder and create a new folder 'myproject'.
2. Cd into your project and initialize the git repository.
3. You'll see a message shown below & a '.git' folder created.

$ mkdir myproject
$ cd myproject
$ git init

//Ouput -> Initialized empty Git repository in <<folder>>/myproject/.git/

Step 2 - Locate your Hooks folder & view the files

1. Cd into your '.git' folder and you should see the following list of folders.

1. Cd into the 'hooks' folder, you should see the following list of files:

1. All the files with the extension '.sample' mean that they are present as a sample and they will not be executed by default.

2. Each file is triggered at a particular event during the git life cycle. A code of '1', signifies an error, and the process is exited at that point and a code of '0' signifies that the process went through fine.

Step 3 - Install/Enable the Git hook you want to execute

To enable the hook, it is a simple as removing the extension of '.sample' from the file name. As soon as we do it, Git immediately will recognize that it should execute the file. In the above example, the file 'pre-commit.sample' is renamed to 'pre-commit'.

• Rename the file by removing the '.sample' extension.

$ mv pre-commit.sample pre-commit

• Change the permissions to make it executable

$ chmod +x pre-commit

Step 4 - Choose the language

The default files are written in shell-scripts. You can use any scripting language as long as it can be run as an executable. The supported languages are Bash, Python, Ruby, Perl, Rust, Swift & Go.

To choose the language of your choice, open up the file in your code editor and using the shebang (#!) sign indicate the language, so that, Git knows how to interpret the subsequent scripts.

For example:

To choose 'shell'

#!/bin/sh

To choose 'bash'

#!/bin/bash

Practical Examples

Check for a valid email before committing the code

It is very common for developers to have multiple Github accounts and one account could be linked to a personal email account and another one could be linked to the work email account.

Let us look at creating a 'pre-commit' Git Hook in order to ensure that any commits made by me are from the email Id 'skay@gmail.com'. (assuming this is the work email address)

Pre-Commit Git Hook

The pre-commit Git hook to check if the user committing the file has the user email address set to 'skay@gmail.com'.

#!/bin/sh

# Make sure the email is set properly before committing the file
useremail=$(git config user.email)

# Check if the git config useremail DOES NOT MATCH skay@gmail.com
if [ "$useremail" != "skay@gmail.com" ]
then
        cat <<\EOF

# OUTPUT THE ERROR ON THE TERMINAL
Error: user.email not set to "skay@gmail.com"
EOF

# EXIT WITH 1 INDICATES ERROR
        exit 1
fi

Things to Note:

When the user attempts to commit the file, the script will be run.

The following steps are what happens in the file:

• The first line '#!' signifies that the script is a shell script.
• Fetch the 'usermail' from git config user.email.
• Check if the 'useremail' does not match 'skay@gmail.com', then throw an error on the terminal.

Run the Commit to verify if the Git hook is invoked

Step 1

Go to the 'myproject' folder

$ cd myproject

Step 2

Create a new file

$ nano demo.txt

Step 3

Enter some text & save the file!

Step 4

Check the current user email set in git-config

Step 5

Git add & commit the file to the local repository.

$ git add demo.txt

$ git commit -m "Testing Pre-Commit Git Hook"

Step 6

If the Git 'pre-commit' Hook had fired correctly, then you should see the following error on the terminal, since the git config user email (skaytech30@gmail.com) does not match 'skay@gmail.com'.

Congratulations! You've just created your first Git Hook and run it successfully.

Git Pre-Push Hook

Another great example explained of a Pre-Push hook is explained superbly by my friend Simon in the tweet below.

Bypassing a Hook

A Git Hook can be easily bypassed or over-ridden by the flag '--no-verify'. In the above example, if you would like to exempt running the 'pre-commit' hook, then you would have to include the no-verify flag as shown below.

$ git commit -m "Testing Pre-Commit Git Hook" --no-verify

Version Control - Git Hooks

As you would have observed, Git hooks are local to any repository. A simple workaround for this could be to create a 'scripts' folder in the project repository to enable version control of git hook files, so that, they can be extended to be used by the whole team.

Conclusion

Adding Pre/Post Git Hooks is a simple way to ensure that there are checkpoints along the software development life cycle. In addition, hooks can be extended in any way to aid in repetitive testing that can be triggered upon specific file commits.

While it might take some time to set it up in the beginning, you would reap a lot of benefits, especially as the team grows.

If you would like to read further, here is a very good article by Atlassian on Git hooks.

I hope you enjoyed the article. Do let me know your feedback and comments about the article.

You will also enjoy the following articles:

• What is Event Loop in JavaScript?
• ES6-Arrow Functions
• Understanding Closures
• ES6-Destructuring
• A Basic Introduction to Webpack
• JS Design Patterns: Module & Revealing Module Pattern
• What is 'this' in JavaScript
• ES6-var, let & const
• History of ECMAScript
• Docker Fundamentals