{"id":504,"date":"2021-03-23T21:13:48","date_gmt":"2021-03-24T02:13:48","guid":{"rendered":"http:\/\/box5488.temp.domains\/~becomen3\/staging\/8495\/?p=504"},"modified":"2022-04-25T09:47:41","modified_gmt":"2022-04-25T14:47:41","slug":"its-time-to-destructure-objects-in-javascript","status":"publish","type":"post","link":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/its-time-to-destructure-objects-in-javascript\/","title":{"rendered":"It&#8217;s Time To Destructure Objects in JavaScript"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/its-time-to-destructure-objects-in-javascript\/#Prefer_to_watch_the_video\" >Prefer to watch the video?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/its-time-to-destructure-objects-in-javascript\/#Did_you_know_how_to_destructure_an_object_in_JavaScript\" >Did you know how to destructure an object in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/its-time-to-destructure-objects-in-javascript\/#What_is_Destructuring_Assignment\" >What is Destructuring Assignment?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prefer_to_watch_the_video\"><\/span>Prefer to watch the video?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Learn Object Destructuring in Javascript in less than 15 minutes\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/a7Zi2JjDvas?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Did_you_know_how_to_destructure_an_object_in_JavaScript\"><\/span>Did you know how to destructure an object in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Looking to learn something new in JavaScript? Here is destructuring assignment for you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Destructuring_Assignment\"><\/span>What is Destructuring Assignment?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I know you want a technical explanation. However, I will explain it in simple words. The ability to define and assign values of an object without accessing the values or properties of an object.<\/p>\n\n\n\n<p>Let me show you. Below we have a car object:<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code lang=\"javascript\" class=\"language-javascript\">const car = {\n   id: 94521,\n   make:  'Ford',\n   model: 'Mustang',\n   year: 2016\n }<\/code><\/pre>\n\n\n\n<p>If you want to store any of the properties in variable, you would do something along these lines:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const carId = car.id;\nconst make = car.make;\nconst model = car.model;\nconst carYear = car.year;<\/code><\/pre>\n\n\n\n<p>In that way you could use any of those variables if any of those values are used over and over within your code, which is fine. However, by destructuring the car\u2019s object, you can take advantage of the car\u2019s properties and use them to generate your new variable:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const { make, id, model, year } = car;<\/code><\/pre>\n\n\n\n<p>Isn\u2019t it cool?<\/p>\n\n\n\n<p><em>\u201cAndres, what if I have an existing id variable within my function? I will get errors as I cannot have multiple variables with the same name if I decide to destructure the car\u2019s object.\u201d<\/em><\/p>\n\n\n\n<p>Calm down my friend, I got you there. You can still define any variable name to the properties you want to access from the car\u2019s object by adding a colon and the name you wish to give to your variable:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const { id: carId } = car;<\/code><\/pre>\n\n\n\n<p>In that way, we can have a variable called <strong>carId <\/strong>instead of <strong>id<\/strong>. Therefore, you will avoid conflicts if you have an existing <strong>id <\/strong>variable in your process.<\/p>\n\n\n\n<p>This is handy especially when you need to use specific data that is retrieved from a function into another function without the need to store the whole object in a variable.<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>Async function getCar(id) {\n   \/\/ getting data from the database\n   .\n   .\n   .\n   const record = await db.execute(query);\n   return record;\n   \/\/ which is the same as the following below\n   \/\/ return {\n   \/\/  id: record.id,\n   \/\/  make: record.make,\n   \/\/  model: record.model,\n   \/\/  year: record.year,\n   \/\/ };\n   \/\/\n }\n\n function getCarName(carId) {\n   const { make, model, year } = await getCar(carId);\n   return <span style=\"background-color: rgba(248, 248, 242, 0.2); font-family: monospace; font-size: inherit; word-spacing: normal;\">`${make} ${model} year: ${year}<\/span>`;\n }<\/code><\/pre>\n\n\n\n<p>If you noticed, in our method <strong>getCarName <\/strong>we didn\u2019t have to use the id of the car to generate the name.<\/p>\n\n\n\n<p><em>\u200d\u201cAndr\u00e9s, what would happen if the <strong>getCar <\/strong>method doesn\u2019t find any records in the database? What kind of values will it assign while destructuring a <strong>car <\/strong>object that doesn\u2019t have a <strong>make <\/strong>property?\u201d<\/em><\/p>\n\n\n\n<p>\u200dProbably you are not going to come up with that question until you get an error. I\u2019m telling you by experience.<\/p>\n\n\n\n<p>\u200dHowever, if you can come up with such question, I can come up with an answer.<\/p>\n\n\n\n<p>You can assign a default value while destructuring an object in the following way:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const { make = 'Hyundai' } = car;<\/code><\/pre>\n\n\n\n<p>In this way, the make of the car will default to \u201cHyundai\u201d if the car doesn\u2019t have any make property. You can still define whatever name you want to your variable as well as a default value:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const { make: carMake = 'Hyundai' } = car;<\/code><\/pre>\n\n\n\n<p><em>\u201cAndres: Aren\u2019t Array objects in JavaScript? Does object destructuring work with arrays?\u201d<\/em><\/p>\n\n\n\n<p>Yes, you are right. Arrays are also objects in JavaScript. A special type of object. Do you remember accessing the values of an array like this?<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const players = &#91;'Player 1', 'Player 2', 'Player 3', 'Player 4', 'Player 5'];\nconst playerOne = players&#91;0];\nconst playerTwo = players&#91;1];\nconst playerThree = players&#91;2];\nconst playerFour = players&#91;3];\nconst playerFive = players&#91;4];<\/code><\/pre>\n\n\n\n<p>You could still destructure your array in the following manner:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const &#91;\n   playerOne, \/\/ \u2018Player 1\u2019\n   playerTwo, \/\/ \u2018Player 2\u2019\n   playerThree, \/\/ \u2018Player 3\u2019\n   playerFour, \/\/ \u2018Player 4\u2019\n   playerFive \/\/ \u2018Player 5\u2019\n ] = players;<\/code><\/pre>\n\n\n\n<p><strong>Important<\/strong>: The values will be assigned in the order the items are in the array.<\/p>\n\n\n\n<p>\u200dAnd before you ask, you can still get one item of your array as well like this:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const &#91; playerOne ] = players;<\/code><\/pre>\n\n\n\n<p>Also, you could separate one item from the array and generate another array from the rest of the items:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const &#91; playerOne, \u2026otherPlayers ] = players;\n\/\/ playerOne - 'Player 1';\n\/\/ otherPlayers = &#91;'Player 2', 'Player 3', 'Player 4', 'Player 5'];<\/code><\/pre>\n\n\n\n<p>You can also skip any item of the array, i.e, in case you don\u2019t have to access the first item of the array but the second item, you only need to separate the destructured variables with a comma, and don\u2019t assign a name to the \u201cskipped\u201d items of the original array:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const &#91;, playerTwo, , \u2026otherPlayers ] = players;\n \/\/ playerTwo - 'Player 2';\n \/\/ otherPlayers = &#91;'Player 4', 'Player 5'];<\/code><\/pre>\n\n\n\n<p>And finally, if you need to assign a default value it should look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code language-bash\"><code>const &#91;, two,,,,,any = 'Any Player'] = players\n \/\/ any = 'Any Player'<\/code><\/pre>\n\n\n\n<p>Isn\u2019t destructuring assignment neat?\u200d<\/p>\n\n\n\n<p>Now that you know it, go ahead and use it on your projects. Once you start using it, you will fall in love and will end up using it over and over.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prefer to watch the video? Did you know how to destructure an object in JavaScript? Looking to learn something new in JavaScript? Here is destructuring assignment for you. What is Destructuring Assignment? I know you want a technical explanation. However, I will explain it in simple words. The ability to define and assign values of &#8230; <a title=\"It&#8217;s Time To Destructure Objects in JavaScript\" class=\"read-more\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/its-time-to-destructure-objects-in-javascript\/\" aria-label=\"More on It&#8217;s Time To Destructure Objects in JavaScript\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":506,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,14],"tags":[],"class_list":["post-504","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-tutorial","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/comments?post=504"}],"version-history":[{"count":2,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/504\/revisions"}],"predecessor-version":[{"id":2527,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/504\/revisions\/2527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media\/506"}],"wp:attachment":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media?parent=504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/categories?post=504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/tags?post=504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}