DEV Community: The Ghost Dev

Higher Order Functions - What, Why, & Where

The Ghost Dev — Fri, 30 Apr 2021 22:34:17 +0000

What are Higher Order Functions

In simple terms, any function that accepts another function as an argument and/or returns a function as result.

Why use Higher Order Functions

Higher order functions are extensively used in the Javascript language.

Two main areas where it helps is code size reduction and code re-usability. In short, it makes your code more declarative. The fact that we can take one function and put it into another function allows us to compose a lot of smaller functions into bigger functions.

Chances are that, you've already used higher order functions in your code without realising. Haven't you already used Array methods like sort, map & filter atleast once in your code? These are higher order functions.

Now enough theory, let's see some practical examples in the next section.

Where to use Higher Order Functions

Let's create a function which will return woof every time it runs:

function dog() {
 console.log('woof');
}

Now we have this function called dog. So whenever we call dog, we will get woof in the console.

We can always pass in one function to another function as an argument and that can be invoked to complete a particular action. Let's see this example:

function dog(callback) {
 console.log('woof');
 callback();
}

Now whenever we run this function dog, it will first output woof to the console and then will invoke logic of whatever function is being passed as an argument.

Though in this case, dog function will return an error if we don't pass any function as argument.

Uncaught TypeError: callback is not a function
    at dog (<anonymous>:3:2)
    at <anonymous>:1:1

We can easily fix this by modifying our code:

function dog(callback) {
 console.log('woof');
 if (callback) {
   return callback();
 }
}

We have now converted the above function from First-Order Function to Higher Order Function by allowing it to accept another function as an argument.

To check this further, we will add another function:

function cat() {
 console.log('meow');
}

The above function is same as function dog but return value is different. Now we will pass in the above function to the dog function as an argument, and the dog function will run this as callback function.

dog(cat);
// console will return woof
// console will return meow

Above example satisfies one logic where we passed in a function as an argument to another function. Now let's see how we can return a function from another function.

So let's create a function that multiplies two numbers passed in as arguments:

  function multiply(x, factor) {
     return num1 * factor;
  }

Now we want to create different functions which takes a number and multiplies by different factors. Let's see this example:

  function multiply(factor) {
     return function(x){
       return x * factor;
     }
  }

So multiply function now returns a new function that uses the factor that was passed in.

We can now do this:

 let double = multiply(2);
 let triple = multiply(3);

We now have two different functions, which can be used to multiply any number with 2 or 3. Let's see how:

 double(3); // will return 6
 triple(3); // will return 9

So we have learnt how we can create and use Higher Order Functions. Now we will see some examples of higher order functions using different Array methods in Javascript.

An example of array method map as Higher Order Function:

const myArray = [1, 2, 3, 4, 5]
const doubleIt = num => num * 2;

myArray.map(value => doubleIt(value)) // returns [2, 4, 6, 8, 10]

In the above example, we can see that function map iterates through myArray and returns another function doubleIt with value from myArray in each iteration.

An example of array method filter as Higher Order Function:

 let pets = [
  {
    name: 'Max', kind: 'dog',
  },
  {
    name: 'Shiro', kind: 'dog',
  },
  {
    name: 'romeo', kind: 'cat',
  },
  {
    name: 'niki', kind: 'cat',
  },
]

let cats = pets.filter(function(pet){ return pet.kind === 'cat'}) 

console.log(cats) // returns [{name: 'romeo', kind: 'cat'}, {name: 'niki', kind: 'cat'}]

let dogs = pets.filter(function(pet){ return pet.kind === 'dog'})

console.log(dogs) // returns [{name: 'Max', kind: 'dog'}, {name: 'Shiro', kind: 'dog'}]

In the above example, filter returns a new array with data returned by an anonymous function.

Using Array methods like map, filter, reduce will improve your code readability and quality.

From now on whenever you notice a pattern where either a function is being passed as an argument or a function is being returned from a function, you will know you are dealing with higher order functions.

Thanks for reading and hope you have learned something from this post.

You can follow me on Twitter and feel free to drop me any suggestion or just to say Hi!

MERN URL Shortener App - Part 2

The Ghost Dev — Tue, 07 Jul 2020 20:10:29 +0000

In this multi-part tutorial, we will work together to build an URL Shortener app (basic version of bitly) using React, NodeJS, Express and MongoDB. This will be basically a full-stack application build with MERN stack.

We will be learning Context API, Hooks, Express router, and building a Custom API With JWT Authentication.

On our first part, we successfully installed all modules and completed setup of our Express and MongoDB. Currently we have our Express server running and connected to our MongoDB Atlas database.

In this part, we will setup Mongoose model for URL, and Express routers for generating short URL from long URL and successful redirection.

Let's jump in then...

Step 4 - Setting up Mongoose model for MongoDB

Mongoose models are database schema constructors. Models are responsible for creating and reading documents from the underlying MongoDB database.

Though this is a very small app, but to keep scalability in mind, we will structure the application as such that all the similar config files are stacked together in separate directories.

So let's create a directory models in our root directory, and inside that models directory create a file Url.js. This file will store the database schema which we will use to read and modify data from the database specific to only urls.

Let's setup our URL schema by editing the Url.js file:

const mongoose = require('mongoose');

const UrlSchema = new mongoose.Schema({
  urlCode: {
    type: String,
  },
  longUrl: {
    type: String,
    required: true,
  },
  shortUrl: {
    type: String,
    required: true,
  },
  date: {
    type: String,
    default: Date.now,
  },
});

module.exports = mongoose.model('url', UrlSchema);

To explain the above code:

We are calling mongoose module in the mongoose variable.
Creating a new variable UrlSchema which is constructing a new Mongoose schema.
We are adding all the fields or tables inside this schema:
- urlcode: This field will store the short id for the url
- longUrl: This field will store the actual URL sent by client
- shortUrl: This field will store the shorten URL generated by our application
- data: This field will store the date and time when the url is generated
Then we are exporting this model using module.exports = mongoose.model('url', UrlSchema);. Here url is our database collection name, which will be created automatically on first request to the database.

Step 5 - Setting up Express routes

To keep consistency on our application workflow, We will now create a new directory routes in our root directory and inside that a file genurl.js for configuring our Express routes.

Before we get onto our routes, we need to setup our Base URL in our config file, which is default.json inside the config directory.

{
  "mongouri": "mongodb+srv://priyajit:indiatimes@cluster0.bb04n.mongodb.net/urlshortner?retryWrites=true&w=majority",
  "baseURI": "http://localhost:5000"
}

Note: The Base URL will be the main URL of the short URL that we will be generating. In our case, we are using our default Node URL as our Base URL, but in production this needs to be replaced with an actual URL (i.e https://bit.ly/)

We can now edit the route file genUrl.js and create our first route.

First we will bring in all our required modules:

const express = require('express');
const router = express.Router();
const validUrl = require('valid-url');
const shortid = require('shortid');
const config = require('config');

then we will bring in the Mongoose model for Url:

const Url = require('../model/Url');

Now we will setup our route, which will be a POST request and this route will be accessible to all.

First, we will create a POST function to get the data from client-end.

router.post('/', async (request, response) => {
  // We will handle the requested data here

});

module.exports = router;

Inside the above function, we will do all our data handling. First, we will destructure and fetch the URL sent from client-end.

const { longUrl } = request.body;

Then, we will get our Base URL and will validate the same using our valid-url module, to check if the base URL is an FQDN:

const baseUrl = config.get('baseURI');

if (!validUrl.isUri(baseUrl)) {
  return res.status(401).json('Invalid base url');
}

We will now generate a short code, which along with the Base URL will identify the long URL and will redirect to it.

const urlCode = shortid.generate();

now we will validate the long URL sent from client-end. If it validates we will generate and store the short URL to the database, and if it doesn't then we will return an error.

if (validUrl.isUri(longUrl)) {
  // We will generate short URL here

} else {
  res.status(401).json('Invalid Long Url');
}

We will now generate short URL inside the above conditional statement. The steps will be:
1. we will first check if the long URL sent from client-end already exists in our database.
2. if it does exist, we will get the short URL from the database and will send it back as a response.
3. if it doesn't exist, we will create a variable shortUrl and store the new short URL, by concatenating our Base URL and our short code.
4. then we will use our Mongoose Url model and store all the required data to our database, and then we will send the short URL as a response back to the client-end.

This is how we can achieve all of the above steps:

try {
      let url = await Url.findOne({ longUrl });

      if (url) {
        res.json(url);
      } else {
        const shortUrl = baseUrl + '/' + urlCode;

        url = new Url({
          longUrl,
          shortUrl,
          urlCode,
          date: new Date(),
        });

        await url.save();

        res.json(url);
      }
    } catch (err) {
      console.error(err.message);
      res.status(500).json('Server Error');
    }

Note: As I am using Async/Await to deal with Promises, I have used Try/catch block. You can of course use .then() and .catch(), if you want to.

As route is now in place, we can edit our server.js file to call this route whenever an HTTP POST request is sent to http://localhost:5000/api/genurl

Let's edit our server.js file now to call the above route.

app.use('/api/genurl', require('./routes/genurl'));

Step 6 - Testing with Postman

Add http://localhost:5000/api/genurl/ as URL and set the request type to POST

Add Content-Type to application/json in Headers

Add the URL you want inside Body as json object, where key will be longUrl and value is an URL that you want to shorten.

et voilà - you get everything as json response.

But shortUrl will not load the longUrl just now, because we haven't added any route for that.

Step 7 - ShortURL to LongURL Redirection

Let's set that up now. And for that, we need to edit our server.js file to include below line to add our route first.

app.use('/', require('./routes/redirect'));

This will return an error as we haven't created our route file yet

Now create redirect.js file in our routes directory and add the following:

const express = require('express');
const router = express.Router();
const Url = require('../model/Url');

router.get('/:code', async (req, res) => {
  try {
    const url = await Url.findOne({ urlCode: req.params.code });

    if (url) {
      return res.redirect(url.longUrl);
    } else {
      return res.status(404).json('No Url found');
    }
  } catch (err) {
    console.error(err.message);
    res.status(500).json('Server Error');
  }
});

module.exports = router;

Now let's iterate over what are we doing with the above codes:

First, we are calling in Express and initializing router
then we are calling in our Mongoose Url model
next we are creating a GET function with :code as our parameter, which will have the urlCode sent from shortUrl
now, in a Try/Catch block we are requesting complete URL data where urlCode in our database url collection matches the sent urlCode.
then in a conditional block, if urlCode matches, we will fetch the longUrl and will redirect to it, and if not, we will send an error as a response, that No Url found.
and if any error happens while connecting to the database or fetching from the database, we will send a Server error as a response.

We are now all set and can copy hit the shortUrl in a browser and it will redirect to it's longUrl.

In the next part, we will setup React and build a frontend to generate short URL from long Url.

Follow me on Twitter and feel free to drop me any suggestion or just to say Hi!

MERN URL Shortener App - Part 1

The Ghost Dev — Mon, 06 Jul 2020 21:06:24 +0000

We will be learning Context API, Hooks, Express router, and building a Custom API With JWT Authentication.

Prerequisites: You should know JavaScript pretty well, including ES6 (Arrow functions, promises, etc) and basic understanding/knowledge of React, Node & Express.

Let's jump in then...

Step 1 - Modules Installation

Initializing package.json for backend:

Run npm init and add all the details as per your choice.

Install the required backend Modules:

express - NodeJS application framework
express-validator - It is an Express middleware to validate input form fields
mongoose - a MongoDB client
config - this makes a lot easier to deal with NodeJS config files
shortid - short non-sequential url-friendly unique id generator
valid-url - This module collects common URI validation routines to make input validation
bcryptjs - This is useful for generating and verifying hash password
jswebtoken - This generates a token useful for validating logged in user
nodemon - tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

npm i express express-validator mongoose config shortid valid-url bcryptjs jsonwebtoken

npm i -D nodemon

To setup nodemon, we need to edit package.json file, and replace test script as below:

"scripts": {
    "start": "npm server",
    "dev": "nodemon server"
  }

Note: If you've selected all the default. options while initializing NPM, then you've probably set index.js as your main file. But in this tutorial we will be using server.js as our main file, so you can replace index.js with server.js by replacing it in the above package.json file. Change the below part:

"main": "index.js",

"main": "server.js",

Step 2 - Express setup

In the root directory, create a file server.js. This will be our main file for the backend.

Let's configure Express on our server.js file:

const express = require('express'); // Loading Express module

// Initialize Express
const app = express();

// Initialize JSON body parser
app.use(express.json());

// Add Express Port
const PORT = process.env.port || 5000;

// Returns response (for testing)
app.use('/', (request, response) => response.send('Hello'));

// Start Express
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

We can now start Express:

On our Terminal, while in the url-shortener directory, run npm start dev. This will now start Express.

But to test it, we need an HTTP API testing tool, like Postman.

In the above screenshot, on Postman, I have added my path http"//localhost:5000/ as GET request. Now when I hit send, it returned the text Hello in the body, that we have set on our server.js.

Step 3 - MongoDB setup

Create a config directory in root directory, and inside that create a file db.js and default.json.

Create a database on MongoDB Atlas here.

You can follow this step-by-step guide for easily creating your account and getting the connection string which will be required in the next step for connecting to the database.

We now need to add the MongoDB URI, that you copied from Atlas to our config file. Let's open our default.json file that we created on the above step, and paste the MongoDB URI as below:

{
  "mongouri": "mongodb+srv://priyajit:<password>@cluster0.bb04n.mongodb.net/<dbname>?retryWrites=true&w=majority"
}

Replace with your Atlas account password, and with your database name that you have created on Atlas.

Now open db.js file, which is our MongoDB configuration file. Let's set it up:

const mongoose = require('mongoose'); // Loading Mongoose module
const config = require('config'); // Loading config module

const db = config.get('mongouri'); // Fetching MongoDB URL from config.json

// Function to Connect MongoDB
const connectDB = async () => {
  try {
    await mongoose.connect(db, {
      useNewUrlParser: true,
      useCreateIndex: true,
      useFindAndModify: false,
      useUnifiedTopology: true,
    });

    console.log('Database Connected Successfully...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connected; // Exporting module so that we can import it on server.js

We now have to call the function to connect database on our server.js file. We can add the function just below where we are initializing express.

// Initialize Express
const app = express();

// Connect Database
const connectDB = require('./config/db');
connectDB();

Now you can run Express and connect to your database by running npm run dev on your terminal. If all goes well, you should see this:

We have now successfully set up Express that is connected with MongoDB Atlas database.

In the next part, we will setup our Express routes and database models.

Follow me on Twitter and feel free to drop me any suggestion or just to say Hi!