{"id":7651,"date":"2023-03-09T12:45:53","date_gmt":"2023-03-09T07:15:53","guid":{"rendered":"https:\/\/innovationm.co\/?p=7651"},"modified":"2023-03-09T12:45:53","modified_gmt":"2023-03-09T07:15:53","slug":"spread-and-rest-operator","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/","title":{"rendered":"Spread And Rest Operator"},"content":{"rendered":"<p>In <a href=\"https:\/\/www.geeksforgeeks.org\/javascript-tutorial\/\">Javascript, <\/a>both the <a href=\"https:\/\/www.geeksforgeeks.org\/javascript-spread-operator\/\">spread <\/a>and <a href=\"https:\/\/www.geeksforgeeks.org\/javascript-rest-operator\/\">rest <\/a><a href=\"https:\/\/www.geeksforgeeks.org\/javascript-spread-operator\/\">operators<\/a> have the same syntax which is three dots<strong>(\u2026)<\/strong> but they differ in their function. The main difference between them is that the spread operator expands the array into multiple elements while the resting operator<\/p>\n<p>Condenses them into a single element<\/p>\n<p><strong>Merge two arrays using the spread operator<\/strong><\/p>\n<p>A Spread operator can be used to merge multiple arrays containing one or more elements into a single array.<\/p>\n<p><img decoding=\"async\" class=\"alignnone  wp-image-7653\" src=\"https:\/\/innovationm.co\/wp-content\/uploads\/2023\/03\/b1-300x61.png\" alt=\"\" width=\"379\" height=\"77\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b1-300x61.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b1-768x156.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b1-624x127.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b1.png 1025w\" sizes=\"(max-width: 379px) 100vw, 379px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Copy array using the spread operator<\/strong><\/p>\n<p>The Spread operator is also used to create a copy of an array. In the following example when an element is pushed to \u201carr2\u201d it also updates the original array \u201carr1\u201d.To avoid this Spread operator is used to create a copy array to avoid updating the original array.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone  wp-image-7654\" src=\"https:\/\/innovationm.co\/wp-content\/uploads\/2023\/03\/b2-300x129.png\" alt=\"\" width=\"374\" height=\"161\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b2-300x129.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b2-1024x439.png 1024w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b2-768x329.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b2-624x267.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b2.png 1078w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Rest operator with function<\/strong><\/p>\n<p>The Spread operator allows the function to accept multiple arguments as an array. It is also used with destructuring to combine remaining elements into a single element.<\/p>\n<p><img decoding=\"async\" class=\"alignnone  wp-image-7655\" src=\"https:\/\/innovationm.co\/wp-content\/uploads\/2023\/03\/b3-300x71.png\" alt=\"\" width=\"363\" height=\"86\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b3-300x71.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b3-768x181.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b3-624x147.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b3.png 963w\" sizes=\"(max-width: 363px) 100vw, 363px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Rest operator with destructuring<\/strong><\/p>\n<p>Rest operator can also be used with destructuring as the last element to combine the remaining element of the array into a single array. In the following example \u201clocation\u201d will contain all the remaining elements of the array.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-7656\" src=\"https:\/\/innovationm.co\/wp-content\/uploads\/2023\/03\/b4-300x48.png\" alt=\"\" width=\"363\" height=\"58\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b4-300x48.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b4-768x123.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b4-624x100.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/b4.png 955w\" sizes=\"(max-width: 363px) 100vw, 363px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Javascript, both the spread and rest operators have the same syntax which is three dots(\u2026) but they differ in their function. The main difference between them is that the spread operator expands the array into multiple elements while the resting operator Condenses them into a single element Merge two arrays using the spread operator [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[256,360,71],"tags":[722,842,841,840],"class_list":["post-7651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java-application","category-javascript","category-mobile","tag-blog","tag-operators-in-java","tag-rest","tag-spread"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Spread And Rest Operator - InnovationM - Blog<\/title>\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.innovationm.com\/blog\/spread-and-rest-operator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spread And Rest Operator - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"In Javascript, both the spread and rest operators have the same syntax which is three dots(\u2026) but they differ in their function. The main difference between them is that the spread operator expands the array into multiple elements while the resting operator Condenses them into a single element Merge two arrays using the spread operator [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-09T07:15:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/Spread-and-Rest-Operator.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1689\" \/>\n\t<meta property=\"og:image:height\" content=\"950\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Spread And Rest Operator\",\"datePublished\":\"2023-03-09T07:15:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/\"},\"wordCount\":211,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Spread-and-Rest-Operator.png\",\"keywords\":[\"blog\",\"operators in java\",\"rest\",\"spread\"],\"articleSection\":[\"Java Application\",\"JavaScript\",\"Mobile\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/\",\"name\":\"Spread And Rest Operator - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Spread-and-Rest-Operator.png\",\"datePublished\":\"2023-03-09T07:15:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Spread-and-Rest-Operator.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Spread-and-Rest-Operator.png\",\"width\":1689,\"height\":950},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/spread-and-rest-operator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Spread And Rest Operator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spread And Rest Operator - InnovationM - Blog","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.innovationm.com\/blog\/spread-and-rest-operator\/","og_locale":"en_US","og_type":"article","og_title":"Spread And Rest Operator - InnovationM - Blog","og_description":"In Javascript, both the spread and rest operators have the same syntax which is three dots(\u2026) but they differ in their function. The main difference between them is that the spread operator expands the array into multiple elements while the resting operator Condenses them into a single element Merge two arrays using the spread operator [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/","og_site_name":"InnovationM - Blog","article_published_time":"2023-03-09T07:15:53+00:00","og_image":[{"width":1689,"height":950,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/Spread-and-Rest-Operator.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Spread And Rest Operator","datePublished":"2023-03-09T07:15:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/"},"wordCount":211,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/Spread-and-Rest-Operator.png","keywords":["blog","operators in java","rest","spread"],"articleSection":["Java Application","JavaScript","Mobile"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/","url":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/","name":"Spread And Rest Operator - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/Spread-and-Rest-Operator.png","datePublished":"2023-03-09T07:15:53+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/Spread-and-Rest-Operator.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/03\/Spread-and-Rest-Operator.png","width":1689,"height":950},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/spread-and-rest-operator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Spread And Rest Operator"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7651"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7652"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}