0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>The value of an object property can be anything, including another object or an array:</p>
1
<p>The value of an object property can be anything, including another object or an array:</p>
2
<p>All of these can be defined immediately when you create an object:</p>
2
<p>All of these can be defined immediately when you create an object:</p>
3
<p>In this case, nested elements are accessed by chaining keys:</p>
3
<p>In this case, nested elements are accessed by chaining keys:</p>
4
<h2>Printing</h2>
4
<h2>Printing</h2>
5
<p>There is one limitation built into console.log(). If an object has nested objects deeper than the second level, when printing such an object, a string, [Object], will be displayed instead of the object itself, and another string, [Array], will be displayed instead of an array.</p>
5
<p>There is one limitation built into console.log(). If an object has nested objects deeper than the second level, when printing such an object, a string, [Object], will be displayed instead of the object itself, and another string, [Array], will be displayed instead of an array.</p>
6
<p>You can use the JSON conversion function to output such objects:</p>
6
<p>You can use the JSON conversion function to output such objects:</p>
7
<h2>Checking nested objects</h2>
7
<h2>Checking nested objects</h2>
8
<p>When working with nested objects, the task of checking that keys exist complicates dramatically. You have to build a chain of conditions for the desired property. Imagine we need to get to nesting level 4, and we're not certain that all the intermediate objects exist:</p>
8
<p>When working with nested objects, the task of checking that keys exist complicates dramatically. You have to build a chain of conditions for the desired property. Imagine we need to get to nesting level 4, and we're not certain that all the intermediate objects exist:</p>
9
<p>This is what a head-on solution would look like. However, there is a more convenient way, which will be discussed below.</p>
9
<p>This is what a head-on solution would look like. However, there is a more convenient way, which will be discussed below.</p>
10
<h3>Optional chaining operator</h3>
10
<h3>Optional chaining operator</h3>
11
<p>If the goal is to get the data and not just check that it exists, there is another way. JavaScript has a built-in<a>optional chaining operator</a>which allows you to extract nested data without any checks:</p>
11
<p>If the goal is to get the data and not just check that it exists, there is another way. JavaScript has a built-in<a>optional chaining operator</a>which allows you to extract nested data without any checks:</p>
12
<p>This operator never causes an error. It works on any data type and always returns either undefined or the property value if it exists.</p>
12
<p>This operator never causes an error. It works on any data type and always returns either undefined or the property value if it exists.</p>
13
<h3>Nullish coalescing operator</h3>
13
<h3>Nullish coalescing operator</h3>
14
<p>With the<a>nullish coalescing operator</a>, you can do more than get a value in the chain at any nesting level, but also define a default value for it.</p>
14
<p>With the<a>nullish coalescing operator</a>, you can do more than get a value in the chain at any nesting level, but also define a default value for it.</p>
15
<p>The default value is only returned when undefined or null is on the left hand side. In this sense, this operator is not at all like the logical comparison ||:</p>
15
<p>The default value is only returned when undefined or null is on the left hand side. In this sense, this operator is not at all like the logical comparison ||:</p>
16
<h3>get (lodash)</h3>
16
<h3>get (lodash)</h3>
17
<p>The last example is overloaded with symbols and looks rather complicated. As an alternative, you can use the get() function from the lodash library.</p>
17
<p>The last example is overloaded with symbols and looks rather complicated. As an alternative, you can use the get() function from the lodash library.</p>
18
<p>get() is especially useful for dynamic keys. In this case, you can pass an array of keys as the second argument:</p>
18
<p>get() is especially useful for dynamic keys. In this case, you can pass an array of keys as the second argument:</p>
19
19