DEV Community: Suvadeep Majumdar

Object, cyclic or not?

Suvadeep Majumdar — Fri, 06 May 2022 15:10:39 +0000

This post is about creating a utility function to check whether an object is cyclic or not. I faced this question, in one of my previous interviews.

Firstly lets understand what "Cyclic Object" means.
A cyclic object is like any other object, but it has some property that references to any of its predecessors.
Suppose the object flow goes like this:

a -> b -> c -> d -> e

So a,b,c,d are predecessors to "e". If e is assigned any of these to itself, the object will become a cyclic object.

My Solution

First initialize a variable with empty array. Lets name it "refArr". It will store references for all encountered objects. Also we will keep a flag named "isCyclicFlag" that will store true if object is cyclic and false otherwise. I have taken both these variables as global, if you want you can pass them through, as parameters to the function.
We will then go recursively through the object and find whether the property is of type object.
If so, check whether the current property's value is present in the "refArr".
1. If yes, that would mean it is referencing to any of its predecessors thus making the object cyclic. We will also keep a variable named "cyclicDetected" assigned to false initially and keep sending this as parameter to the recursion function. Actually we will use this as to flag to move out of the recursive cycle. In this case we will make the value true and pass it forward.
2. Else, store the reference to "refArr" and keep drilling down.

Code for reference

var refArr = [];
var isCyclicFlag = false;
function isCyclic (obj, cyclicDetected) {
    if(cyclicDetected) return cyclicDetected;
    Object.keys(obj).forEach(x => {
        if(typeof obj[x]==='object') {
            console.log(refArr, obj[x])
            for(let i=0;i<refArr.length;i++) {
                if(obj[x]===refArr[i]) {
                    cyclicDetected=true;
                    isCyclicFlag = cyclicDetected;
                }
            }
            refArr.push(obj[x]);
            return isCyclic(obj[x], cyclicDetected);
        }
    })
}
isCyclic(someObj, false);

Now printing the value of "isCyclicFlag" will get us whether the object is Cyclic or not.

Thanks for reading!

Status Player with React

Suvadeep Majumdar — Thu, 14 Apr 2022 18:09:38 +0000

Lets first figure out how many components are there in our system.
First there is this top bar seperated into pieces according to the number of items or "statuses".
Second is the block displaying the status item. For now we just have scaled it for images and texts.

Lets start by designing the top bar
First of, what would we call the animated white bars. Ummm! lets call them simply bars.
What I did was, make a div flex container to hold all bars. Then loop through the statusArr create bar container i.e a div.
Now the outline is ready.

Now the animation
For every bar container, lets have a div with some animation. Just a normal animation with two layovers(0% and 100%). We are just increasing scale from 0 to 1.
But when are we adding this div to the container div?
When there is an increase in the counter(currItem) which I am going to cover in sometime. Here the counter is the single source of truth.

Lets now build the block, where our status item is displayed. Not going deep into styling it, let dive into the logic.
We are maintaining two state variable named statusArr(array) that you must have came across previously and currItem to keep track of the current status item . However we aren't changing anything by adding or removing to the array, we are using state to scale in future.

In the mounting stage(useEffect with empty array as dependency), we are running a loop over the statusArr, add a setTimeout with some delay(say i*1000), here i is the current index of the loop. Inside the callback, update the currItem. This way in some interval, the currItem is updating thus adding animated div(bar) to the container div and updating the status item to statusArr[currItem]. Hooray!!

But wait, what is happening. The image has not loaded yet, but the top animation is done and the currItem is updated and we are in next item.
How can we solve that?
Will preloading the image work? But how?
We can load all images but show only when the currItem is equal to the current item index. This way image loading improves but the issue persist. How can we stall the process until the image is completely loaded.
Recursion! So for each loop inside our useEffect, lets check if it is an image and if image, is it loaded completely using the standard approach(image.complete && image.naturalHeight !== 0). If loaded then fine, but if not call the checkLoad function which is a utility function that checks if an image is loaded or not and break from the loop. Add some delay so that the calls are made only after some and the Call-Stack is not exhausted. Inside the utility function start from the index from where you left and repeat the whole process.

Cool! Now no more disparity between the components and also the process stalls if the image is not loaded.

Preview

Flattening an object

Suvadeep Majumdar — Tue, 08 Mar 2022 19:55:15 +0000

Problem Statement
Suppose we have an object with any depth(let say 5, "obj.a.b.c.d.e"), our target is to return an object with a depth of just 1, for example,

obj = {
    a: {
        b:1,
        c: {
            d: 10
        }
    }
}

should get converted to:

obj = {
    a.b: 1,
    a.c.d: 10
}

My Approach
Think Recursively!
We would drill down the object and check at each level whether it is an object(and not Array).

If yes drill further through that sub-object and keep track of all the keys covered till now. For that I am passing an array(retArr) as a spread operator.
If not just assign the value against the key array(retArr) converted to string using join(".").

My code:

const obj = {
    a: {
        b:1,
        c: {
            d: 10,
            x: function () {
                console.log("AAA")
            }
        }
    }, e: {
        f: 5,
        g: {
            h: "hii",
            y: [1,2,3,4,5]
        }, 
        i: {
            j: {
                k:3,
                l: {
                    m: 20,
                },
                n: {
                    o:10
                },
                p: "hello"
            }
        }
    }
}
let retObj = {};
function flattenUtil (obj, ...keyArr) {
    for(x in obj) {
        if(typeof obj[x] === 'object' && !Array.isArray(obj[x])) {
            flattenUtil(obj[x], ...[...keyArr, x]);
        } else {
            retObj[[...keyArr, x].join(".")] = obj[x];
        }
    }
    return retObj;
}
console.log(flattenUtil(obj));

Find path to a particular value in an Object

Suvadeep Majumdar — Mon, 07 Mar 2022 19:47:04 +0000

This is my first post, so I would expect you to consider naivety in my language.

My Approach
We need to think recursively to reach to the point in the object where the value exists.
For each key we encounter, there are two condition,

Either its value is equal to out value
It's an object, and we need to dive into it. You guys thinking, what if its value is not an object and not equal to our value, you can ignore that, at least that's what I did. For each recursive call, pass the current object and the value as parameter. Alongside also pass the array containing current path, since we are interested in printing path.

That's it!

My Code

var obj = {
    a: {
        b:1,
        c: {
            d: 10
        }
    }, e: {
        f: 5,
        g: {
            h: "hii"
        }, 
        i: {
            j: {
                k:3,
                l: {
                    m: 20,
                },
                n: {
                    o:10
                },
                p: "hello"
            }
        }
    }
}
var arr = []
function findPath (obj, val) {
    arr = [];
    for(let x in obj) {
        if(obj[x] === val) {
            arr.push(x);
        } else if(typeof obj[x] === 'object') {
            findUtil(obj[x], val, x)
        }
    }
    return arr;
}
function findUtil(obj1, val, ...y) {
    for(let x in obj1) {
        if(obj1[x] === val) {
            arr = [...y, x]
        } else if(typeof obj1[x] === 'object') {
            findUtil(obj1[x], val, ...[...y, x])
        }
    }
}
console.log(findPath(obj, "hello").length ? findPath(obj, "hello").join("") : "Not Present")
console.log(findPath(obj, "hii").length ? findPath(obj, "hii").join("") : "Not Present")