{"id":2132,"date":"2021-08-26T18:16:30","date_gmt":"2021-08-26T18:16:30","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2132"},"modified":"2021-09-14T07:50:23","modified_gmt":"2021-09-14T07:50:23","slug":"rest-vs-spread-operators-the-three-dot-notations-in-javascript","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/ru\/rest-vs-spread-operators-the-three-dot-notations-in-javascript\/","title":{"rendered":"Rest vs. Spread Operators (The three-dot notations in Javascript)"},"content":{"rendered":"\n<p>There are two three-dot (&#8230;) operators in JavaScript: Rest and Spread operator, which was both introduced as part of the ES6 update to the JavaScript language. They\u2019re easily confused with one another because they have the same symbol. But, they\u2019re not the same. The difference is in the context and usage.&nbsp;<\/p>\n\n\n\n<h1>The Rest Operator<\/h1>\n\n\n\n<p>You can think of the rest operator as a collector. It gathers several values into an array.&nbsp;<\/p>\n\n\n\n<p>It is used to pass an indefinite amount of arguments into a function. This comes in handy when you\u2019re not sure of the number of arguments a function would receive when it is invoked.&nbsp;<\/p>\n\n\n\n<p>For example, assuming you want to write a function that takes in any quantity of numbers and sums it all together with a random number. You have no idea the quantity of numbers the function will receive, so you can use a <code>rest <\/code>operator.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const calcTotal = (randomNo, ...numbers) =&gt; {\n     let sumTotal= 0;\n     for (let number of numbers) {\n         sumTotal += number\n     }\n    console.log(numbers)\n    return sumTotal + randomNo;\n}\n\ncalcTotal(5, 10, 13, 7, 8, 17, 89, 10) \n\/\/numbers [10, 13, 7, 8, 17, 89, 10]\n\/\/ Outputs 159\n\ncalcTotal (10, 7,9,8,3,24,76,46,54,3,2,69,16, 19)\n\/\/numbers [7,9,8,3,24,76,46,54,3,2,69,16, 19]\n\/\/Outputs 346\n<\/code><\/pre>\n\n\n\n<p>As you can see, the first argument is assigned to the <code>randomNo<\/code> parameter while all the other arguments are gathered into the <code>numbers<\/code> array using the rest operator.<\/p>\n\n\n\n<h1>The Spread Operator<\/h1>\n\n\n\n<p>The Spread operator is the exact opposite of the rest operator. You can think of it as a distributor. Unlike the Rest operator, it distributes or unpacks the entries of an iterable entity (strings, arrays, objects, e.t.c) into standalone values.<\/p>\n\n\n\n<p>For example, imagine that you want to pass each number contained in the <code>arr<\/code> array into the <code>sum <\/code>function below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const arr = [100, 67, 8]\n\nconst sum = (x,y,z) =&gt; {\n      let total = x + y + z;\n      return total\n}<\/code><\/pre>\n\n\n\n<p>As you can see, the <code>sum <\/code>function expects individual arguments, not an array. In this case, you can use the Spread operator to unpack the elements of the <code>arr <\/code>array into standalone variables.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sum (...arr)\n\/\/ Output 175<\/code><\/pre>\n\n\n\n<p>You can also use the Spread operator to combine the elements of different arrays into one:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const arr1 = [8,10, 6]\nconst arr2 = [7,9,11]\n\nconst mergedArr = [...arr1, ...arr2]\n<\/code><\/pre>\n\n\n\n<h1>An easier way to distinguish<\/h1>\n\n\n\n<ol><li>When (&#8230;) occurs at the end of a function declaration or expression, then it is a Rest operator.<\/li><li>When (&#8230;) occurs in a function invocation or outside a function, then it&#8217;s a spread operator.<\/li><\/ol>\n\n\n<p><span style=\"color: #ff0000\">Blog Credits: Linda Ikechukwu<\/span><\/p>\n<div>\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<br \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-2189\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg\" alt=\"\" width=\"150\" height=\"209\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg 715w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot-585x819.jpeg 585w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>There are two three-dot (&#8230;) operators in JavaScript: Rest and Spread operator, which was both introduced as part of the ES6 update to the JavaScript language. They\u2019re easily confused with&hellip;<\/p>\n","protected":false},"author":10,"featured_media":2133,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[31,171,173,172,174,175],"better_featured_image":{"id":2133,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":3000,"height":2000,"file":"2021\/08\/Embold-Blog-Rest.jpg","sizes":{"thumbnail":{"file":"Embold-Blog-Rest-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-150x150.jpg"},"medium_large":{"file":"Embold-Blog-Rest-768x512.jpg","width":768,"height":512,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-768x512.jpg"},"penci-full-thumb":{"file":"Embold-Blog-Rest-1170x780.jpg","width":1170,"height":780,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-1170x780.jpg"},"penci-slider-thumb":{"file":"Embold-Blog-Rest-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-1170x663.jpg"},"penci-magazine-slider":{"file":"Embold-Blog-Rest-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-780x516.jpg"},"penci-slider-full-thumb":{"file":"Embold-Blog-Rest-1920x800.jpg","width":1920,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-1920x800.jpg"},"penci-single-full":{"file":"Embold-Blog-Rest-1920x1280.jpg","width":1920,"height":1280,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-1920x1280.jpg"},"penci-thumb":{"file":"Embold-Blog-Rest-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-585x390.jpg"},"penci-masonry-thumb":{"file":"Embold-Blog-Rest-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-585x390.jpg"},"penci-thumb-square":{"file":"Embold-Blog-Rest-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-585x585.jpg"},"penci-thumb-vertical":{"file":"Embold-Blog-Rest-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-480x650.jpg"},"penci-thumb-small":{"file":"Embold-Blog-Rest-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-263x175.jpg"},"jr_insta_square":{"file":"Embold-Blog-Rest-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2132,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/08\/Embold-Blog-Rest.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"ru","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2132"}],"collection":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/comments?post=2132"}],"version-history":[{"count":3,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2132\/revisions"}],"predecessor-version":[{"id":2196,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2132\/revisions\/2196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/media\/2133"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/media?parent=2132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/categories?post=2132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/tags?post=2132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}