DEV Community: Nand Kishor

DeepClone an object using javascript

Nand Kishor — Wed, 29 Sep 2021 19:57:42 +0000

Hi there 🙌

Thanks for showing the love and support on the last post. In this article we'll see how we can create a deep clone of an object using javascript.

Let's to this

Here we are taking this test object and we have to create a copy of this object where the following conditions should be working:

output - deep clone object where assertion input === output false i.e test obj === clone obj //false
If we'll change any value in test object then it should not affect the cloned object.

// write a function to deep clone an object

let test = {
  past: [{day: 31}, {month: 12}, {year: 2020}],
  present: [{day: 1}, {month: 1}, {year: 2021}]
}

We'll solve this problem using recursive function and reduce out bigger problem into smaller chunks.


let test = {
  past: [{day: 31}, {month: 12}, {year: 2020}],
  present: [{day: 1}, {month: 1}, {year: 2021}]
}

const deepClone = (input) => {
    let result = {};

    // logic here

    return result;
}

console.log(deepClone(test))

So here we'll iterate over each key in the object that's why we'll use for in loop. Learn more

for (let key in input){
    result[key] = deepClone(input[key])
}

Using this we'll get the following output where we have only empty objects and value is not passed to the each key.

// output
[
  past: [ [ day: [] ], [ month: [] ], [ year: [] ] ],
  present: [ [ day: [] ], [ month: [] ], [ year: [] ] ]
]

To get each and every value we have to check whether an input is object or not! If input is not a type of object we'll just return the input value.

 if (typeof input !== 'object'){
    return input
  }

After applying the above condition we just reached our output and just need the data in exact format. As of now we have the following output.

[
  past: [ [ day: 31 ], [ month: 12 ], [ year: 2020 ] ],
  present: [ [ day: 1 ], [ month: 1 ], [ year: 2021 ] ]
]

To fix this we have to check the type of the input and if it's an array then we'll assign results as an empty array else an object.

let result = Array.isArray(input) ? [] : {}

So, here we're finally done with the code implementation of deep cloning an object using recursive approach in javascript. Hope this solution help you understand the basics.

Now have your hands on the code playground.

There are endless amounts of useful resources out there, so if you have any recommendations, let everyone know in the comments. I would love to add a few more bookmarks myself.

Thank you so much for reading and recommend me some topics you like to read about. 🙌

Flatten an array using javascript

Nand Kishor — Tue, 07 Sep 2021 08:26:26 +0000

Hello Everyone 👋
Thanks for showing the love on the previous post. Today, let's talk about how you can flatten an array using javascript.

Taking a test array:

const arr = [1,2,3,[4,5,[6,7],[8,9,10,[11, NaN, undefined]]]]

now we have to flatten all the elements of this array into a single array so that our output will look like this:

result = [1,2,3,4,5,6,7,8,9,10,11, NaN, undefined]

Starting with a function name i.e, flattenArray that's going to take test array as a parameter.

//function statement

const flattenArray = (input) => {

//initializing the result array

let result = []

//returning the output

return result;
}

//calling the function with test array as argument

flattenarray(arr)

First step we are going to iterate over each element of the array and concatenate each element in the result array. For that we have to run a for loop:

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array. (learn more)

//this loop will iterate over each element in the array

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

We're passing each element to the concat function as this is a recursive function. So when our function input becomes a single element then this function will return an error i.e, input is not iterable hence we have to apply another check condition.

//if the input is not an array this will just return the value

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

Now our code is ready to be execute. Here we're dividing our problem into smaller problem and using recursive function to achieve our final output.

Final Code

const arr = [1,2,3,[4,5,[6,7],[8,9,10,[11, NaN, undefined]]]]

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

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

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

  return result;
}

console.log(flattenArray(arr));

Don't just read this article instead have some hands on Live Demo

Stay tuned for upcoming articles ⚡️

DevOps-ify | Creating a CI/CD pipeline using GitHub Actions

Nand Kishor — Sun, 07 Mar 2021 08:50:08 +0000

As a developer, you'd like to automate the process as much as possible of repetitive tasks. If you have no idea what terms like Continous Integration and Continous Delivery means then after reading this full article you can easily automate your own project and create some hell out of it.

Overview of what you'll learn📘💡

what is GitHub Action
how GitHub actions works
the workflow, CI/CD Pipeline
hands-on demo
you can explore and experiment with different use cases of GitHub actions

What is GitHub Actions?

Actions, the events that take place in our GitHub repository like pushes, pull requests, releases, etc. are used as triggers to kick-off the workflows. These workflows are coded in YAML format.

If there's an error in the code the server build will fail automatically notify the developers about the issues integrating into their changes.

What is CI/CD?

CI/CD is a way of developing software in which you’re able to release updates at any time in a sustainable way. When changing code is routine, development cycles are more frequent, meaningful and faster.

Workflow Config file

Creating the workflow file:

The config file is the workflow of the events (step by step) and you can add steps according to your production environment.

You can create this workflow config file in your root project folder like .github/workflows/actions.yml

The actions.yml file contains the workflow and published by the community, which is reusable for you.

Here's the workflow config file for automating the process of deploying your web app to your firebase hosting which I use mostly. Here FIREBASE-TOKEN is the secret key that you add to your repo manually.

name: Firebase CD

on:
  push:
    branches: [master]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - uses: w9jds/firebase-action@master
      with:
        args: deploy --only hosting
      env: 
        FIREBASE_TOKEN: ${{secrets.FIREBASE_TOKEN}}

These above-given steps are the combination of:

Shell commands
actions - an external action Actions Marketplace
Jobs - what actually executes, and you can name it anything

These all are the key parts of the workflow. For better understanding, you can have a look at this image given below (Pic Courtesy - Semaphore).

Benefits 👍

If anyhow the build fails the bad product will not be delivered to your customers and it indicates there's an issue that needs to be addressed.
GitHub already has a long list of workflows so you don't need to write each one from scratch.
Fast CI/CD for any OS, any language, and any cloud.
Improves the code quality by detecting the small problems early before they become a major disaster.

That's the advantage of using GitHub Actions 🌟

References:

If you want me to write a detailed article on creating pipelines step by step using GitHub actions, do comment. Stay tuned for upcoming articles ✌️