DEV Community

Khoa Pham
Khoa Pham

Posted on

How to safely access deeply nested object in Javascript

An object 's property can be null or undefined.

Accessing step by step is tedious

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

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 (2)

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.

sebbdk profile image
Sebastian Vargr • Edited on

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