diff --git a/curriculum/challenges/english/blocks/lecture-working-with-optional-chaining-and-object-destructuring/6732b77adf9de12617a2dbb3.md b/curriculum/challenges/english/blocks/lecture-working-with-optional-chaining-and-object-destructuring/6732b77adf9de12617a2dbb3.md index 19af3379f00..381da7c0ff8 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-optional-chaining-and-object-destructuring/6732b77adf9de12617a2dbb3.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-optional-chaining-and-object-destructuring/6732b77adf9de12617a2dbb3.md @@ -64,6 +64,34 @@ console.log(country); // Unknown Here, since `country` doesn't exist in our `person` object, it gets the default value `Unknown`. +Another common case is nested object destructuring. You can destructure properties nested inside other objects by using another set of braces: + +:::interactive_editor + +```js +const recipe = { + name: "Chocolate Cake", + ingredients: { + flour: "2 cups", + sugar: "1 cup" + } +}; + +// Extract `flour` from `ingredients` +const { ingredients: { flour } } = recipe; + +console.log(flour); // "2 cups" +``` + +::: + +This is equivalent to accessing the property directly: + +```js +const flour = recipe.ingredients.flour; +console.log(flour); // "2 cups" +``` + Now, let's talk about the shorthand notation in object destructuring. When you're creating objects, especially when the property names match variable names, you can use a shorthand syntax: :::interactive_editor