How do I dynamically get the value of a nested object property in JavaScript?

Question

Say I have the following object:

let exampleObj = {
   hello: {
      there: {
         friend: 'my friend!',
         neighbor: 'neighbor!',
         world: 'world!'
      }
   }
}

Is there an efficient way I can create a function such as

function getPropValues(obj, ...keys) {
 // ...
}

where if I call getPropValues with the following arguments

const result = getPropValues(exampleObj, 'hello', 'there', 'world');

It would give me the result of exampleObj['hello']['there']['world']?

(i.e. I would expect result to be 'world!' in this case)

Answer 1

you can do this

function getPropValues(obj, ...keys) {
    return keys.reduce((p, c) => {
        return p[c]
    }, obj)
}

Answer 2

Use Array.prototype.reduce() with Optional chaining ?. as a fallback to undefined for missing properties:

const exampleObj = {
  hello: {
    there: {
      friend: 'my friend!',
      neighbor: 'neighbor!',
      world: 'world!'
    }
  }
};

const getVal = (ob, ...k) => k.reduce((o, k) => o?.[k], ob);

console.log( getVal(exampleObj, "hello", "there", "world") ); // "world!"
console.log( getVal(exampleObj, "hello", "stranger") );       // undefined

Or if you like a dotted string notation:
_{(Be careful since bug-prone. Properties can also have dots)}

const exampleObj = {
  hello: {
    there: {
      friend: 'my friend!',
      neighbor: 'neighbor!',
      world: 'world!'
    }
  }
};

const getVal = (ob, s) => s.split('.').reduce((o, k) => o?.[k], ob);

console.log( getVal(exampleObj, "hello.there.world") ); // "world!"
console.log( getVal(exampleObj, "hello.stranger") );    // undefined

Answer 3

You can easily achieve this using recursion.

let exampleObj = {
  hello: {
    there: {
      friend: "my friend!",
      neighbor: "neighbor!",
      world: "world!",
    },
  },
};

function getPropValuesWithIndex(obj, keys, index) {
  if (index === keys.length - 1) return obj[keys[index]];
  return getPropValuesWithIndex(obj[keys[index]], keys, index + 1);
}

function getPropValues(obj, ...keys) {
  return getPropValuesWithIndex(obj, keys, 0);
}

const result1 = getPropValues(exampleObj, "hello", "there", "world");
console.log(result1);

const result2 = getPropValues(exampleObj, "hello", "there", "friend");
console.log(result2);

Answer 4

Here's a much simpler recursive version in only one function, without using index.

let exampleObj = {
  hello: {
    there: {
      friend: 'my friend!',
      neighbor: 'neighbor!',
      world: 'world!',
    },
  },
};

function getPropValues(obj, ...keys) {
  let currentObj;
  let key = keys.shift();
  if (keys.length && typeof obj[key] === 'object') {
    currentObj = obj[key];
    return getPropValues(currentObj, ...keys);
  } else return obj[key];
}

const result = getPropValues(exampleObj, 'hello', 'there', 'world');

console.log(result);