Find path in a JS object? My favorite question to ask in a Frontend interview.

I’ve been a frontend interviewer for the last 2+ years and in this article, I’m gonna share my favorite coding question to ask in any frontend interview.

Find path

What's the question?

Before we jump into the question, I recommend you to first solve it on your own and then come back to this article. Here’s the link → https://leetcode.com/playground/LhwrauHo

/*
- Write method findPath
- Should take two params:
    - object
    - keys separated by dots as string
- Return value if it exists at that path inside the object, else return undefined
*/
var obj = {
    a: {
        b: {
            c: 12,
            j: false
        },
        k: null
    }
};
const findPath = (object, path) => {
    
};
console.log(findPath(obj, 'a.b.c')); // 12
console.log(findPath(obj, 'a.b')); // {c: 12, j: false}
console.log(findPath(obj, 'a.b.d')); // undefined
console.log(findPath(obj, 'a.c')); // undefined
console.log(findPath(obj, 'a.b.c.d')); // undefined
console.log(findPath(obj, 'a.b.c.d.e')); // undefined
console.log(findPath(obj, 'a.b.j')); //false
console.log(findPath(obj, 'a.b.j.k')); //undefined
console.log(findPath(obj, 'a.k')); //null
// jump to the end for the solution

Explanation

As you can see, the question is pretty straightforward. We want to write a function (findPath) that accepts 2 arguments.

1. object → normal JS object

// Example
var obj = {
    a: {
        b: {
            c: 12,
            j: false
        },
        k: null
    }
};

1. path → string of keys separated by dots.

// Example
var p = 'a.b.c'
// so our keys are a, b, and c

Function findPath should first check if the path exists in the object. If the path exists, then we need to return its value else return undefined.

So for the above example of path and object, we need to return 12.

Find path in the form of a tree

pseudo code

1. Covert path to an array of keys (const keys = path.split(’.’);)
2. Make a reference of the object. (let temp = object;)
3. Run a loop over all the keys (for loop)
4. If the key is present in the object, update the reference and move forward ( temp = temp[keys[i])
5. If the key is not present, return undefined.

So why is this question so interesting?

• Most candidates are able to formate a decent pseudo code, but their code returns incorrect values for the below test cases

console.log(findPath(obj, 'a.b.j')); //false
console.log(findPath(obj, 'a.b.j.k')); //undefined
console.log(findPath(obj, 'a.k')); //null
// did you get stuck on any of these cases?

• For candidates whose code passes all test cases. I add 2 more cases

console.log(findPath(obj, 'a.k.j')); // undefined
console.log(findPath(obj, 'a.toString')); // undefined

• A lot of the candidates miss out on these cases while thinking of the approach. Sometimes path = ‘a.k.j’ breaks their code. While the .toString case makes the candidate rethink the approach.
• It really helps me gauge the candidate on how they respond to changing conditions. How quickly they can change their direction and formulate a cleaner approach to these updated test cases? How they write code, how well they communicate their thoughts, what naming conventions they use etc.

The simplicity of this question really makes it so unique and fun. At first glance, it looks easy, but it comes with really interesting edge cases. And now it’s time for the solution -

Solution

const findPath = (object, path) => {
    const keys = path.split('.');
    let temp = object;
    for (let i = 0; i < keys.length; i++) {
        try {
            if(!temp.hasOwnProperty(keys[i])) { return undefined; } 
            temp = temp[keys[i]];
        } catch {
            return undefined;
        }
    }
    return temp;
};
// happy interviewing

Which test case did you get stuck on? Or do you have a more elegant solution to this problem? Do let me know.