{"id":971,"date":"2023-01-23T15:54:16","date_gmt":"2023-01-23T10:24:16","guid":{"rendered":"https:\/\/test.tntra.io\/blog\/?p=971"},"modified":"2025-02-07T23:08:07","modified_gmt":"2025-02-07T17:38:07","slug":"destructuring-resting-and-spread-operators-in-javascript","status":"publish","type":"post","link":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/","title":{"rendered":"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #c4161d;color:#c4161d\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #c4161d;color:#c4161d\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#Steps_for_Object_Destructuring_in_JavaScript\" >Steps for Object Destructuring in JavaScript<\/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.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#Resting_and_Spread_Operator_in_JavaScript\" >Resting and Spread Operator 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.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#Introduction_to_Spread_Operator_in_JavaScript\" >Introduction to Spread Operator in JavaScript&nbsp;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#In_Summary\" >In Summary&nbsp;<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p><strong>What is Object Destructuring in JavaScript?<\/strong><\/p>\n\n\n\n<p>Destructuring array Javascript is an expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables. Destructuring object is a feature in JavaScript that will enable you to remove properties from an object and assign them to variables using a shorthand syntax.&nbsp;<\/p>\n\n\n\n<p>It is a way to unpack values from an object and assign them to variables. For example, instead of using the dot notation to access an object&#8217;s property, you can use destructuring to assign the property&#8217;s value to a variable with the same name as the property.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Syntax:&nbsp;\n<\/strong>\nconst { variable1, variable2 } = object;\n\n<strong>Example:\n<\/strong>\nconst person = { name: 'John Doe', age: 30 };\n\nconst { name, age } = person;\n\nconsole.log(name); \/\/ 'John Doe'\n\nconsole.log(age); \/\/ 30<\/code><\/pre>\n\n\n\n<p>In this example, the properties&#8217; name&#8217; and &#8216;age&#8217; are being destructured from the object &#8216;person&#8217; and assigned to the variables&#8217; name&#8217; and &#8216;age&#8217;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Steps_for_Object_Destructuring_in_JavaScript\"><\/span><strong>Steps for Object Destructuring in JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>1.<\/strong> <strong>Assigning Object value to exist variable<\/strong><\/p>\n\n\n\n<p>Here&#8217;s how to destructure values from an object:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"267\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/assigning-object-value-to-exist-variable.png\" alt=\"Assigning Object value to exist variable\" class=\"wp-image-974\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/assigning-object-value-to-exist-variable.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/assigning-object-value-to-exist-variable-300x156.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Assigning New variable names<\/strong><\/h4>\n\n\n\n<p>The following code is an example of destructuring array of objects into variables with a different name than the object property.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"321\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/assigning-new-variable-names.png\" alt=\"Assigning New variable names\" class=\"wp-image-973\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/assigning-new-variable-names.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/assigning-new-variable-names-300x188.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Nested Object Destructuring<\/strong><\/h4>\n\n\n\n<p>A nested object is an object that is inside another object. It is a way of organizing and structuring data in which an object contains one or more objects.&nbsp;<\/p>\n\n\n\n<p>These nested objects can also contain other nested objects, creating a hierarchical data structure. This allows for a more complex and flexible way of storing and manipulating data, as properties and methods can be accessed at multiple levels of the nested object.&nbsp;<\/p>\n\n\n\n<p>An object can be nested. This means that the value of an object property can be another object, and so on.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Let&#8217;s consider the superHero object below. It has a property called a character with the value of another object. But let&#8217;s not stop here! The department has a property with key appearances whose value is another object. Quite a real-life scenario.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"394\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring.png\" alt=\"RayThis Extension\" class=\"wp-image-975\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-300x231.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>The above screenshot displays how exactly you can destructure an object. Now you have the answer to the question &#8211; how object destructuring<strong> <\/strong>take place?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"210\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-2.png\" alt=\"how exactly you can destructure an object\" class=\"wp-image-976\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-2.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-2-300x123.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>But let&#8217;s go one more nested level down. How do we extract the value of the appearance property of the character? Now, this may sound tricky. However, if you apply the same object destructuring principles, you&#8217;ll see it&#8217;s similar.<\/p>\n\n\n\n<p>Here&#8217;s the output when you log appearances:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"128\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-3.png\" alt=\"Here's the output when you log appearances:\" class=\"wp-image-978\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-3.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-3-300x75.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>In this case, the character is the key we focus on, and we conduct the array destructuring of its appearance value. Notice the {} around the keys you want to destructure.<\/p>\n\n\n\n<p>Now it&#8217;s time to take it to the next level. How do we extract the value of a movie from the character&#8217;s movie? We will use the same destructuring object principle again!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"148\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-4-1.png\" alt=\"How do we extract the value of a movie from the character's movie\" class=\"wp-image-979\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-4-1.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/nested-object-destructuring-4-1-300x87.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>The Output when you log into the movie \u201c<strong>civil war<\/strong>\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resting_and_Spread_Operator_in_JavaScript\"><\/span><strong>Resting and Spread Operator in JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript uses three dots (&#8230;) for the rest and spread operators. But these two operators are not the same.<\/p>\n\n\n\n<p><strong>1) Spread Operator&nbsp;<\/strong><\/p>\n\n\n\n<p>The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array. But the spread syntax expands iterables into individual elements.<\/p>\n\n\n\n<p><strong>2) Rest Operator<\/strong><\/p>\n\n\n\n<p>A function can be called with any number of arguments, no matter how it is defined.<\/p>\n\n\n\n<p>The <strong>Rest parameter syntax<\/strong> (&#8230;) instructs the computer to add whatever movies (arguments) supplied by the user into an array. Then, assign that array to the movies parameter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"213\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/rest-operator.png\" alt=\"Rest parameter syntax\" class=\"wp-image-980\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/rest-operator.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/rest-operator-300x125.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction_to_Spread_Operator_in_JavaScript\"><\/span><strong>Introduction to <\/strong>Spread Operator<strong> in JavaScript&nbsp;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>ES6 provides a new operator called spread operator that consists of three dots (&#8230;). The spread operator allows you to spread out elements of an iterable object.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"207\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/spread-operator.png\" alt=\"Introduction to Spread Operator in JavaScript\u00a0\" class=\"wp-image-981\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/spread-operator.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/spread-operator-300x121.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>You can shallow-copy objects using (\u2026) spread operators.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"238\" src=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/spread-operator-2.png\" alt=\"shallow-copy objects using (\u2026) spread operators\" class=\"wp-image-982\" srcset=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/spread-operator-2.png 512w, https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/spread-operator-2-300x139.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>Checkout this cool extension to take code snapshots : <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Goopware.raythis\">https:\/\/marketplace.visualstudio.com\/items?itemName=Goopware.raythis<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"In_Summary\"><\/span><strong>In Summary&nbsp;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Object destructuring is a new syntax introduced in ES6, which allows for the creation of variables by extracting an object&#8217;s properties in a simplified way. This can be particularly useful when working with frameworks and libraries such as Angular, React, or Vue, where you will be using a lot of syntax for destructuring array of objects.&nbsp;<\/p>\n\n\n\n<p>It&#8217;s important to note that object destructuring and spread syntax are not the same things. The spread syntax is used to copy the enumerable properties of an object to create a clone of it and also can be used to update or merge with another object. On the other hand, the rest parameter is used to consolidate or collect the remaining object properties into a new object while destructuring is being done.<\/p>\n\n\n\n<p>For hassle-free Java application development, <a href=\"https:\/\/www.tntra.io\/contact-us\" target=\"_blank\" rel=\"noreferrer noopener\">contact<\/a> Tntra application development team today.&nbsp;&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Object Destructuring in JavaScript? Destructuring array Javascript is&#8230;<\/p>\n","protected":false},"author":9,"featured_media":986,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Understating Destructuring, Resting, and Spread Operators in Modern JavaScript - Tntra<\/title>\n<meta name=\"description\" content=\"Object destructuring can simplify complex array manipulation. Learn about JavaScript features such as destructuring, rest, and spread operators in this comprehensive guide.\" \/>\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.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript - Tntra\" \/>\n<meta property=\"og:description\" content=\"Object destructuring can simplify complex array manipulation. Learn about JavaScript features such as destructuring, rest, and spread operators in this comprehensive guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Tntra\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tntraio\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T10:24:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-07T17:38:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/destructuring-resting-and-spread-operators-in-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Amin Tai\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tntraio\" \/>\n<meta name=\"twitter:site\" content=\"@tntraio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amin Tai\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/\"},\"author\":{\"name\":\"Amin Tai\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#\\\/schema\\\/person\\\/188302a003cc9bff247e96a60545bbbc\"},\"headline\":\"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript\",\"datePublished\":\"2023-01-23T10:24:16+00:00\",\"dateModified\":\"2025-02-07T17:38:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/\"},\"wordCount\":785,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/destructuring-resting-and-spread-operators-in-javascript.png\",\"articleSection\":[\"Programming\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/\",\"name\":\"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript - Tntra\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/destructuring-resting-and-spread-operators-in-javascript.png\",\"datePublished\":\"2023-01-23T10:24:16+00:00\",\"dateModified\":\"2025-02-07T17:38:07+00:00\",\"description\":\"Object destructuring can simplify complex array manipulation. Learn about JavaScript features such as destructuring, rest, and spread operators in this comprehensive guide.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/destructuring-resting-and-spread-operators-in-javascript.png\",\"contentUrl\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/destructuring-resting-and-spread-operators-in-javascript.png\",\"width\":1200,\"height\":627,\"caption\":\"Destructuring, resting, and spread Operators in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/destructuring-resting-and-spread-operators-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/\",\"name\":\"Tntra\",\"description\":\"AI-First &amp; IP-Enabled Innovation Ecosystem\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#organization\",\"name\":\"Tntra\",\"url\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/logo.png\",\"width\":300,\"height\":300,\"caption\":\"Tntra\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/tntraio\",\"https:\\\/\\\/x.com\\\/tntraio\",\"https:\\\/\\\/www.instagram.com\\\/tntra.io\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/tntra\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/#\\\/schema\\\/person\\\/188302a003cc9bff247e96a60545bbbc\",\"name\":\"Amin Tai\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/amin-tai-150x150.png\",\"url\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/amin-tai-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/amin-tai-150x150.png\",\"caption\":\"Amin Tai\"},\"description\":\"Amin is a React developer familiar with other JS ecosystems such as React Native, Next, Angular, Node, and Express. He frequently engages in problem-solving challenges on platforms such as Leetcode and Codechef to sharpen his programming skills. In addition, you can find him often participating and contributing to open-source events such as Hacktoberfest. Outside work, he likes to read books and listen to podcast.\",\"url\":\"https:\\\/\\\/www.tntra.io\\\/blog\\\/author\\\/amin-tai\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript - Tntra","description":"Object destructuring can simplify complex array manipulation. Learn about JavaScript features such as destructuring, rest, and spread operators in this comprehensive guide.","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.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript - Tntra","og_description":"Object destructuring can simplify complex array manipulation. Learn about JavaScript features such as destructuring, rest, and spread operators in this comprehensive guide.","og_url":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/","og_site_name":"Tntra","article_publisher":"https:\/\/www.facebook.com\/tntraio","article_published_time":"2023-01-23T10:24:16+00:00","article_modified_time":"2025-02-07T17:38:07+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/destructuring-resting-and-spread-operators-in-javascript.png","type":"image\/png"}],"author":"Amin Tai","twitter_card":"summary_large_image","twitter_creator":"@tntraio","twitter_site":"@tntraio","twitter_misc":{"Written by":"Amin Tai","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/"},"author":{"name":"Amin Tai","@id":"https:\/\/www.tntra.io\/blog\/#\/schema\/person\/188302a003cc9bff247e96a60545bbbc"},"headline":"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript","datePublished":"2023-01-23T10:24:16+00:00","dateModified":"2025-02-07T17:38:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/"},"wordCount":785,"publisher":{"@id":"https:\/\/www.tntra.io\/blog\/#organization"},"image":{"@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/destructuring-resting-and-spread-operators-in-javascript.png","articleSection":["Programming"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/","url":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/","name":"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript - Tntra","isPartOf":{"@id":"https:\/\/www.tntra.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/destructuring-resting-and-spread-operators-in-javascript.png","datePublished":"2023-01-23T10:24:16+00:00","dateModified":"2025-02-07T17:38:07+00:00","description":"Object destructuring can simplify complex array manipulation. Learn about JavaScript features such as destructuring, rest, and spread operators in this comprehensive guide.","breadcrumb":{"@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#primaryimage","url":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/destructuring-resting-and-spread-operators-in-javascript.png","contentUrl":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/destructuring-resting-and-spread-operators-in-javascript.png","width":1200,"height":627,"caption":"Destructuring, resting, and spread Operators in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tntra.io\/blog\/destructuring-resting-and-spread-operators-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tntra.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Understating Destructuring, Resting, and Spread Operators in Modern JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.tntra.io\/blog\/#website","url":"https:\/\/www.tntra.io\/blog\/","name":"Tntra","description":"AI-First &amp; IP-Enabled Innovation Ecosystem","publisher":{"@id":"https:\/\/www.tntra.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tntra.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tntra.io\/blog\/#organization","name":"Tntra","url":"https:\/\/www.tntra.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tntra.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2025\/11\/logo.png","contentUrl":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2025\/11\/logo.png","width":300,"height":300,"caption":"Tntra"},"image":{"@id":"https:\/\/www.tntra.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tntraio","https:\/\/x.com\/tntraio","https:\/\/www.instagram.com\/tntra.io\/","https:\/\/www.linkedin.com\/company\/tntra\/"]},{"@type":"Person","@id":"https:\/\/www.tntra.io\/blog\/#\/schema\/person\/188302a003cc9bff247e96a60545bbbc","name":"Amin Tai","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/amin-tai-150x150.png","url":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/amin-tai-150x150.png","contentUrl":"https:\/\/www.tntra.io\/blog\/wp-content\/uploads\/2023\/01\/amin-tai-150x150.png","caption":"Amin Tai"},"description":"Amin is a React developer familiar with other JS ecosystems such as React Native, Next, Angular, Node, and Express. He frequently engages in problem-solving challenges on platforms such as Leetcode and Codechef to sharpen his programming skills. In addition, you can find him often participating and contributing to open-source events such as Hacktoberfest. Outside work, he likes to read books and listen to podcast.","url":"https:\/\/www.tntra.io\/blog\/author\/amin-tai\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/posts\/971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/comments?post=971"}],"version-history":[{"count":0,"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/posts\/971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/media\/986"}],"wp:attachment":[{"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/media?parent=971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/categories?post=971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tntra.io\/blog\/wp-json\/wp\/v2\/tags?post=971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}