loading...

How to safely access deeply nested object in Javascript

onmyway133 profile image Khoa Pham ・1 min read

An object 's property can be null or undefined.

Accessing step by step is tedious

props.user &&
props.user.posts &&
props.user.posts[0] &&
props.user.posts[0].comments

Dynamic parsing path is too clever and involves string in the end, which is a no no

const get = (p, o) =>
  p.reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, o)

const getUserComments = get(['user', 'posts', 0, 'comments'])

Instead let's use function and catch errors explicitly, and defaults with a fallback

const get: (f, defaultValue) => {
    try {
        const value = f()
        if (isNotNullOrUndefined(value)) {
            return value
        } else {
            return defaultValue
        }
    } catch {
        return defaultValue
    }
}

const comments = get(() => { .user.posts[0].comments }, [])

Read more

Discussion

pic
Editor guide
Collapse
merri profile image
Vesa Piittinen

For this purpose I'd recommend using what majority of devs use for this purpose: lodash.

import get from 'lodash/get'

const comments = get(props, 'user.posts[0].comments', [])

This makes code easier for more people to understand. Also, using try ... catch and creation of new function for each iteration might hurt performance in tight loops. lodash implementation is both optimized for performance and has tests for edge cases.

Collapse
sebbdk profile image
Sebastian Vargr

Just make sure to use the import like in the above. :)

I've unfortunately seen waaay to many projects include the entire lodash library for just one or two functions...

Or even worse for already poly-filled array methods.. :D