Best way to get deep property in ES6 shorthand notation

Question

I am running into an issue where in I have a object as below

a = {
   b: {
    c: 10
   }
};

Now this is a dynamic object and can be empty on runtime, like this a = {}, I am trying to read c in ES6 shorthand notation like const {b: {c}} = a;. But getting error every time object is empty. Is there a way I can still use this notation for empty object, like get undefined for c in that case.

I know I can do something like (a.b ? a.b.c : undefined), but i just wanted to know shothand way of doing it.

Especially see this answer: https://stackoverflow.com/a/42349521/906113 — str, Oct 08 '17 at 10:13

score 3 · Accepted Answer · answered Oct 08 '17 at 10:10

3

You can do = {} for inner objects:

const a = {
   b: {
    c: 10
   }
};

const f = ({b: {c} = {}}) => console.log(c)

f(a)
f({})

In this case c becomes undefined if the object is empty

answered Oct 08 '17 at 10:10

Egor Stambakio

17,836
5
33
35

This way even if I have value assigned to c: 10, I will always get c as undefined. isn't it? – Gautam Oct 08 '17 at 10:18
@RanjeetGautam run my code. When `c` is defined it returns the value; otherwise undefined. – Egor Stambakio Oct 08 '17 at 10:19
Yes sorry my apology, it does run but isn't this is like setting default property in method parameter? Actually I wanted to know simple shorthand method to capture c even when b is undefined. – Gautam Oct 08 '17 at 10:22
@RanjeetGautam in this case this is the answer: https://stackoverflow.com/a/46630023/7636961 – Egor Stambakio Oct 08 '17 at 10:28

score 2 · Answer 2 · answered Oct 08 '17 at 10:11

2

you can do

let a = {
   b: {
    c: 10
   }
};

let result = a && a.b && a.b.c;

console.log(result);

it would return the property if it is present, otherwise it would return undefined

answered Oct 08 '17 at 10:11

marvel308

10,288
1
21
32

if `a` is guaranteed to be an object, you don't need to check it, since it will always be true – Ferrybig Oct 08 '17 at 10:14
@ferrybig no no no. there's no guarantee `a` is not `null`/`undefined` – Igor Soloydenko Oct 08 '17 at 10:16
The OP says in his question "Now this is a dynamic object and can be empty on runtime, like this a = {}" – Ferrybig Oct 08 '17 at 10:17
@marvel308 yes this will definitely give the result & thnk you for answering. But my question is how to do it in ES6 way? – Gautam Oct 08 '17 at 10:25

score 0 · Answer 3 · answered Oct 08 '17 at 10:24

You might want a general approach, which isn't really terse for shallow structures but saves you compiling out a static sequence of conditionals.

function dive (obj, pz) {
  return pz.reduce((acc, p) => {
    return obj && p in acc ? acc[p] : undefined;
  }, obj);
}

You can use this with arbirary depth

console.log(dive({a:{b:{c:[10,11,12]}}}, ['a', 'b', 'c', 1]))

c.f. this demo

score 0 · Answer 4 · answered Oct 08 '17 at 13:35

0

Give lodash a shot:

lodash.get(a, 'b.c', FALLBACK_DEFAULT_VALUE);

answered Oct 08 '17 at 13:35

Ryan Huang

3,849
2
13
11

1

This I have used, I was looking for ES6 way. Thanks for answering :) – Gautam Oct 08 '17 at 16:05
It's your choice between vanilla ES6 or safe & concise Lodash. – Ryan Huang Oct 13 '17 at 06:15

Best way to get deep property in ES6 shorthand notation

4 Answers4