Forem: Deepak Kumar

An overview to functions in JS

Deepak Kumar — Mon, 21 Feb 2022 17:07:43 +0000

Functions are one of the basic concepts in programming. As the name suggests, it performs a function. A function is a block of code that you can use whenever you need and wherever you need to avoid repeated code blocks. Once a function is written, it can be used over and over again. They usually take some input, perform some operations on it and produce some output.

In this article, we will learn about functions in JavaScript, different ways of defining functions, how hoisting and function scope works and a few more concepts regarding functions.

The function declaration

Functions are defined, or declared, with the function keyword. The declaration begins with the function keyword, followed by the name of the function then set of parentheses, which can be used for optional parameters. The code of the function is contained in curly braces.

function nameOfFunctionGoesHere (parameters) {
  // Things that you need to do goes here

  return "Something that you need to return";
}

For example, If you are building a simple application which return multiplication of two numbers that is it will take two integers as input and return the product as output.

function product(numberOne, numberTwo) {
  return numberOne * numberTwo;
}

The name of the function can be anything, and it follows the same rules as declaring variables. It's a best practice to tell what the function is doing by giving the function name a verb as a prefix. The function should perform only one task and have a single responsibility.

Function Parameters

Parameters are input that gets passed into functions as names and behave as local variables. A function can have multiple parameters or no parameters at all.

Let us assume you declared a parameter but forgot to pass an argument to it, so in that case your parameter would be undefined which is the default behaviour.

Return statement

A JavaScript function can have an return statement but it is completely optional and is only required if you want to return a value from a function.

The return statement should be last in a function as it stops the execution of a function and returns a value from that function. A function always returns a value, If the return value is not specified then undefined is returned.

Function expression & calling a function

A function expression looks similar to function declarations, except for the fact that function is assigned to a variable name.

const product = function (numberOne, numberTwo) {
  return numberOne * numberTwo;
}

// calling a function
product(10,20);      //output : 200

Hoisting

Hoisting can be thought up as how execution contexts work in JavaScript. It means variable and function declarations are moved to the top of scope before execution which allows you to use a function before you declare it in your code.

Function declarations are hoisted but function expressions are not.

Functions defined in a function declaration are hoisted, which means that you can use the function although it's defined below the code using it. Hoisted functions are made available everywhere within the current scope.

For example

//function is invoked before the declaration
product(10,20);  //output : 200

function product(numberOne, numberTwo){
  return numberOne * numberTwo;
}

As opposed to function declarations, function expressions are not hoisted and can therefore not be used before they're defined.

For example

product(10,20);  //output : TypeError: sum is not a function

var product = function (numberOne, numberTwo){
  return numberOne * numberTwo;
}

Immediately Invoked Functions

Functions that are executed as soon as they are declared,
are known as Immediately Invoked Function Expressions or IIFEs. IIFEs follows a particular syntax as shown below.

(function (){ 
// code to be executed
})();

Here are few important things about IIFEs:-

The variable within the expression can not be accessed from outside it.
IIFEs are very useful because they don’t pollute the global object, and they are a simple way to isolate variables declarations.
While creating a bunch of variables and functions in the global scope that no one uses outside your code, just wrap all of that in an IIFE and your code will continue to work, but now you are not polluting the global scope.

Arrow functions

Arrow functions are mainly syntactic sugar for defining function expressions. These allows us to write functions in a much shorter syntax and is one of the most popular features of ES6. We can now create more concise, cleaner, and more readable functions by using the => operator.

The syntax is as follows

()=>{ /*code to be executed*/ }

Let's rewrite the product function that we wrote using arrow functions:-


//Normal function
function product(numberOne, numberTwo) {
  return numberOne * numberTwo;
}

//arrow function
const product = (numberOne, numberTwo) => numberOne * numberTwo

The primary use case of arrow functions is for functions that get applied over and over again to items in a list.
For example, if you have an array of values that you want to transform using a map, an arrow function is ideal.

const numberArray= [10, 20, 30, 40, 50];
const squareOfNumbers = numberArray.map(item => item*item);

console.log(squareOfNumbers);
// output : [100, 400, 900, 1600, 2500]

Some important things to remember about arrow functions:-

Just like function expressions, arrow functions aren't hoisted — only function declarations are.
Arrow functions cannot be named & they lexically bind the current this value. That means The treatment of this within an arrow function is different than within non-arrow function expressions.

There are a few more ways we can define functions, which aren't discussed in this article. The decision of which declaration type to choose depends on the situation.

Scope of function

When a variable is declared inside a function, it can be accessed only within that function and is not visible outside of the function.
For example:-

function printName(){
  var name = "Deepak";  //function scope
  console.log(name);
}

 printName();   // output : Deepak
 console.log(name);   // output : name is not defined

Lexical scope

When a function is defined in another function then in that case the inner function has access to the outer function’s variables.
This behavior is called lexical scoping. However, the opposite is not true that is outer function does not have access to the inner function’s variables.

function name() {
  var userName = 'Deepak';

  function age() {
    var age = 23;
    console.log(`${userName} is ${age} years old.`);                
    //output : Deepak is 23 years old.
  }

  console.log(age) //output : Error, age is not defined
}

So in this case when we access userName variable in age(), it works. But accessing the same age variable outside age() function throws an error.

Conclusion

So we learned what are functions, how to call them, the difference between parameters and arguments, different ways we can define functions, how hoisting and function scope works in JavaScript. And I hope you got a nice idea about functions in JavaScript.

That's it for now do connect with me on LinkedIn , Github ..

Creating your own NPM package

Deepak Kumar — Sat, 19 Feb 2022 19:50:04 +0000

What is a npm package

NPM stands for Node package manager which is a software registry for Open source software where users can publish packages for public and private uses alike.

Managing packages inside a npm package

A npm package is normally a basic application which uses other packages to manage and use basic functionalities. But in normal case scenario we use yarn or npm to install these packages but while creating a npm package we need a global way to store and manage packages across the entire project. So for this I used LERNA, the official documentation for lerna can be found here.

This is the basic folder structure for managing lerna projects

The folder has following dependencies :-

cli (Managing the command line interface)
local-API (The back-end API built upon express)
local-client (The UI interface uses React, redux and bulma for styling)

Let us first look at CLI

For CLI, I used a package called commander in which you write code to describe your command line interface. Commander looks after parsing the arguments into options and command-arguments, displays usage errors for problems, and implements a help system for unrecognized options it displays an error.

The official documentation to commander can be found Here.

The commander takes in a command and some options, in this case the command is serve and option is a port number where this program runs which by default is 4005.

const serveCommand = new Command()
  .command('serve [filename]')
  .description('Open a file for editing')
  .option('-p --port <number>', 'port to run server on', '4005')
  .action(async (filename = 'notebook.js', options: { port: string }) => {
    try {
      const dir = path.join(process.cwd(), path.dirname(filename));
      await serve(
        parseInt(options.port),
        path.basename(filename),
        dir,
        !isProduction
      );
      console.log(
        `Opened ${filename}. Navigate to http://localhost:${options.port} to edit the file.`
      );
    } catch (error: any) {
      if (error.code === 'EADDRINUSE') {
        console.error('Port is already in use please try another port');
      } else {
        console.log(error.message);
      }
      process.exit(1);
    }
  });

Besides this the following dependencies are also used in the cli package

In the local api directory, all the routes are defined, it basically has two routes:-

A get route to /cells (This endpoint returns the existing cell data from the notebook file)

router.get('/cells', async (req, res) => {
    try {
      const result = await fs.readFile(fullPath, { encoding: 'utf-8' });
      res.send(JSON.parse(result));
    } catch (error: any) {
      if (error.code === 'ENOENT') {
        await fs.writeFile(fullPath, '[]', 'utf-8');
        res.send([]);
      } else {
        throw error;
      }
    }
  });

At first we are trying to read the existing contents of the file using the file system(fs) inbuilt module and since the data is in JSON format we are parsing it and sending it back.

Wrapping the entire code in a try-catch block makes it easier to send errors rather than crashing the app.

A post route to /cells (This endpoint sends the existing cell data to be saved into notebook file)

router.post('/cells', async (req, res) => {
    const { cells }: { cells: Cell[] } = req.body;
    await fs.writeFile(fullPath, JSON.stringify(cells), 'utf-8');
    res.send({ status: 'ok' });
  });

Similarly in the post route we are getting the data from the client converting it into a JSON string and writing it back using the same file system(fs) module.

You can find more about FS modules here.

Finally comes the client module which is built using React, redux, typescript, bulma and monaco editor.

For this the main challenges were:-

Building a markdown editor
Building a solution for writing & compiling code online in the browser itself.
Building a bundler for compilation.

For the markdown editor I ended up using @uiw/react-md-editor.

import { useState, useEffect, useRef } from 'react';
import MDEditor from '@uiw/react-md-editor';
import './css/text-editor.css';
import { Cell } from '../state';
import { useActions } from '../hooks/use-actions';

interface TextEditorProps {
  cell: Cell;
}

const TextEditor: React.FC<TextEditorProps> = ({ cell }) => {
  const [editing, setEditing] = useState(false);
  const ref = useRef<HTMLDivElement | null>(null);
  const { updateCell } = useActions();

  useEffect(() => {
    const listener = (event: MouseEvent) => {
      if (
        ref.current &&
        event.target &&
        ref.current.contains(event.target as Node)
      )
        return;
      setEditing(false);
    };

    document.addEventListener('click', listener, { capture: true });

    return () => {
      document.removeEventListener('click', listener, { capture: true });
    };
  }, []);

  if (editing) {
    return (
      <div className="text-editor" ref={ref}>
        <MDEditor
          value={cell.content}
          onChange={(v) => updateCell(cell.id, v || '')}
        />
      </div>
    );
  }

  return (
    <div className="text-editor card" onClick={() => setEditing(true)}>
      <div className="card-content">
        <MDEditor.Markdown source={cell.content || 'Click to edit'} />
      </div>
    </div>
  );
};

export default TextEditor;

To read more about @uiw/react-md-editor you can go here.

Now for writing and compiling code online I needed a code editor which looks and feels like VS-Code and so ended up using monaco editor which is created by microsoft itself and powers VS code also.

This is the configuration i used for my editor component:-

<MonacoEditor
  editorDidMount={onEditorMount}
  value={initialValue}
  height="100%"
  language="javascript"
  theme="dark"
  options={{
    wordWrap: 'on',
    matchBrackets: 'always',
    minimap: { enabled: false },
    showUnused: false,
    folding: false,
    lineNumbersMinChars: 3,
    fontSize: 18,
    scrollBeyondLastLine: false,
    automaticLayout: true,
  }}
/>

Now after creating the editor there were 2 more issues:-

The code was not formatted properly.
And there were some highlighting issues.

To fix code formatting i created a button which calls the prettier package to format code.

 const onFormatClick = () => {
    const unFormatted = editorRef.current.getModel().getValue();
    const formatted = prettier
      .format(unFormatted, {
        parser: 'babel',
        plugins: [parser],
        useTabs: false,
        semi: true,
        singleQuote: true,
      })
      .replace(/\n$/, '');

    editorRef.current.setValue(formatted);
  };

<button onClick={onFormatClick}>
  Format
</button>

Then for code highlightiong i used jscodeshift and monaco-jsx-highlighterand created a mount component which ran when editor mounted:-

 const onEditorMount: EditorDidMount = (getValue, monacoEditor) => {
    editorRef.current = monacoEditor;
    monacoEditor.onDidChangeModelContent(() => {
      onChange(getValue());
    });

    monacoEditor.getModel()?.updateOptions({ tabSize: 2 });

    const highlighter = new Highlighter(
      // @ts-ignore
      window.monaco,
      codeshift,
      monacoEditor
    );
    highlighter.highLightOnDidChangeModelContent(
      () => {},
      () => {},
      undefined,
      () => {}
    );
  };

Then comes the most important part The bundler:-

For bundling, the basic use-case is we need to get the code, compile it and then show the output. Now what if an user imports some packages from npm registry?
For that reason we would need a bundler and in my case i used unpkg and created a bundler service.


import * as esbuild from 'esbuild-wasm';
import { fetchPlugin } from './plugins/fetch-plugin';
import { unpkgPathPlugin } from './plugins/unpkg-path-plugin';

let service: esbuild.Service;
const bundle = async (rawCode: string) => {
  if (!service) {
    service = await esbuild.startService({
      worker: true,
      wasmURL: 'https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm',
    });
  }

  try {
    const result = await service.build({
      entryPoints: ['index.js'],
      bundle: true,
      write: false,
      plugins: [unpkgPathPlugin(), fetchPlugin(rawCode)],
      define: {
        'process.env.NODE_ENV': '"production"',
        global: 'window',
      },
      jsxFactory: '_React.createElement',
      jsxFragment: '_React.Fragment',
    });

    return { code: result.outputFiles[0].text, err: '' };
  } catch (err) {
    return { code: '', err: (err as Error).message };
  }
};

export default bundle;

Putting it all together

After this its time to deploy it to npm registry, now for that we would need to create a npm account which is pretty much straight forward and can be easily done by going to npm website and signing up.

Now we need to make some changes in our package.json file.

We need to add the main, types(if its a typescript file) and license (mostly MIT for OSS)

Now add the publishConfig to be public or private and the entry folder from where npm serves.

That's it you are good to go...
Here is the entire source code for the project.

Do check it out and leave a star..

React performance

Deepak Kumar — Sun, 13 Feb 2022 12:57:32 +0000

Sometimes because of poor interface design or slow operations, there is a perceptible pause in the smooth rendering of a software application's user interface. To deliver a buttery-smooth UI performance the react performance should be optimized. React is an extensible, and declarative open-source JavaScript library used for building easy, fast, and scalable front-ends. This makes the processes easier for developing web applications. React can be part of an app that feels slow because of app start, animation, and scroll performance. A performance problem is mainly related to unnecessary rendering.

Common sources of performance problems:

Using console-log statements.
Running in development mode.
When a lot of work is done on the JavaScript thread at the same time, there is a dropping of JS thread FPS.
Moving view on the screen that may be scrolling, translating, rotating, also drops UI thread FPS.
Slow navigator transitions.
Animating the size of an image drops UI thread FPS.
Javascript FPS plunges when re-rendering a view that changes hardly.

To solve performance issues and to enhance the overall app's performance, functions, applications, here are some simple steps to be followed for React Performance Optimization:

To reduce Re-rendering – Use React Pure Component

Pure components are built into React Top-Level API and is similar to react components. The only difference is that if render() function renders the same result given the same props and state, we can use React.PureComponent for a performance boost in some cases.

import React from ‘react’;

export default class Test extends React.PureComponent{
   render(){
      return <h1>Hello world</h1>;
   }
}

For component memoization – Use React memo

React memo is a higher order component. If the component renders the same result given the same props, we can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

import { memo } from "react";

const Todos = ({ todos }) => (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );

export default memo(Todos);

For External Resources – Use CDNs.

CDN stands for content delivery network which is a great way to deliver static content from your website to your audience more quickly and efficiently.

We can cache our content on a CDN so that it’s delivered from the edge to your end-users much faster than if it had to be delivered all the way from the origin. If you use a CDN, it means that if someone tries to access content from your website, then that person’s request for content only needs to travel to a nearby POP and back, not all the way to the company’s origin servers and back.

For Iteration – Use a Unique Key.

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

To avoid Further Tag – Use React Fragments.

React.fragment lets you group a list of children without adding an extra tag or node.

import React from "react";

const Test = () => (
    <React.Fragment>
      <h1>Hello world</h2>
      <p>Lorem ipsum dolor met...</p>
    </React.Fragment>
)

For Animation – Use CSS Animation.

Animations are inevitable for a fluid and pleasurable user experience. There are many ways to implement web animations.

To add "one-shot" transitions, like toggling UI elements state.
For smaller, self-contained states for UI elements. For example showing a tooltip or adding a hovering effect for the menu item, etc.

Don’t use Inline Function Definition.

Since functions are objects in JavaScript ({} !== {}), the inline function will always fail the prop diff when React does a diff check. Also, an arrow function will create a new instance of the function on each render if it's used in a JSX property.

Instead of defining the inline function for props, you can define the arrow function.

Modify gzip compression on the webserver.

Gzip compression allows the web server to provide a smaller file size, which means your website loads faster. The reason gzip works so well is because JavaScript, CSS, and HTML files use a lot of repeated text with lots of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70%, shortening your website’s first render time.

Throttling and Debouncing Events.

Throttling

It means delaying function execution. So instead of executing the event handler/function immediately, you’ll be adding a few milliseconds of delay when an event is triggered. This can be used when implementing infinite scrolling, for example. Rather than fetching the next result set as the user is scrolling, you can delay the XHR call.

Another good example of this is Ajax-based instant search. You might not want to hit the server for every key press, so it’s better to throttle until the input field is dormant for a few milliseconds.

Throttling can be implemented a number of ways. You can throttle by the number of events triggered or by the delay event handler being executed.

Debouncing

Unlike throttling, debouncing is a technique to prevent the event trigger from being fired too often. If you are using lodash, you can wrap the function you want to call in lodash’s debounce function

Need to Avoid Async Requests in componentWillMount().

componentWillMount() is only called once and before the initial render. Since this method is called before render(), our component will not have access to the refs and DOM element.

The follwoing is a bad approach:-

function componentWillMount() {
  const {data} = axios.get(`/api/users`)
  const users = data;
  setUsers(users);
}

This is an optimized version of above:-

function componentDidMount() {
  const {data} = axios.get(`/api/users`)
  const users = data;
  setUsers(users);
}

Immutable Data Structures for Components.

Data immutability, which comes from the functional programming world, can be applied to the design of front-end apps. It can have many benefits, such as:

Zero side-effects.
Immutable data objects are simpler to create and use.
Helps prevent temporal coupling.
Easier to track changes.

Some other techniques that one can use are:-

Maintain state colocation.
For the components create Error Boundaries.
Data Derivation should not be done in a Render technique.
Using Lazy Loading of React Components.
Using the shouldComponentUpdate() Life Cycle Event.
Optimize Conditional Rendering in React.

React is used by various massive corporations like Amazon, Microsoft, Facebook, etc for a lot of their Public-Facing Apps. Thus for a smooth functioning and enhanced performance of apps, these optimization steps of React Performance are extremely needed.

Week 5 : API's and stuff....

Deepak Kumar — Wed, 09 Dec 2020 13:53:35 +0000

It is already my week 5 in Full stack camp which focuses on helping students to grow their technical skills. Here is what I learned in week 4.

What was I doing wrong till now☹️☹️

Earlier when I was starting to learn to code as everyone alike I started with C programming Language, but left it midway and moved to C++ and funny part is even left that midway and moved on to another language....

So basically I became Jack of all and Master of none..😅😅
That's the biggest mistake, before starting something first make sure that will it be relevant to what you are doing now or what you are gonna do in the future and above all if you are even interested in doing it, because if you are not you are gonna leave things midway and move on.

The main focus should be go slow and steady and finish the race and not run fast and stop midway...

What did I do this week🤨🤨

This week I learnt about API stands for Application Programming Interface.. Basically it is an interface to allow two applications to talk to each other.

I learned about fetching data from an External API and displaying it in my app...

Yes yes I also built a mini project using Lorem picsum api, which generates random images every time there is a network call(using form submission, on clicks or simply reloading pages)

Creating the app

At first we would need a state variable for storing the image that is returned by the api and two more state variables for keeping the loading states and error states.

  const [image, setImage] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

Now we would need to write a function to fetch the image from the picsum api and store the result in a state variable that we created:-

 const fetchImage = () => {
    setLoading(true);
    setError(null);
    fetch("https://picsum.photos/500").then(
      (result) => {
        setLoading(false);
        setImage(result.url);
      },
      (err) => {
        setLoading(false);
        setError(err);
      }
    );
  };

This uses the native fetch method to hit the picsum api endpoint which in turn returns the url.
Before starting the request we are setting the loading state to true so as to tell the application that we are doing something now.After fetching the result we would set loading state to false and set the image url in the image state variable that we created by using setImage(result.url).

Besides this we can also use async await syntax to do the same thing:-

const fetchImage = async () = >{
  setLoading (true);

  try {
    const result = await fetch ("https://picsum.photos/500");
    setImage (result.url);
  } catch (err) {
    setError (err);
  }
  setLoading(false);
};

Now we need to call this function only when the component initially loads, so for this we would use the useEffect() hook.

 useEffect(() => {
    fetchImage();
  }, []);

Here the empty dependency array means call the function only when component loads initially.

Now we would create a component to use the following variable and show some content

  <div className="App">
      {error ? (
        <h3>Failed to fetch</h3>
      ) : loading ? (
        <Loader />
      ) : (
        <ImageDisplay image={image} />
      )}
      <br />
      <Button variant="outline-primary" className="mt-2" onClick={fetchImage}>
        Get Image
      </Button>
    </div>

Here is the github repo and if you want to try it out Go Here..

That's it do connect with me on LinkedIn , Github ..

Keep doing and keep learning🔥🔥..

Week 4 of React....

Deepak Kumar — Wed, 02 Dec 2020 13:38:15 +0000

Hey everyone, Just started with a mentorship programme at Frontbench.
Currently its week 4 of learning and we have already built a mini project and working on our portfolio.

For the first mini project I made a stopwatch using React and got to learn some concepts like State , conditional rendering and Event handlers. Its still not perfect and need some little changes.

Here is the link give it a try and this is the GitHub repo.

Currently I am working on my portfolio website which would also be made using React and I have completed my home page but it still needs a little refactoring as suggested by Sagar. Planning to finish the portfolio by this week.

Finally would like to thank Deepak and Sagar for giving us this oppurtunity to learn by doing and become a better software developer.

Do follow me on LinkedIn for more updates.