{"id":11736,"date":"2022-07-12T17:32:05","date_gmt":"2022-07-12T17:32:05","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/?p=11736"},"modified":"2022-07-12T17:32:05","modified_gmt":"2022-07-12T17:32:05","slug":"es6-destructuring-javascript","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/","title":{"rendered":"ES6 Object Destructuring"},"content":{"rendered":"<p><img class=\"alignnone wp-image-10820 size-medium\" src=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1-300x300.png\" alt=\"Angular and JavaScript\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1-300x300.png 300w, https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1-150x150.png 150w, https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1-420x420.png 420w, https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png 480w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nIn recent years, deconstructed foods have become all the rage among foodies, whereby chefs break down dishes to their core idea (destructuring) and then rebuild them up from their basic components (restructuring). What does this have to do with JavaScript? As it happens, it also supports the destructuring and restructuring of Arrays and Objects. Until the release of ECMAScript 6 (ES6), the destructuring part of the equation was a lot harder to achieve than the restructuring, requiring several lines of code to accomplish. Now, the ability to destructure an Array or Object in one line of code offers a wealth of coding possibilities. In this web development tutorial, we will be concentrating on Object destructuring today; the next article will focus on mixed (Object and Array) destructuring, along with some of its more advanced uses.<\/p>\n<p>Looking to learn web development in an online course format? Check out our listing of some of the best <a href=\"https:\/\/www.htmlgoodies.com\/html\/best-online-courses-to-learn-html\/\" target=\"_blank\" rel=\"noopener\">HTML and web development courses<\/a>.<\/p>\n<h2>JavaScript Destructuring Basics<\/h2>\n<p>The <a href=\"https:\/\/www.htmlgoodies.com\/javascript\/typescript-array-features\/\" target=\"_blank\" rel=\"noopener noreferrer\">Advanced TypeScript\/ES6 Array Features<\/a> article touched on Array destructuring and compared the new ES6 syntax with that of previous versions of JavaScript (JS). As an example, we assigned the elements of an array to four separate variables:<\/p>\n<pre>\/\/ in pre-ES6 Javascript\r\nvar ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];\r\nvar john   = ivoryKnightMembers[0], \r\n    rob    = ivoryKnightMembers[1],\r\n    George = ivoryKnightMembers[2], \r\n    Steve  = ivoryKnightMembers[3];\r\n\r\n\/\/ using ES6 destructuring\r\nlet ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];\r\nlet [john, rob, george, steve] = ivoryKnightMembers;\r\n<\/pre>\n<p>In that JavaScript tutorial, we defined destructuring as a feature of EcmaScript 2015 and Typescript that allows you to break up the structure of an entity. While that definition sufficed in the context of the subject matter at hand, it omitted a few other points about destructuring, such as:<\/p>\n<ul>\n<li>It can be applied to an complex structure (i.e., an array or object).<\/li>\n<li>It can be used for both variable assignment and\/or variable declaration.<\/li>\n<li>It supports nested destructuring syntax to handle nested structures.<\/li>\n<\/ul>\n<p>So lets cover each of these points in turn as they apply to Objects.<\/p>\n<h2>Object Destructuring Examples in JavaScript<\/h2>\n<p>The above code snippet is an example of Array destructuring in a variable assignment. Since JS Objects store their attributes as Associative Arrays, we can also place an Object literal on the left-hand side of an assignment expression for object destructuring:<\/p>\n<pre>const band = {\r\n    drummer: 'George',\r\n    bassist: 'Steve',\r\n    guitarist: 'Rob',\r\n    vocalist: 'John'\r\n};\r\n\r\n\/\/ Object Destructuring\r\nconst { drummer, bassist, guitarist, vocalist } = band;\r\n\r\n\/\/ Outputs \"George, Steve, Rob, John\"\r\nconsole.log(drummer, bassist, guitarist, vocalist); \r\n<\/pre>\n<h3>Assigning New Values to Local Variables<\/h3>\n<p>The next snippet shows how to use object destructuring to assign new values to local variables. Notice that we have to use a pair of enclosing parentheses (<strong>()<\/strong>) in the assignment expression. Otherwise, the destructuring object literal will be scoped as a block statement, which will throw an error because a block cannot appear at the left-hand side of an assignment expression:<\/p>\n<pre>\/\/ Initialize local variables\r\nlet drummer = 'George';\r\nlet bassist = 'Steve';\r\nlet guitarist = 'Rob';\r\nlet vocalist = 'John';\r\n\r\nconst band = {\r\n    drummer: 'George',\r\n    bassist: 'Steve',\r\n    guitarist: 'Rob',\r\n    vocalist: 'John'\r\n};\r\n\r\n\/\/ Reassign firstname and lastname using destructuring\r\n\/\/ Enclose in a pair of parentheses, since this is an assignment expression\r\n({ drummer, guitarist } = band);\r\n\r\n\/\/ bassist and vocalist remain unchanged\r\n\/\/ Outputs \"George, Steve, Rob, John\"\r\nconsole.log(drummer, bassist, guitarist, vocalist);  \r\n<\/pre>\n<h3>Assigning Default Values and Destructuring in JS<\/h3>\n<p>Destructuring assignment is very flexible, allowing you to assign variables that do not correspond to any keys on the destructured object. If you do, JS will happily create the variable and assign it a value of <strong>undefined<\/strong>. Otherwise, you can assign a default value yourself like so:<\/p>\n<pre>const band = {\r\n    drummer: 'George',\r\n    bassist: 'Steve',\r\n    guitarist: 'Rob',\r\n    vocalist: 'John'\r\n};\r\n\r\n\/\/ Assign default value of 'Allan' to keyboardist if undefined\r\nconst { drummer, bassist, guitarist, keyboardist = 'Allan', vocalist } = band;\r\n\r\n\/\/ List band members using ES6 template literals\r\n\/\/ Outputs \"Ivory Knight are George, Steve, Rob, Allan, and John\"\r\nconsole.log(`Ivory Knight are ${drummer}, ${bassist}, ${guitarist}, ${keyboardist}, and ${vocalist}.`);\r\n<\/pre>\n<p><strong>Read:<\/strong> <a href=\"https:\/\/www.htmlgoodies.com\/javascript\/using-javascript-variables-and-built-in-functions\/\" target=\"_blank\" rel=\"noopener\">Using JavaScript Variables and Built-in Functions<\/a><\/p>\n<h3>Changing Variable Names in JavaScript<\/h3>\n<p>You are probably already thinking that variable assignment using destructuring is pretty powerful stuff. Well, it gets even better. Web developers are not limited to variables that have the same name as their corresponding object key. Programmers can assign to a different variable name using the syntax <code>[object_key]:[variable_name]<\/code>. Want to set some default values? You can assign some using the syntax <code>[object_key]:[variable_name] = [default_value]<\/code>:<\/p>\n<pre>const band = {\r\n    drummer: 'George',\r\n    bassist: 'Steve',\r\n    guitarist: 'Rob',\r\n    vocalist: 'John'\r\n};\r\n\r\n\/\/ Assign default value of 'Allan' to keyboards if undefined\r\nconst { drums: drummer, bass: bassist = 'New guy', guitars: guitarist, keyboards = 'Allan', vocals: vocalist } = band;\r\n\r\n\/\/ List band members using ES6 template literals\r\n\/\/ Outputs \"Ivory Knight are George, New guy, Rob, Allan, and John\"\r\nconsole.log(`Ivory Knight are ${drums}, ${bass}, ${guitars}, ${keyboards}, and ${vocals}.`);\r\n<\/pre>\n<h2>Nested Object Destructuring in JavaScript<\/h2>\n<p>As I am sure you are aware, objects can themselves contain other objects. Therefore, it makes sense that child objects can also be destructured. Here is an example that demonstrates how to do that:<\/p>\n<pre>const band = {\r\n    drummer: 'George',\r\n    bassist: 'Steve',\r\n    guitarist: 'Rob',\r\n    vocalist: 'John',\r\n    backupVocals: {\r\n      lowBackups: 'Steve',\r\n      highBackups: 'Rob'\r\n    }\r\n};\r\n\r\n\/\/ Assign to local variables\r\nconst { drummer, bassist, guitarist, vocalist, backupVocals: {lowBackups, midBackups = 'N\/A', highBackups} } = band;\r\n\r\n\/\/ Outputs \"Backup vocals performed by Steve, N\/A, Rob.\"\r\nconsole.log(`Backup vocals performed by ${lowBackups}, ${midBackups}, ${highBackups}.`);\r\n<\/pre>\n<h2>Final Thoughts on ES6 Object Destructuring<\/h2>\n<p>In this web development tutorial, we learned how to destructure Objects using ES6 syntax. The next article will focus on mixed (Object and Array) destructuring, along with some of its more advanced uses.<\/p>\n<p>While you&#8217;re waiting for that, why not check out <a href=\"https:\/\/www.google.com\/url?q=https:\/\/codepen.io\/blackjacques\/pen\/eYMzOZM?editors%3D0010&amp;source=gmail-html&amp;ust=1657724906110000&amp;usg=AOvVaw1x7GpL1uWDjKklH7EW52B_\" target=\"_blank\" rel=\"noopener noreferrer\">the demo<\/a> of today&#8217;s code snippets? You can even play around with them if you like!<\/p>\n<p>Read more <a href=\"https:\/\/www.htmlgoodies.com\/javascript\/\" target=\"_blank\" rel=\"noopener\">JavaScript programming tutorials and software development guides<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In recent years, deconstructed foods have become all the rage among foodies, whereby chefs break down dishes to their core idea (destructuring) and then rebuild them up from their basic components (restructuring). What does this have to do with JavaScript? As it happens, it also supports the destructuring and restructuring of Arrays and Objects. Until [&hellip;]<\/p>\n","protected":false},"author":90,"featured_media":10820,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30620],"tags":[30807,3385,28502],"b2b_audience":[37],"b2b_industry":[65],"b2b_product":[76,68,118,81,82,133,83,84,107,86,93,94,99,114,115,116,85,522,117,80,98,128,135],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ES6 Object Destructuring and JavaScript | HTMLGoodies.com<\/title>\n<meta name=\"description\" content=\"Learn all about JavaScript and JS Object destructuring in this web development tutorial, complete wit code examples and use cases.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ES6 Object Destructuring and JavaScript | HTMLGoodies.com\" \/>\n<meta property=\"og:description\" content=\"Learn all about JavaScript and JS Object destructuring in this web development tutorial, complete wit code examples and use cases.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Goodies\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-12T17:32:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"480\" \/>\n\t<meta property=\"og:image:height\" content=\"480\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:site\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rob Gravelle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\",\"name\":\"HTML Goodies\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/htmlgoodies\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"width\":584,\"height\":136,\"caption\":\"HTML Goodies\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"name\":\"HTML Goodies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.htmlgoodies.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#primaryimage\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png\",\"width\":480,\"height\":480,\"caption\":\"Angular and JavaScript\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#webpage\",\"url\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/\",\"name\":\"ES6 Object Destructuring and JavaScript | HTMLGoodies.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#primaryimage\"},\"datePublished\":\"2022-07-12T17:32:05+00:00\",\"dateModified\":\"2022-07-12T17:32:05+00:00\",\"description\":\"Learn all about JavaScript and JS Object destructuring in this web development tutorial, complete wit code examples and use cases.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.htmlgoodies.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ES6 Object Destructuring\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75\"},\"headline\":\"ES6 Object Destructuring\",\"datePublished\":\"2022-07-12T17:32:05+00:00\",\"dateModified\":\"2022-07-12T17:32:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#webpage\"},\"wordCount\":651,\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png\",\"keywords\":[\"ES6\",\"JavaScript\",\"object\"],\"articleSection\":[\"Javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75\",\"name\":\"Rob Gravelle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg\",\"caption\":\"Rob Gravelle\"},\"description\":\"Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.\",\"url\":\"https:\/\/www.htmlgoodies.com\/author\/rob-gravelle\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ES6 Object Destructuring and JavaScript | HTMLGoodies.com","description":"Learn all about JavaScript and JS Object destructuring in this web development tutorial, complete wit code examples and use cases.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/","og_locale":"en_US","og_type":"article","og_title":"ES6 Object Destructuring and JavaScript | HTMLGoodies.com","og_description":"Learn all about JavaScript and JS Object destructuring in this web development tutorial, complete wit code examples and use cases.","og_url":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/","og_site_name":"HTML Goodies","article_published_time":"2022-07-12T17:32:05+00:00","og_image":[{"width":480,"height":480,"url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@htmlgoodies","twitter_site":"@htmlgoodies","twitter_misc":{"Written by":"Rob Gravelle","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.htmlgoodies.com\/#organization","name":"HTML Goodies","url":"https:\/\/www.htmlgoodies.com\/","sameAs":["https:\/\/twitter.com\/htmlgoodies"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","width":584,"height":136,"caption":"HTML Goodies"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.htmlgoodies.com\/#website","url":"https:\/\/www.htmlgoodies.com\/","name":"HTML Goodies","description":"","publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.htmlgoodies.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#primaryimage","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png","width":480,"height":480,"caption":"Angular and JavaScript"},{"@type":"WebPage","@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#webpage","url":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/","name":"ES6 Object Destructuring and JavaScript | HTMLGoodies.com","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#primaryimage"},"datePublished":"2022-07-12T17:32:05+00:00","dateModified":"2022-07-12T17:32:05+00:00","description":"Learn all about JavaScript and JS Object destructuring in this web development tutorial, complete wit code examples and use cases.","breadcrumb":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.htmlgoodies.com\/"},{"@type":"ListItem","position":2,"name":"ES6 Object Destructuring"}]},{"@type":"Article","@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#article","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#webpage"},"author":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75"},"headline":"ES6 Object Destructuring","datePublished":"2022-07-12T17:32:05+00:00","dateModified":"2022-07-12T17:32:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#webpage"},"wordCount":651,"publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/es6-destructuring-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/JavaScript-Date-Time-Zones-1.png","keywords":["ES6","JavaScript","object"],"articleSection":["Javascript"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75","name":"Rob Gravelle","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg","caption":"Rob Gravelle"},"description":"Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.","url":"https:\/\/www.htmlgoodies.com\/author\/rob-gravelle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/11736"}],"collection":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/comments?post=11736"}],"version-history":[{"count":0,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/11736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media\/10820"}],"wp:attachment":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media?parent=11736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/categories?post=11736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/tags?post=11736"},{"taxonomy":"b2b_audience","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_audience?post=11736"},{"taxonomy":"b2b_industry","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_industry?post=11736"},{"taxonomy":"b2b_product","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_product?post=11736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}