{"id":1564,"date":"2019-06-28T00:00:00","date_gmt":"2019-06-27T23:00:00","guid":{"rendered":"https:\/\/old.weichie.com\/blog\/javascript-array-and-object-destructuring-with-es6\/"},"modified":"2020-06-06T19:37:25","modified_gmt":"2020-06-06T18:37:25","slug":"javascript-array-and-object-destructuring-with-es6","status":"publish","type":"post","link":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/","title":{"rendered":"Javascript Array and Object destructuring with ES6"},"content":{"rendered":"\n

Yet another destructuring post.. It’s a function I always forget that exists in javascript, so I hope this post can show you it’s power and beauty, so you’ll remember! The javascript destructuring assignment makes it possible to extract data from arrays and objects into distinct variables. Without declaring them first! A ma zing!!<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure><\/h2>\n\n\n\n

Javascript simple destructuring examples<\/h2>\n\n\n\n

We can destructure both javascript Objects or Arrays. I’ll start simple with a few examples below to get the hang of it. But when we’re using complex JSON data-structures, destructuring can really help us out. (See complexer JSON example at the bottom)<\/p>\n\n\n\n

Javascript Array Destructuring<\/h3>\n\n\n\n
const testArray = [1, 2, 3, 4, 5];\nconst a = testArray;\nconst [x, y, z] = testArray;\nconsole.log(a);      \/\/ a => (5) [1, 2, 3, 4, 5]\nconsole.log(x, z);   \/\/ x => 1, z => 3<\/code><\/pre>\n\n\n\n
Javascript Object Destructuring
\n<\/strong><\/h3>\n\n\n\n
const testObject = {\n  firstname: \"Bob\",\n  lastname: \"Weichler\"\n};\nconst a = testObject;\nconst { firstname } = testObject;\nconsole.log(a);           \n\/\/ a => {firstname: \"Bob\", lastname: \"Weichler\"}\nconsole.log(firstname);\n\/\/ firstname => Bob<\/code><\/pre>\n\n\n\n
As you can see, the first item (a) just returns the initial value. When we use destructuring, we can get the direct value of the preferred items, without declaring them first. Which is awesome, and makes it possible to do wicked stuff way faster!<\/p>\n\n\n\n
Notice that destructuring an array uses let [x] = value;<\/strong>
\nwhile an object uses let {name} = value;<\/strong><\/em><\/p>\n\n\n\n
Another thing we can do, is destructure the variables directly when declaring them. Wait… What?<\/p>\n\n\n\n
const [val1, val2] = [\"JS\", \"Destructuring\", \"101\"];\nconsole.log(val1);  \/\/ val1 => JS\nconsole.log(val2);  \/\/ val2 => Destructuring\nconst {val1, val2} = {val1: \"JS\", val2: \"Destructuring\" };\nconsole.log(val1);  \/\/ val1 => JS\nconsole.log(val2);  \/\/ val2 => Destructuring<\/code><\/pre>\n\n\n\n
Notice: For an array, the variable names doesn’t matter, as it takes the position from the array element<\/span>. But for objects it does! we can’t do the following const {val1} = {test: “whoow”}<\/strong> because it will return undefined.
\n<\/em><\/p>\n\n\n\n
Deeper level destructuring (nested items)<\/h2>\n\n\n\n
We can also destructure immediately on deeper nested elements. Let’s start with a 1-level nested array or object:<\/p>\n\n\n\n
const testArray = [\n    [\"Bob Weichler\", \"Webdeveloper\"],\n    [\"John Doe\", \"Webdesigner\"]\n];\nconst [ firstUser ] = testArray; \n\/\/ firstUser => (2) [\"Bob Weichler\", \"Webdeveloper\"]\nconst dataObj = {\n    users: {\n        name: 'Bob'\n    }\n}\nconst { users: {name} } = dataObj;\n\/\/name => Bob\n  <\/code><\/pre>\n\n\n\n
You still with me? What if we want to go even deeper? For an Array, we need to start mapping if we want to go deepter. See an example further down this post. For objects we can see where we’ll end:<\/p>\n\n\n\n
const dataObj2 = {\n    users: {\n        name: {\n            first: 'Bob',\n            last: 'Weichler'\n        }\n    }\n}\nconst { users: { name } } = dataObj2;\nconst { first } = name;\n\/\/ first => Bob<\/code><\/pre>\n\n\n\n
I couldn’t manage to destructure directly 3 levels deep \ud83d\ude41 Let me know if you found a way! (without looping)<\/p>\n\n\n\n
Spreading, rest or skipping some values<\/h2>\n\n\n\n
Now that we’re already destructuring like a maniac, why not throw some extra’s in it like a spread or a skip?<\/p>\n\n\n\n
\/\/ -- REST AT ONCE ----------\nconst dataObj = {\n    users: {\n        name: 'Bob Weichler',\n        job: 'Webdeveloper',\n        country: 'Belgium',\n        age: 25\n    },\n}\nconst { users: { name, ...rest } } = dataObj;\n\/\/ name => Bob Weichler\n\/\/ rest => {job: \"Webdeveloper\", country: \"Belgium\", age: 25}\n\/\/ -- SKIPPING ITEMS ----------\nconst countries = ['Belgium', 'France', 'Germany', 'Singapore', 'Mexico'];\nconst [ home, , skipFrance, ...otherCountries ] = countries;\n\/\/ skipFrance => Germany\n\/\/ otherCountries => (2) [\"Singapore\", \"Mexico\"]<\/code><\/pre>\n\n\n\n
Mixed destructuring and more complex Structures<\/h2>\n\n\n\n
This is all fun and games, but not really time winning in my opinion. However, I recently started experimenting with the WordPress REST API, and oh boy.. this one kind of forced me into using javascript destructuring. We all know WordPress abuses the posts and postmeta tables, and then combined with ACF<\/a>.. do we even want to see the returned JSON? If we don’t specify our call a little, it literally<\/span> returns everything.<\/p>\n\n\n\n
If we filter the json result a little, we can assume the following data to work with:<\/p>\n\n\n\n
const research = {\n    id: 445,\n    data: \"2019-05-13T00:00:00\",\n    otherContent: \"...\",\n    acf: {\n        relatedStaff: [{\n            staffLevel: 'Supervisors',\n            users: [{\n                name: { first: 'Bob', last: 'Weichler' }\n            },{\n                name: { first: 'Jane', last: 'Doe' }\n            }]\n        },{\n            staffLevel: 'Reseachers',\n            users: [{\n                name: { first: 'John', last: 'Doe' }\n            }]\n        }]\n    },\n    ...\n}<\/code><\/pre>\n\n\n\n
In my example, I wanted to return all related users. No matter to what research group they belong to. This is where the fun started, and is also the reason why I wrote this post..<\/p>\n\n\n\n
Return all related users:<\/h3>\n\n\n\n
getRelatedUsers = ( result = [] ) => {\n    const { acf: { relatedStaff } } = research;\n    relatedStaff.map(({ users }) => {\n        users.map(({ name: { first, last } }) => {\n            result.push(`${first} ${last}`);\n        });\n    });\n    return result;\n}\n\/* output: getRelatedUsers() => (3) [\"Bob Weichler\", \"Jane Doe\", \"John Doe\"] *\/<\/code><\/pre>\n\n\n\n
Woah, relax! A little bit more info pleasee.<\/p>\n\n\n\n
1 – First we create a function getRelatedUsers()<\/strong> so we can use this function everywhere in our app<\/p>\n\n\n\n
2 – Declare a result parameter inside our function parameters, to win time<\/p>\n\n\n\n
3 – Destructure our ACF relatedStaff field from our json object, notice that relatedStaff is an array in our json object<\/p>\n\n\n\n
4 – Because this is an array, we need to map() over it, to retrieve<\/span> the data from every row<\/p>\n\n\n\n
5 – While mapping, we directly pull the users object with destructuring. Users will also be an array, we can map() over again<\/p>\n\n\n\n
6 – While mapping over the users, we declare our first and last name, inside the map parameters<\/p>\n\n\n\n
7 – Store the names for each row inside our declared result array<\/p>\n\n\n\n
Javascript Destructuring Challenge!<\/h2>\n\n\n\n
Hope this post gave you more insights on how destructuring works, and when it can become handy in our applications.<\/p>\n\n\n\n
Please feel free to contribute to my getRelatedUsers() function in the comments! If we can make it compacter, let’s do so!<\/p>\n","protected":false},"excerpt":{"rendered":"
Yet another destructuring post.. It’s a function I always forget that exists in javascript, so I hope this post can show you it’s power and beauty, so you’ll remember! The javascript destructuring assignment makes it possible to extract data from arrays and objects into distinct variables. Without declaring them first! A ma zing!!<\/p>\n","protected":false},"author":1,"featured_media":985,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[111],"tags":[167,168,96,169],"acf":[],"yoast_head":"\nJavascript Array and Object destructuring with ES6 — Weichie - Digital Agency Brussels<\/title>\n<meta name=\"description\" content=\"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Array and Object destructuring with ES6\" \/>\n<meta property=\"og:description\" content=\"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/\" \/>\n<meta property=\"og:site_name\" content=\"Weichie\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/weichiecom\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-27T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-06T18:37:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/old.weichie.com\/wp-content\/uploads\/2019\/08\/weichie_cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Bob Weichler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Javascript Array and Object destructuring with ES6\" \/>\n<meta name=\"twitter:description\" content=\"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!\" \/>\n<meta name=\"twitter:creator\" content=\"@Weichiie\" \/>\n<meta name=\"twitter:site\" content=\"@Weichiie\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bob Weichler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/\"},\"author\":{\"name\":\"Bob Weichler\",\"@id\":\"https:\/\/old.weichie.com\/nl\/#\/schema\/person\/6ad8396db109092b3b23f7ea9e6b8f2a\"},\"headline\":\"Javascript Array and Object destructuring with ES6\",\"datePublished\":\"2019-06-27T23:00:00+00:00\",\"dateModified\":\"2020-06-06T18:37:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/\"},\"wordCount\":656,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/old.weichie.com\/nl\/#organization\"},\"keywords\":[\"destructuring\",\"ES6\",\"javascript\",\"tutorial\"],\"articleSection\":[\"Zelfstudie\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/\",\"url\":\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/\",\"name\":\"Javascript Array and Object destructuring with ES6 — Weichie - Digital Agency Brussels\",\"isPartOf\":{\"@id\":\"https:\/\/old.weichie.com\/nl\/#website\"},\"datePublished\":\"2019-06-27T23:00:00+00:00\",\"dateModified\":\"2020-06-06T18:37:25+00:00\",\"description\":\"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!\",\"breadcrumb\":{\"@id\":\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/old.weichie.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Javascript Array and Object destructuring with ES6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/old.weichie.com\/nl\/#website\",\"url\":\"https:\/\/old.weichie.com\/nl\/\",\"name\":\"Weichie\",\"description\":\"Web development for forward thinking brands\",\"publisher\":{\"@id\":\"https:\/\/old.weichie.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/old.weichie.com\/nl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/old.weichie.com\/nl\/#organization\",\"name\":\"Weichie\",\"url\":\"https:\/\/old.weichie.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/old.weichie.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/old.weichie.com\/wp-content\/uploads\/2019\/04\/wp_logo_black.png\",\"contentUrl\":\"https:\/\/old.weichie.com\/wp-content\/uploads\/2019\/04\/wp_logo_black.png\",\"width\":500,\"height\":228,\"caption\":\"Weichie\"},\"image\":{\"@id\":\"https:\/\/old.weichie.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/weichiecom\",\"https:\/\/twitter.com\/Weichiie\",\"https:\/\/www.instagram.com\/weichiie\/\",\"https:\/\/www.linkedin.com\/company\/weichieprojects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/old.weichie.com\/nl\/#\/schema\/person\/6ad8396db109092b3b23f7ea9e6b8f2a\",\"name\":\"Bob Weichler\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Javascript Array and Object destructuring with ES6 — Weichie - Digital Agency Brussels","description":"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"nl_NL","og_type":"article","og_title":"Javascript Array and Object destructuring with ES6","og_description":"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!","og_url":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/","og_site_name":"Weichie","article_publisher":"https:\/\/www.facebook.com\/weichiecom","article_published_time":"2019-06-27T23:00:00+00:00","article_modified_time":"2020-06-06T18:37:25+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/old.weichie.com\/wp-content\/uploads\/2019\/08\/weichie_cover.jpg","type":"image\/jpeg"}],"author":"Bob Weichler","twitter_card":"summary_large_image","twitter_title":"Javascript Array and Object destructuring with ES6","twitter_description":"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!","twitter_creator":"@Weichiie","twitter_site":"@Weichiie","twitter_misc":{"Geschreven door":"Bob Weichler","Geschatte leestijd":"4 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#article","isPartOf":{"@id":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/"},"author":{"name":"Bob Weichler","@id":"https:\/\/old.weichie.com\/nl\/#\/schema\/person\/6ad8396db109092b3b23f7ea9e6b8f2a"},"headline":"Javascript Array and Object destructuring with ES6","datePublished":"2019-06-27T23:00:00+00:00","dateModified":"2020-06-06T18:37:25+00:00","mainEntityOfPage":{"@id":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/"},"wordCount":656,"commentCount":0,"publisher":{"@id":"https:\/\/old.weichie.com\/nl\/#organization"},"keywords":["destructuring","ES6","javascript","tutorial"],"articleSection":["Zelfstudie"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/","url":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/","name":"Javascript Array and Object destructuring with ES6 — Weichie - Digital Agency Brussels","isPartOf":{"@id":"https:\/\/old.weichie.com\/nl\/#website"},"datePublished":"2019-06-27T23:00:00+00:00","dateModified":"2020-06-06T18:37:25+00:00","description":"Use javascript destructuring to win time and to allow us to easely strip compact code. JS Destructuring with ES6 is really amazing when done right!","breadcrumb":{"@id":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/old.weichie.com\/nl\/blog\/javascript-array-and-object-destructuring-with-es6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/old.weichie.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Javascript Array and Object destructuring with ES6"}]},{"@type":"WebSite","@id":"https:\/\/old.weichie.com\/nl\/#website","url":"https:\/\/old.weichie.com\/nl\/","name":"Weichie","description":"Web development for forward thinking brands","publisher":{"@id":"https:\/\/old.weichie.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/old.weichie.com\/nl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/old.weichie.com\/nl\/#organization","name":"Weichie","url":"https:\/\/old.weichie.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/old.weichie.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/old.weichie.com\/wp-content\/uploads\/2019\/04\/wp_logo_black.png","contentUrl":"https:\/\/old.weichie.com\/wp-content\/uploads\/2019\/04\/wp_logo_black.png","width":500,"height":228,"caption":"Weichie"},"image":{"@id":"https:\/\/old.weichie.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/weichiecom","https:\/\/twitter.com\/Weichiie","https:\/\/www.instagram.com\/weichiie\/","https:\/\/www.linkedin.com\/company\/weichieprojects\/"]},{"@type":"Person","@id":"https:\/\/old.weichie.com\/nl\/#\/schema\/person\/6ad8396db109092b3b23f7ea9e6b8f2a","name":"Bob Weichler"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/posts\/1564"}],"collection":[{"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/comments?post=1564"}],"version-history":[{"count":1,"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/posts\/1564\/revisions"}],"predecessor-version":[{"id":2125,"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/posts\/1564\/revisions\/2125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/media\/985"}],"wp:attachment":[{"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/media?parent=1564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/categories?post=1564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/old.weichie.com\/nl\/wp-json\/wp\/v2\/tags?post=1564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}