forked from rohan-paul/Awesome-JavaScript-Interviews
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnested-object-prob-1.js
56 lines (44 loc) · 2.03 KB
/
nested-object-prob-1.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// Let’s take this nested object as an example.
const user = {
id: 101,
email: 'jack@dev.com',
personalInfo: {
name: 'Jack',
address: {
line1: 'westwish st',
line2: 'washmasher',
city: 'wallas',
state: 'WX'
}
}
}
// To access the name of the our user, we’ll write
const name = user.personalInfo.name;
console.log(name);
const userCity = user.personalInfo.address.city;
console.log(userCity);
// But, for some reason, if our user's personal info is not available, the object structure will be like this,
const user1 = {
id: 101,
email: 'jack@dev.com'
}
// console.log(user1.personalInfo.name); //=> TypeError: Cannot read property 'name' of undefined
// Then to access the name property and also not throw "Cannot read property 'name' of undefined." - do the following in plain vanilla js
const name1 = user1 && user1.personalInfo ? user1.personalInfo.name : null;
// console.log(name1); // => null
// This is okay if your nested structure is simple, but if you have your data nested 5 or 6 levels deep, then your code will look really messy like this,
let city;
if (
data && data.user && data.user.personalInfo &&
data.user.personalInfo.addressDetails &&
data.user.personalInfo.addressDetails.primaryAddress
) {
city = data.user.personalInfo.addressDetails.primaryAddress;
}
// Oliver Steele's Nested Object Access Pattern - for the same data above, if I have to access the 'name' property and not throw any error. But ofcourse with each more nesting level the parenthesis will continue to grow.
const name2 = (((user1 || {}).personalInfo) || {}).name;
console.log(name2);
/* Explanation -
With this notation, you'll never run into Cannot read property 'name' of undefined. You basically check if user exists, if not, you create an empty object on the fly. This way, the next level key will always be accessed from an object that exists or an empty object, but never from undefined.
Unfortunately, you cannot access nested arrays with this trick
*/