Part IV: Understanding destructuring - referencing and defaults. You can view previous parts of this series here. Preface This article is designed as a “get started” read for beginner to intermediate developers who wish to gain a better understanding of introduced in EcmaScript 6 ( ). Destructuring ES6 As part of my “Getting to Grips with ES6” series, I aim to create a reference containing straight forward explanations ordered in short sections to help us understand and apply these concepts directly to our current processes. development Each article builds on concepts learned in previous articles. For this reason, you may want to consider taking a look at a if you encounter a new concept you do not recognize. previous article Written by . You can find me on , , , and . Andrew Hill LinkedIn Twitter Instagram GitHub Destructuring The Destructuring Assignment Syntax allows us to quickly extract data from an array or an object and assign that data to any given variable. Referencing Object Values the Traditional Way The following example illustrates how one might reference object data before the advent of ES6 and destructuring: var city = {name: 'Cape Town',population: 987007,website: 'capetown.gov.za',}; var name = city.name;var population = city.population;var website = city.website; console.log(name, population, website); // Output: "Cape Town 987007 capetown.gov.za" Referencing object values using a more traditional approach. Example 1: This pattern of potentially needing to save references to values from the same object leads to repetitive, less concise code. Referencing Values Through Destructuring ES6 destructuring allows us to achieve the same result with a much more concise syntax. We can rewrite the first example as follows: const city = {name: 'Cape Town',population: 987007,website: 'capetown.gov.za',}; const { name, population, website } = city; console.log(name, population, website); // Output: "Cape Town 987007 capetown.gov.za" A cleaner, more concise way to reference object values through destructuring. Example 2: Using destructuring, only a single variable declaration is needed to define all top level variables in the object. city We also have the ability to destructure arrays in ES6. The only difference being, when destructuring an array, we need to use square brackets instead of curly braces: const city = ['Cape Town', 987007, 'capetown.gov.za']; const [name, population, website] = city; console.log(name, population, website); // Output: "Cape Town 987007 capetown.gov.za" Referencing array values through destructuring. Example 3: You may at times find yourself faced with a object that is misrepresented by unintuitive key value pairs. Let us consider the following as an example of a dataset that we are retrieving via a poorly written API: very const city = {x: 'Cape Town',y: 987007,z: 'capetown.gov.za',}; const { x, y, z } = city;const cityWithCountry = `${x}, South Africa` console.log(cityWithCountry); // Output: "Cape Town, South Africa" A poorly designed dataset with nondescript keys reduces our code readability. Example 4: The nondescript identifiers in this dataset will ultimately lead to code that is very difficult to read and maintain, especially if left uncommented. Assuming we are unable to modify the initial object keys, the data can effectively be “ (referenced) through destructuring, improving code readability: city renamed” const city = {x: 'Cape Town',y: '987007',z: 'capetown.gov.za',}; const {x: name,y: population,z: website} = city; const area = `${name}, South Africa` console.log(area); // Output: "Cape Town, South Africa" Code readability is improved by renaming object keys through destructuring. Example 5: Destructuring Deeply Nested Values Interestingly, destructuring is not limited to top level values of an object or an array. We can access deeply nested values by following the same destructuring pattern: const city = {name: 'Cape Town',population: 987007,website: 'capetown.gov.za',weather: {temperature: {celcius: 19,fahrenheit: 66,},windSpeed: {kph: 27,mph: 17,},humidity: '77%',},}; const { weather: { temperature }} = city; console.log(temperature); // Output: { celcius: 19, fahrenheit: 66 } Deeply nested object data can be easily referenced through destructuring. Example 6: Using the above example, we are able to access the deeply nested values by destructuring the key in the object. temperature weather city Setting Defaults Through Destructuring Default values (or fallbacks) can be created while destructuring to account for data that is expected, yet missing. Consider the following example: const city = {name: 'Cape Town',population: 987007,website: 'capetown.gov.za',}; const {name,population,website = 'No Website Available',country = 'South Africa',} = city; const cityWithCountry = `${name}, ${country}`; console.log(website, cityWithCountry); // Output: "capetown.gov.za"//         "Cape Town, South Africa" Default values can be set as fallbacks to account for data that may be missing from your data set. Example 7: In our example above, the reference expected a variable, but one was not provided in our data set. As a result, the default we set in our destructuring comes into effect, and the reference to points to the default . cityAndCountry country city country South Africa Defaults assigned through destructuring are always ignored if a value exists in the object being destructured. To further illustrate this point, a value has been assigned to the key in the object. The reference will point to the object's value ( ) and not the value of the default ( ), as a value already exists within the object. website city website capetown.gov.za No Website Provided Destructuring within Function Signatures Destructuring is also allowed within function Signatures: const cityPopulation = ({ name } = {}, website) => {console.log(`Learn more about ${name} at ${website}`);}; cityPopulation({ name: 'Cape Town' }, 'capetown.gov.za'); // Output: "Learn more about Cape Town at capetown.gov.za" Destructuring function parameters. Example 8: This ensures our functions will always have access to any expected values. The following is an example of a function with defaults being set on destructured parameters: const cityPop = ({ name = 'Unknown', population=0 } = {}) => {console.log(`${name} has a population of ${population}`);}; cityPop({ name: 'Cape Town', population: 987007 }); // Output: "Cape Town has a population of 987007" cityPop(); // Output: "Unknown has a population of 0." Setting defaults within a function signature. Example 9: You may have noticed the destructured parameters are being assigned to an empty object with . This is done to ensure our function calls, without arguments, do not fail with an as demonstrated in the following example: ={} Uncaught TypeError const cityPop = ({ name = 'Unknown', population=0 } = {}) => {console.log(`${name} has a population of ${population}`);}; cityPop({ name: 'Cape Town', population: 987007 }); // Output: "Cape Town has a population of 987007" cityPop(); // Output: -> Uncaught TypeError: Cannot match against 'undefined' or 'null'. Example 10: Destructured parameters fail to fallback to defaults when not assigned to an empty object. Thanks for reading. If you liked this article please consider supporting future installations of this series by recommending it. 👏 Interested in learning more? Click here to view previous parts of this series.

Instagram

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Getting to Grips with ES6: Destructuring

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Andrew Hill

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Getting to Grips with ES6: Destructuring

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Andrew Hill

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES