Forem: Mukul Singhal

Deep Flatten an Array

Mukul Singhal — Mon, 15 Nov 2021 20:13:21 +0000

Hello all👋,

In this series we will see a lot of question that are asked in javascript interviews so get ready for it

In this article we will see How to flatten an deeply nested array for example

[1,[2,3,[4,5]]] and convert in into [1,2,3,4,5]

We will learn to flatten an array in 2 ways

Using built in function (flat())
Using recursion

1. Using Flat() method in Javascript

The flat() method is an inbuilt array method that flattens a given array into a newly created one-dimensional array. It concatenates all the elements of the given multidimensional array, and flats upto the specified depth.

var newArr = arr.flat(depth)

By default, the depth limit is 1. It can be 1 to Infinity.



const arr = [1,[2,3,[4,5]]];

  // Setting the depth value to
  // Infinity to deep flatten the array
  const flattened = arr.flat(Infinity);

  console.log(flattened)

  // Output [1,2,3,4,5]

2. Recursively flat an array (Pollyfill)

Now we will see how do it without using any builtin function or basically writing the pollyfill for flat function



//Flatten an array using recursion

const arr = [1,[2,3,[4,5]]]

const flatten = (input)=>{
    let result = []

    if(!Array.isArray(input)) {
        return input;
    }

    for(let data of input) {
        result = result.concat(flatten(data))
    }

    return result
}


console.log(flatten(arr))

// Output [1,2,3,4,5]

Let me explain the code

Iterate through each and every value of an array and check whether it is value or an array using Array.isArray() method.
If it is a value return it and concat it.
If it is an array then follow again from step 1.

Using ES6 features (using reduce())



function flatten(arr) {

    return arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? flatten(cur) : cur), []);

};

const arr = [1,[2,3,[4,5]]];

const flattened = flatten(arr);

console.log(flattened);

// Output [1,2,3,4,5]

For better understanding of the code Please refer to the gif below.
You can also check this Github repo for the code

Voila😃
Let me know your thoughts about it 😃 and if you like it share it with others.

How to test Your API inside VSCODE

Mukul Singhal — Fri, 07 May 2021 11:19:59 +0000

Hey All 👋 .

Recently I got to know about a VS Code extension called Thunder Client⚡⚡ which can be used to test our API inside VS Code.
How Cool 😎 is that to test our API in the editor that we use all the time.

Thunder Client is a GUI-based Rest Api HTTPS client and has a very clean UI and easy-to-use interface.

One of the key highlights of this extension is Scriptless Testing

As we need to write a lot of boilerplate code in Postman and other clients to do basic testing using scripting like status code equal 200. In Thunder client, there is a GUI-based test where we can select a couple of dropdowns to do most standard tests very easily without any scripting knowledge.
As you can see in the image below

🖥 How to install

First of all open your VS Code and Click on extensions on the sidebar and install thunder client.

now you will see a icon on side bar

Lets test Thunder client a little bit

for testing you can create your own API or you can use

https://gorest.co.in/

and get your authentication token and you are good to go.

below you can see Thunder Client in action in Below GIF

GET request

POST request in which we create a GUI based Test

Now you can play around thunder client a little more.

Let me know your thoughts about it 😃and if you like it share it with others.

Must Know Trick for all the developers out there

Mukul Singhal — Wed, 05 May 2021 20:13:29 +0000

Hey All 👋, In this article I will show you a trick that will help all the developers out there.

Many times we see a GitHub repository and want to work with it or want to add few minor changes to it and see how it works but for this, we clone the repository on our pc and start using it but we can simplify this process with a neat trick.

Steps

Just went to the repository you want to use.

https://github.com/Mukul-Singhal/Flick

Put box after the gitHub in the url like this.

https://githubbox.com/Mukul-Singhal/Flick

Press enter.

Voila 😁 now it opens in the code sandbox and you can use this repository in the codesandbox and make changes in it.

Write ES6 in Node using Babel

Mukul Singhal — Sat, 27 Mar 2021 17:55:12 +0000

Hi all 👋

In this short article, Today we will be learning about How to use ES6 syntax(like import from, export default, etc..) with NodeJs.

To use these ES6 syntaxes in node we will use Babel. Now You are thinking what the heck is babel??

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.

To understand what is babel and how to set it up I am taking a very simple example. You can use this setup for any NodeJs application(eg. for backend servers)

Prerequisites

Must have Nodejs installed on your pc.
an editor of your choice. I prefer VSCode

Let's start with the setup

First of all, create a folder
or
on terminal write these command

$ mkdir node_babel

$ cd node_babel

Getting Started

In this blog, we will create a very simple add function(sum.js) and export it in the main function(index.js)

To initialize the project

$ npm init

this will create a package.json file for you

Now create two files sum.js and index.js

$ touch sum.js index.js

Install required Dependencies

Now we will install babel and its dependencies.

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

--save-dev as it is a development dependency

Folder Structure

Let's understand about the following packages

@babel/cli :- It is a built-in CLI that can be used to compile files from the command line.
@babel/node :- babel-node is a CLI that works exactly the same as the Node.js CLI, with the added benefit of compiling with Babel presets and plugins before running it.
@babel/preset-env :- babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

Now also install nodemon as a development dependency

$ npm i --save-dev nodemon

After all these steps our package.json file looks like this

Now create a file .babelrc and put the following code in it.



{
  "presets": [
    "@babel/preset-env"
  ]
}

Now create an add function in sum.js file and default export that function



//sum.js

function add(a, b) { 
  return a + b;
}

export default add; // ES6 export

Now in index.js import the add function and call it with the arguments



//index.js

import add from "./sum"; //ES6 import

console.log(add(3, 4)); //This should print 7 in the console

To run this code using babel we have to add a start script in the package.json file



 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec node_modules/.bin/babel-node index.js"
  }

Now on the command line run the following command

$ npm start

in console, you will get this

Voilà 😃. Now if you have come to the end Congratulations you completed the NodeJs + Babel Setup

I hope you find this blog useful. Do let me know your thoughts.