DEV Community: Rajnish Katharotiya

Omit unwanted data from Object using JavaScript

Rajnish Katharotiya — Sun, 24 May 2020 11:24:29 +0000

Photo by S O C I A L . C U T on Unsplash

Remove particular data from an object is still an easy task to do. But guess you want to remove all data which not matched with your condition like an example, you want only positive values from the object and omit all negative once, how you'll do it?

Before going further, I would like to welcome you to a new episode of series call Javascript Useful Snippets. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes' articles please check it out here or else stay tuned till the end to learn something new 😋 .

Also check out my youtube channel for video tutorials : Subscribe me to support 🙏

How to Omit unwanted key-value pairs from the object?

Guess, you have an object which has values in the data type of number and string and you only want numbers. So, in cases like this you can use this custom javascript function called omitBy(). This javascript snippet will take two arguments first one will be your object and second will be your prediction (in our case value should be in number). And in result, it'll return an object with only number values with it's key. Let's take a look at the function:-

How omitBy() function works ?

const omitBy = (obj, fn) =>
  Object.keys(obj)
    .filter(k => !fn(obj[k], k))
    .reduce((acc, key) => ((acc[key] = obj[key]), acc), {});

Here In function, I've first created an array of all keys of an object by using Object.keys() method. Once I have a collection of keys, I've executed the filter method on the array to filter out keys that don't satisfy the given function. And by using a reduced method, I've created a new collection of all keys which returned after filter method execution. So, as output, we will have an object with all key-value pairs which didn't match without given function or except those value which matched with our function.

How to use omitBy() function ?

omitBy({ a: 1, b: '2', c: 3 }, x => typeof x !== 'number');  // Output :- { a: 1, c: 3 }

As we talked above, here I've passed one object which content string and number type of values and out of all we want only those pair which content number values. So, I've added function in the second argument which checks if type of x shouldn't be number. So, in return as we see we have objects with omitted pairs by a given function.

This, helped me a lot to optimize objects before passing down to trees in development. So, I thought to share it with you guys too. I hope you liked my explanation (if yes, hit like ❤️ button ) and if you found it informative then do follow from here because I'll learn and share every day.😋

Also follow/subscribe me on my social media account to connect with me : twitter, youtube

Best practice to handle input change requests with Google Custom Search

Rajnish Katharotiya — Wed, 13 May 2020 12:01:41 +0000

Photo by Bench Accounting on Unsplash

In many projects, we would have search input that returns a list (via any external APIs) of data related to the keyword you are entering into the input. so, what's your way to request continuous data from the same end-point?

Before going further, Let me introduce myself. I'm a javascript developer and learner. here, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes' articles please check it out here or else stay tuned till the end to learn something new 😋 .

Well, let's see one normal example to google search anything on input change. And display it into list below. ( in many cases we list out those items below input ) Here's I've given HTML and JS code with the result.

index.html

In HTML, I've just defined one input to take value from the user and passed it searchOnGoogle function. And defined one unordered list element to list out results after a query from the server. Also with that, I've imported Axios Library to make Http requests from the browser ( read more about it from here ).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <title>Best practice - search input</title>
</head>
<body>

    <input type="text" name="searchInput" placeholder="Google anything..." oninput="searchOnGoogle(this.value)">
    <ul id="result-list"></ul>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>

index.js

In Javascript, I've defined searchOnGoogle function to make requests on google search engine with the user's query. ( You read more about google search API form here ). Where, I've used Axios library to make https request via get method. And in response I've set all received items into our unordered result list element.

function searchOnGoogle(query) {

   const GoogleAPIKey = "YOUR_GOOGLE_API_KEY"
   const SearchEngine = "YOUR_SEARCH_ENGINE_KEY"

    const RequestURL = `https://www.googleapis.com/customsearch/v1?key=${GoogleAPIKey}&cx=${SearchEngine}`

    const ResultList = $("#result-list");
    ResultList.empty();
    // Make a request for a user with a given Query
    axios.get(`${RequestURL}&q=${query}`)
    .then(({ data = {} }) => {
        if(data.items){
            data.items.map(({ title }) => ResultList.append(`<li>${title}</li>`))
        }
    })
}

Result

Here, I've search a word with 9 characters from input and you can see network besides it which is triggering API calls on google search on each character input.

In the above scenario, guess user/ourselves type input like this!! -- which will crash our normal server and exceed limit for free google search. 🤷‍♂️

So, what's a better way to request data on input change?

index.js

Here is one solution, request cancellation ( abort controller for many other request handlers). With Axios, we can create cancel token and for individual request and pass it to it. So, whenever we want to cancel that request while it's in the pending state we need to just execute cancel token.

let cache = [];
const cancel = [];

function searchOnGoogle(query) {

   const GoogleAPIKey = "YOUR_GOOGLE_API_KEY"
   const SearchEngine = "YOUR_SEARCH_ENGINE_KEY"

    const RequestURL = `https://www.googleapis.com/customsearch/v1?key=${GoogleAPIKey}&cx=${SearchEngine}`

    // Check if current url is in cache and execute abort controller via respective cancel tolken 
    // Or else pushed into cache array for next requestes
        if (cache.indexOf(RequestURL) !== -1) {
            const controller = cancel.filter(i => i.url === RequestURL);
            controller.map(item => item.c());
        } else {
            cache.push(RequestURL);
        }

        const ResultList = $("#result-list");
        ResultList.empty();

        // Make a request for a user with a given Query 
        // Create and added cancel token to abort request anytime.
        const cancelToken = new axios.CancelToken(((c) => {
            cancel.push({ url: RequestURL, c });
        }));   
        axios.get(`${RequestURL}&q=${query}`, { cancelToken })
        .then(({ data = {} }) => {
            if(data.items){
                data.items.map(({ title }) => ResultList.append(`<li>${title}</li>`))
            }
        })
}

In our case, I've created to empty collection in global scope; where one is to store all request URLs ( as caching ) and another one is to store all cancel tokens with request URLs. And whenever, user change value in input function will first check if we have the same URL in a cache, find it's cancel controller from cancel collection and execute it ( in our case URL will be always same ) otherwise, just store it into a cache.

And before requesting results through Axios, I'm creating cancel token for upcoming requests and in callback stored it into our cancel collection for next request use. And passed cancelToken to it's option of get method as second argument. that's it! ( you can read more about in detail from here. )

Now, let's see a difference?

Did you figure it out right? As you see in-network when I was entering 9 characters, it requests each time on google search with updated queries but in this case as soon as a new request being made my all previous pending request canceled and stoped from hitting server unwantedly. So, your server will never know about those previous 8 requests.

RajnishKatharotiya / google-search-input

It's google custom search input, were I've tired to explain better way to handle request calling on change of input.

This was all about Axios request handler, but if you are using any other one - I'm sure it'll have an abort controller for the same. ( let me know in a comment if you find any difficulty for finding it )

I found it one of the better ways to handle search input requests. so, I thought to share it with you guys too. I hope you liked my explanation (if yes, hit like ❤️ button ) and if you found it informative then do follow from here because I'll learn and share every day.😋

Also follow/subscribe me on my social media account to connect with me :
👨‍💻 twitter,
👨‍💻 youtube

How to execute functions via pipeline?

Rajnish Katharotiya — Sat, 09 May 2020 10:50:52 +0000

Photo by Van Tay Media on Unsplash

Guess we have three functions, where one's result is being passed as second's input and so on. In this scenario how you will call all those functions? ( Share your thoughts on possible ways by commenting here 🤗 )

To call all functions in series or one by one, I've defined one simple function called pipe() which will take all functions as arguments in the same order of execution. And in return, it'll trigger left-to-right all functions in series by passing left one's result value to the right one's argument. Let me make it easy for you to explaining the snippet itself.

How pipe() function works ?

const pipe = (...fns) => fns.reduce((fn, g) => (...args) => g(fn(...args)));

As first, i've stored all functions arguments into array called fns by using spreading operator ( it's an concept of ES6 if you new to this word please check this first to learn in detail ) and in return i've called reduce method of array to execute every functions one by one and pass results one to another. And for same i've used again spreading operator to clone all results and passed it to current function. Let's use to know more it.

How to use pipe() function ?

const add = (x, y) => x + y
const square = (x) => x * x
const display = (x) => console.log(x)
const addNSquare = pipe(add, square, display);  

addNSquare(6,5)   // 121 in console

Here, I've first defined three functions to add a number, to square number, and just display number into the console. where I needed to pass add the result as a square argument and square result to display argument. So next, I've defined a new function using pipe function and passed all three functions as an argument in the same order of execution I want. Now, I can call addNSquare() function with two values and it'll do it's the best job by executing all three functions in the order I passed functions as arguments.

This snippet helped me to call multi functions in series at many scenarios, so, I thought to share it with you guys too. I hope you liked my explanation (if yes, hit like ❤️ button ) and if you found it informative then do follow from here because I'll learn and share every day.😋

Also follow/subscribe me on my social media account to connect with me : twitter, youtube

Call function only when a value passed validation in javascript

Rajnish Katharotiya — Wed, 06 May 2020 12:03:40 +0000

In the normal app, we always came across to function call only if one function returns positive or desired value. Yes? if yes, comment me on how you'd achieve it? 🤗

Before going further, I would like to welcome you to a new episode of series call Javascript Useful Snippets. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes articles please check it out here or else stay tuned till the end to learn something new 😋 .

I hope you have shared your answers in a comment. Well, mine is, I've defined one function called when(). This method will take two arguments one will be prediction function and another will be a function ( which needs to call after ).

How does this when() function works?

const when = (pred, whenTrue) => x => (pred(x) ? whenTrue(x) : x);

Here, as you see we have passed two arguments, prediction ( as pred ) and function ( as whenTrue ) in first arguments list. Before explaining further let me clerify one concept called carried function.

What is carried function?

It's a way to call multi-functions in one call. Let me provide one example, guess you want to add two numbers...

adding numbers:

const add = (a, b) => a + b;
add(3, 2) // 5

adding numbers in a carried way :

const add = a => (b => a+b);
const add3  = add(3)
add3(2) //5

which means we are simply calling a function inside a function or returning function inside function let's see a normal way of doing it is:

const add = function (a) {
  return function (b) {
    return a + b
  }
}

Now, you have an idea about carried function syntex ( feel free to comment if it's unclear ) you can see I've defined when as a carried function which means it'll pass when function call parameters as first arguments list and call of this function will be passed as second argument list ( explain more clearly in function usage section ) and return of function, I've called pred function with an argument x and checked if it's true then returning whenTrue(x) ( callback/after function ) otherwise x itself is returned. Let's use it with one example.

How to use When() function ?

const divideNumber = when(x => x % 2 === 0, x => x / 2);
divideNumber(4); // 2
divideNumber(3); // 3

So, here i've first difined one function by using when() to divide integer by two if it's dividable with two ( means it should return integer only after dividation ) and when i passed first value, it's returing value after divition it but in case of secound value it's returing same as output.

I found When() function useful to validate value before passing it to other functions. So, I thought to share it with you too. I hope you liked my explanation (if yes, hit like ❤️ button ) and if you found it informative then do follow from here because I'll learn and share every day.😋

Also follow/subscribe me on my social media account to connect with me : twitter, youtube

Select a nested value from the object in javascript

Rajnish Katharotiya — Fri, 01 May 2020 13:14:09 +0000

Selecting a nested value from an object is a common thing for any javascript application, and when you do deep nesting selection like (user.profile.address.city) it's risky and increases chances of throwing an exception if any one node is undefined which will terminate your process and break page with a white screen. So, what you'd for a solution? ( 🤠 please leave it in comment box ).

Before going further, I would like to welcome you to a new episode of series call Javascript Useful Snippets. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes articles please check it out here or else stay tuned till the end to learn something new 😋 .

Well, there are various ways to prevent exceptions, let me write some of popular once here:-

user && user.profile && user.profile.address && user.profile.address.
user?.profile?.address?.city

Maybe to deal with it, the most common way is the first one. But recently a new operator introduced to handle it in a better way is called operational Channing operator (?. - you can read it more on here ) So, this two can make it little easier to handle nesting selection. But I think I found one much better function to handle it. ( excited? 😀 - stay tuned if yes )

get(), this function has two types of argument one is an object of records, and the rest are strings (like this "profile.address.city") to selection from an object. So, in return, you will receive a collection of selected values.

How does this get() works?

const get = (obj, ...selectors) =>
  [...selectors].map(s =>
    s
      .replace(/\[([^\[\]]*)\]/g, '.$1.')
      .split('.')
      .filter(t => t !== '')
      .reduce((prev, cur) => prev && prev[cur], obj)
  );

As mentioned above, the first argument will be the object and rest argument I've stored into selectors with the use of spreading operator ( it's a concept to clone object/array - find out in more detail from here ) and stored it into an array. And in return of this function, I've used a map method to select the individual record and with that first, I've replaced regex match string with spinal tap case operator ( please find a detailed explanation from here ) then second used split method to divide sting from "." which will return an array of strings, so in the third step filtered all empty record form collection and in the last step, by using reduce method I'm selecting values from value until I reach to the last location. And using a double end operator (&&) to prevent exception like if I don't any result from the second step then it'll make it undefined from there and stop looking for further node.

How to use get() ?

const obj = { 
  profile : { user : { name: "xyz", surname: "abc" }}, 
  relations: [ { name: 'one' }, { name: 'two' } ] 
};
get(obj, 'profile.user.name', 'relations[0]', 'relations[2].name'); 
// ['xyz', { name: 'one' }, undefined]

So, as you see 2-4 arguments are differents selctors i've used here while 4th selector expect name from second indexed data of relations (relations[2]) whereas relation collection doesn't have second index at all with data so in result get function stop selection of name and just throw undefined without error.

I found this function very useful while selecting from deep nested object especially with uncertain nodes in the object. So, I thought to share it with you too. I hope you liked my explanation (if yes, hit like ❤️ button ) and if you found it informative then do follow from here because I'll learn and share every day.😋

Also follow/subscribe me on my social media account to connect with me : twitter, youtube

Pick desired key-value pair from an object

Rajnish Katharotiya — Tue, 28 Apr 2020 12:12:27 +0000

It's very common that in development we needed only a few key-value pairs from an object and still, we use the whole object or we create a new one with copy-pasting key-values from one to another. What's your solution to it?

What if you can just have those key-value pair which you needed without doing the above-mentioned things! Well, I've defined one function for it called pick(). This function takes two arguments where the first one will object (which we are filtering) and second will be a collection of key names which we want to extract from a given object. As a result, it'll return only those pairs with key names you passed.

How do this pick() works?

const pick = (obj, arr) =>
  arr.reduce((acc, record) => (record in obj && (acc[record] = obj[record]), acc), {});

As mentioned above it'll take two arguments as parameters and call reduce method ( reduce method can be used to eliminate unwanted records or create a new type of data with some operations, you can read about it more from here ) on the collection we passed as second params, inside reduce method - I've first validated if given key includes into an object then store it into acc object as key and assigned value after selecting it from a given object. So, in return, you will have an object of key-value pairs of keys you provided form your provided object. Let's pass some values and try it ourselves...

How to use pick() ?

pick({ a: '1', b: '2', c: '3' }, ['a', 'c']);   // { 'a': 1, 'c': 3 }
pick({ a: 1, b: '2', c: 3 }, ['x', 'c']);   // { 'c': 3 }

In the first call, I've passed an object with a collection of a key that includes inside objects and received relative pairs to those keys in a result object. While in next call I've passed "x" ( knowingly to check function capability) so, in return I've received only those pair which includes the inside object. That means, with this function you can easily extract your desired pair from an object in no time and if any key doesn't exist then it'll skip without any exceptions.

At many places in a single app, we won't need the whole objects still we pass to child-to-child without filtering it (especially in technology like react.js) which can affect our app performance. I think this can help you in with that, so I shared it with you here. I hope you liked my explanation (if yes, hit like ❤️ button ) and if you found it informative then do follow from here because I'll learn and share every day.😋

Also follow/subscribe me on my social media account to connect with me : twitter, youtube

Fetch query data from URL using javascript

Rajnish Katharotiya — Mon, 27 Apr 2020 14:47:38 +0000

Photo by Tim van der Kuip on Unsplash

Have you ever used the URL's query parameter into a page? I'm sure most of us did, share me in a comment how'd you done it.

Before going ahead, I would like to welcome you to a new episode of series call Javascript Useful Snippets. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes articles please check it out here or else stay tuned till the end to learn something new 😋 .

Getting query parameters from URL is not a hard job but if you are writing it all again-n-again then it's bad practice. So in solution, I defined one global function into an app called getUrlParams(). This function takes URL and in output, returns object with key-value pair of parameters ( data of URL ) if any consist into URL else returns an empty object.

What is inside getUrlParams() ?

const getUrlParams = url => {
  const paramsData = url.match(/([^?=&]+)(=([^&]*))/g) || []        // [ "key=value", "key2=value2"]

  return paramsData.reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );
}

In function first, I used regex (/([^?=&]+)(=([^&]*))/g) to get an array of data with match() method of string ( this method will create a collection of records which match with given string - in our case, it's the regex for key=value formatted data) and stored into one constant with fallback value as [].

Next, By using the reduced method on an extracted collection of data I've created an object with key-value pair. To do that, inside of reduce I'm first finding an index of "=" into each record and from 0 to founded index string; I stored it as key, and after the founded index data; I stored it as the value of that key. In last just returned the whole function's output as a result of this function.

How to use getUrlParams() ?

getUrlParams('http://dev.to/page?name=Rajnish&surname=Katharotiya'); // {name: 'Rajnish', surname: 'Katharotiya'}
getUrlParams('dev.to'); // {}

As you have seen, with the first URL input it's returning an object with key-value pair of provided data into the path whereas the next given empty object because location path doesn't have any params present in it.

This function becomes very useful for me wherever I need to extract data from URL just pass it to this and in return, I'll get the organized object without hurdle 😀. So, I thought to share it with you guys too. I hope you liked my explanation ( if yes, please hit like ❤️ button ) and if you learned something new or found informative then hit the follow button too from here to stay updated with me as I'm learning & sharing every day something useful. 😋

Also follow/subscribe me on my social media account to connect with me : twitter, youtube

Extract data from document using javascript

Rajnish Katharotiya — Sun, 26 Apr 2020 12:25:38 +0000

Photo by Amy Hirschi on Unsplash

Have you ever tried to typed data from the image for creating an excel sheet? Yes, How'd you done that?

Before going further welcomes you all to read this blog, I usually write articles about short-codes and some useful javascript functions. These functions can help you to make your code faster and efficient. So, if you haven't read the previous article please check it out from here otherwise stay tuned till the end to learn something new 😀

When I faced the same situation*(mentioned in the quote above)* a few days ago, I tried to look alternatives and found word called OCR (optical character recognition - it is a technology that involves reading text from paper and translating the images into a form that the computer can manipulate) then I looked more about integration with javascript and found one easy/shortest way to implement. which I'll share here.

I hope you have little idea about nodejs and NPM. let's dive in.

First, we need to create an empty directory and initialize npm from root directory like below:

npm init

Once it's done, create one empty file called app.js for now.

So, to make this thing possible I've used some libraries which are:

1. Express.js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. you can read more from here

Install express by following command

npm install express --save

2. fs

The fs module provides an API for interacting with the file system, it comes with nodejs installation so no need to install individually to use. you can read more in detail from here

3. multer

Multer is a node.js middleware for handling multipart/form-data, which will be used here to upload a file into our app directory. you can read more in detail from here

Install multer by following command

npm install multer --save

4. tesseract.js

This library plays the main role to build this module because tesseract is a javascript library of popular one of
OCR engine called a tesseract. This provides any type of data from images and more, you can read about more on here

Install tesseract.js by following command

npm install tesseract.js

That's it we are pretty much set up now, let's do some code to make the operation successful 😎. I hope you have an app.js file created into your root directory.

Creating a view for file upload

Before that, we need a view too. to get a file from a user via file input. So, create one index.ejs the file inside /views directory. (EJS is a simple templating language that lets you generate HTML markup with plain JavaScript) and write code as follow:-

<!DOCTYPE html>
<html>
    <head>
        <title>OCR Demo</title>
    </head>
    <body>
        <h1>Image to PDF</h1>
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <input type="file" name="avatar" />
            <input type="submit" name="submit" />
        </form>
    </body>
</html>

Write code for document extraction

app.js

1. Import all dependencies

const express = require('express');
const app = express();
const fs = require('fs');
const multer = require('multer');
const { createWorker } = require('tesseract.js');

2. Initialize tesseract worker and setup logger to monitor the process

const worker = createWorker({
    logger: m => console.log(m)
});

3. Setup uploader using multer to upload all files into `/uploads` directory.

// Setup storage options to upload file inside upload directoty
const storage = multer.diskStorage({    
    destination: (req, file, cd) => {
        cd(null, './uploads')
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname)
    }
});

// Intailized upload with storage options
const upload = multer({ storage }).single('avatar');

4. Setup view engine to support ejs files render on view and render index.ejs on default route ('/').

app.set("view engine", "ejs");
app.get('/', (req, res) => res.render('index'))

5. Setup upload method, to handle all requests after submitting click from our view.

// Defined API for handle all requests comes on /upload route (or from index's submit btn click)
app.post('/upload', (req, res) => {

    // Stored file into upload directory
    upload(req, res, err => {

        // Reading uploaded file from upload directory
        fs.readFile(`./uploads/${req.file.originalname}`, (err, data) => {

            // Displaying error if anything goes wrong 
            if(err) return console.error("this is error", err);

             // Self execution function to use async await 
              (async () => {
                // Tesseract worker loaded with langague option
                await worker.load();
                await worker.loadLanguage('eng');
                await worker.initialize('eng');

                // Document extraction by recognize method of Tesseract and console result
                const { data: { text } } = await worker.recognize(data);
                console.log(text);

                // Used getPDF method to genrate pdf and stored it into app directory by using writeFileSync method
                const { data : pdfData } = await worker.getPDF('Tesseract OCR Result');
                fs.writeFileSync(`${req.file.originalname}.pdf`, Buffer.from(pdfData));
                console.log(`Generate PDF: ${req.file.originalname}.pdf`);

                // Respond send to view with result text and terminated worker after porcess complete
                res.send(text)
                await worker.terminate();
              })();
        })
    })
})

Please read comments in code to understand more about it

6. Define port and initialize the app by using listen() method.

const PORT = 5000;
app.listen(PORT, () => console.log("App is running on", PORT))

Start the app and extract data from a document

From root directory start your app by the following command:

node index.js

Now, open http://localhost:5000/ to use your own OCR app. Once you upload and submit your file you will get a result in few seconds till then you can check your terminal to see processing logs. ( if you want a more specific type of extraction then there are many more functionalities provided by tesseract like extract data from a particular region, multi-language support.)

Full source code is here.

This solution really worked for me, it's not very accurate for low-quality images though. So, I thought to share it with you too. I hope you understood my explanation ( if yes, please hit like ❤️ button ) and you learned something new or found informative then hit the follow button too from here. Because I'm sharing every day something useful. 😋

Also follow/subscribe me on my social media account to connect with me : twitter, youtube

Remember frequent input for faster execution of a function in javascript

Rajnish Katharotiya — Thu, 23 Apr 2020 11:48:58 +0000

Photo by JESHOOTS.COM on Unsplash

In every project, we encounter anyone function which will be using frequently into the app or which have the possibility of the same input again-n-again. So, shouldn't we do something to prevent execution if give input already passed before? What you'll do it? ( please comment me down below, will love to get more solutions 😊 ).

Before moving forward, let me welcome you in a new episode of series called Javascript Useful Snippets, In this series, I'm sharing shortcodes and useful javascript functions which can help you to make your code more efficient and neat. So, if you haven't read previous articles please check it out here otherwise stay tuned till the end to learn something new 🤩.

Let's start with a very simple example, assume we have a function to get square of a given number. And we are passing random numbers from 1-10. and number 3 is passed through function five times for execution where on first execution the only system had found out that for input 3 output will be 9 still it'll execution square function and user have to wait unnecessarily four times of execution.

In this situation, we can use a function called memoize(), this function will remember input and respective output once it's passed through execution. so, we can save time. Now, let me show you what it does:-

const memoize = fn => {
  const cache = new Map();
  const cached = (val) => {
    return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
  };
  cached.cache = cache;
  return cached;
};

So, here in function, i've created first empty object(cache) through map ( new Map() is a constructor to create object to store key-value pair data, you can read it more on here ) and in next i've created another function called cached, which is using cache object to first validate if given input is stored into it and or not, if yes, return it direct from thier otherwise will execute function and set into cache with output of it. In last, it's just returning cached object with result value.

Let's look it with an example:

  const stringOne = "Hello World";
  const stringTwo = "😎";

  const byteSize = str => new Blob([str]).size;
  const memoziedByteSize = memoize(byteSize)

  var t0 = performance.now();
  memoziedByteSize(stringOne)
  memoziedByteSize(stringTwo)
  var t1 = performance.now();
  console.log("First time took " + (t1 - t0) + " milliseconds.");

  var t2 = performance.now();
  memoziedByteSize(stringOne)
  memoziedByteSize(stringTwo)
  var t3 = performance.now();
  console.log("Second time took " + (t3 - t2) + " milliseconds.");

In the above example, I've used function to get a byte size of a given string. So first created two string constants and declared byteSize function. Next stored memorized function in new constant(memoziedByteSize) after wrapping operational function with memorize function.

Next is the execution part, for monitor processing time I've used a function called performance.now() ( it'll return current time, you can read about from here ) before and after the execution and console difference between them. And that same process I've done twice with the same input stings. Let's see what console look like:-

  First time took 1.0550000006332994 milliseconds.
  Second time took 0.005000001692678779 milliseconds.

Wow, clearly we can see difference right? So, this one was just a simple execution to get byteSize. but think if it could have complex process then how much time it can save. ( for me I had very complex execution and it'd work ). This snippet work for me like a charm so, I thought to share it with you too. I hope you liked it ( if yes, hit like ❤️ button ) and I hope you learned something new. if yes? hit follow to learn every day something new.😅

check video tutorial on:

import files without deep nesting relative path in next.js

Rajnish Katharotiya — Tue, 21 Apr 2020 13:50:31 +0000

Photo by ThisisEngineering RAEng on Unsplash

Well best practices say, you should have widget, utility and shared components individually defined in your app. No hard to do it, but it is a hurdle to import sometimes.

At the beginning, let me explain what I mean by deep nesting relative path in next.js? Assume as defined best practices ( it's standard defined by an expert to make code neater and organized ), we have the following file structure.

As we see, I've defined helper.js inside the utility folder. Now, I have a component inside
/components/widgets/priceTag.js which looks like this :

import React from 'react'
import { toCurrency } from '../../../utils/helper'

const priceTag = ({ text }) => (
  <p className="price-tag">
    {toCurrency(text, 'USD', 'en-us')}
  </p>
)
export default priceTag

Here, I needed to convert a number into USD currency format with a dollar sign before it. So, I've used toCurrancy which defined into the helper file. ( wonder, how I did it? check this out to know ) and in order to import it I've used relative path here ( like this ../../.../utils/helper ) so, it's it too much to write ?? ( i feel it 😅)

What's better way for it ?

well, here module resolver comes in picture. we will basically create an alias name for pointing directory with help of babel config, after implementation of it. we can write out the import statement just like this:

import { toCurrency } from '@utils/helper'

isn't it cool 😎 ?

How to implement it?

We need to Install babel-plugin-module-resolver library first as follow.

npm install babel-plugin-module-resolver --save-dev

Now Add .babelrc file in the root directory if you haven't ( Note- NextJS does not need .babelrc by default. It uses “next/babel” preset to transpile. so, you need to add it as preset. )

Here is how my .babelrc looks like now :

{
  "presets": ["next/babel"],
  "plugins": [
    [
        "module-resolver",
        {
            "root": ["."],
            "alias": {
                "@utils": "./utils",   // will connect to all utiliy related functions
                "@components": "./components",  // to all defined components
                "@widgets": "./components/widgets",  //  to all defined widget components
                "@redux": "./redux",  //  redux related files like-  actions, reducers
            }
        }
    ]
  ]
}

I've defined few here as examples but you can add more as you like. and then you can start importing modules using this alias.

So, I was using this technique many times but I saw one project where importing was defined in the relative path and I had to update it. So, it triggered me to share it with you too. I hope this was helpful to you too. ( if yes, hit like ❤️ button now ). With that, see you soon with something new so stay tuned and hit follow too. 😋

Convert numbers to desired currency format in javascript

Rajnish Katharotiya — Mon, 20 Apr 2020 14:14:22 +0000

Photo by Geronimo Giqueaux on Unsplash

While building a global eCommerce site we need to take care of price presentation in all possible currency, how you would covert 12345678 string to $12,345,678.00 (USD) or ₹12,345,678.00 (INR)? 🧐

Before forging ahead, I would like to welcome you in a new episode of series call Javascript Useful Snippets. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes articles please check it out here or else stay tuned till the end to learn something new 😋 .

Now, Guess we have some numbers and want to show it in US/UK/EU currency in our view. toCurrency() function is good for the job, well this function will take Number, Currency Code, Langauge Code (if you want to convert it into any particular language) as parameter's arguments and return your desired currency. Now, Let me share you a snippet now:-

const toCurrency = (number, currency, language = undefined) =>
  Intl.NumberFormat(language, { style: 'currency', currency: currency }).format(number);

As I mentioned, I've taken number, currency, and language ( set it undefined as default ) and in return, I've used Intl.NumberFormat to format-number (for your info - this function has a verity of facility and format to convert number read more on). Here, as the first argument, I've passed language if given or else undefined. and in the second argument passed an object with different options. For currency, I've passed 'currency' as the style and currency code as currency. And once initialize has done I've used format method and gave a number to it.

how to use toCurrency() function?

toCurrency(123456.789, 'EUR'); // €123,456.79  | currency: Euro | language: Local
toCurrency(123456.789, 'USD', 'en-us'); // $123,456.79  | currency: US Dollar | language: English (United States)
toCurrency(123456.789, 'USD', 'fa'); // ۱۲۳٬۴۵۶٫۷۹ ؜$ | currency: US Dollar | language: Farsi
toCurrency(322342436423.2435, 'JPY'); // ¥322,342,436,423 | currency: Japanese Yen | language: Local
toCurrency(322342436423.2435, 'JPY', 'fi'); // 322 342 436 423 ¥ | currency: Japanese Yen | language: Finnish

As you see, in the first result I've not sent any language so it set as a local language. Then on the third result, I've passed 'fa'(for Farsi) it converted into Farsi language. And with that, if you see in all results, output contained symbol respective to a given code because we set currency as a style in our function's option. Same as that, there is a bunch of more options available to modify your NumberObject ( you can check it from here )

I wanted to present the number in different currency formats, at first I tried third-party libraries. But then I found this amazing function which turned into a snippet for my app. And it's really working like charm. So, I thought to share it with you guys too. I hope you liked ( if yes, hit like ❤️ button ) it and you learn something new. If yes, hit follow to learn something new every day 😅.

Pause function execution for a certain time in javascript

Rajnish Katharotiya — Sun, 19 Apr 2020 15:06:33 +0000

Photo by NESA by Makers on Unsplash

Pausing function till one process ends is can be archive in various ways, well for some scenario what if we want to just pause our function for time or I say rest it a little while. how would you do it? 🤔

On the move, I would like to welcome you in a new episode of Javascript Useful Snippets where I'll share some shortcodes and function which will help you to make your code much efficient and neat. So, if you haven't read my previous episodes (articles) please check it out here or else stay tuned till the end to learn something new 😋 .

Are you familiar with word Promise? If you are not, I recommend the following post to check. ( see you in a bit 🤗 )

⭐️🎀 JavaScript Visualized: Promises & Async/Await

Lydia Hallie ・ Apr 14 '20

#javascript #node #webdev

Now, I hope you know about the promises. so you'd figured out a way to make the process the waiting until one is not done. But guess you need to pause execution for a certain amount of time by just passing that certain time when you don't have any particular other processes dependent in that function, at those times this pause() function will work like charm.

The function needs just time(ms) as parameter argument and in return, it will hold execution for that given a time period. Let me share you a snippet now:-



const pause = ms => new Promise(resolve => setTimeout(resolve, ms));

Inside a function, I created Promise as mentioned in the above blog ( i hope you have read it ). and just used resolve callback as setTimeout (is a method to delay function for a time) callback and passed time as the second argument of it. So, resolve will trigger after that given amount of time.

How to use pause() function?



async function work() {
  console.log("Pausing execution for 1 second");
  await pause(1000);
  console.log('Resuming execution');
}

Need to create async function, and put pause in await when we call it. So, here i've passed 1000ms inside pause function which will hold execution for one second, as soon as we get success response from our promise it'll move to next execution.

Here, if anything goes wrong with the function we have put in await then further execution will be auto terminated so be careful to use. ( you can use try .... catch block in such cases ).

I was making animation and wanted to add a delay in transition, so I was using setTimeout repeatedly and there I figured to have a function like this to hold my execution for a certain time without hurdles. So, I thought to share it with you too. I hope you learned something, if yes, hit the follow button to learn every day 😅

DEV Community: Rajnish Katharotiya

Omit unwanted data from Object using JavaScript

How to Omit unwanted key-value pairs from the object?

How omitBy() function works ?

How to use omitBy() function ?

Best practice to handle input change requests with Google Custom Search

index.html

index.js

Result

So, what's a better way to request data on input change?

index.js

Now, let's see a difference?

RajnishKatharotiya / google-search-input

It's google custom search input, were I've tired to explain better way to handle request calling on change of input.

How to execute functions via pipeline?

How pipe() function works ?

How to use pipe() function ?

Call function only when a value passed validation in javascript

How does this when() function works?

What is carried function?

adding numbers:

adding numbers in a carried way :

How to use When() function ?

Select a nested value from the object in javascript

How does this get() works?

How to use get() ?

Pick desired key-value pair from an object

How do this pick() works?

How to use pick() ?

Fetch query data from URL using javascript

What is inside getUrlParams() ?

How to use getUrlParams() ?

Extract data from document using javascript

So, to make this thing possible I've used some libraries which are:

1. Express.js

Install express by following command

2. fs

3. multer

Install multer by following command

4. tesseract.js

Install tesseract.js by following command

Creating a view for file upload

Write code for document extraction

app.js

1. Import all dependencies

2. Initialize tesseract worker and setup logger to monitor the process

3. Setup uploader using multer to upload all files into /uploads directory.

4. Setup view engine to support ejs files render on view and render index.ejs on default route ('/').

5. Setup upload method, to handle all requests after submitting click from our view.

6. Define port and initialize the app by using listen() method.

Start the app and extract data from a document

Remember frequent input for faster execution of a function in javascript

Let's look it with an example:

import files without deep nesting relative path in next.js

What's better way for it ?

How to implement it?

Convert numbers to desired currency format in javascript

how to use toCurrency() function?

Pause function execution for a certain time in javascript

⭐️🎀 JavaScript Visualized: Promises & Async/Await

Lydia Hallie ・ Apr 14 '20

How to use pause() function?

3. Setup uploader using multer to upload all files into `/uploads` directory.