{"id":351,"date":"2023-08-09T11:50:22","date_gmt":"2023-08-09T17:50:22","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=351"},"modified":"2023-08-09T11:53:23","modified_gmt":"2023-08-09T17:53:23","slug":"difference-between-spread-and-rest-operators","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/difference-between-spread-and-rest-operators\/","title":{"rendered":"Difference between spread and rest operators"},"content":{"rendered":"\n<p>Explanation:<\/p>\n\n\n\n<ul>\n<li>spread operator is used to:\n<ul>\n<li>spread elements from an iterable into various contexts (arrays, objects, or function calls)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>rest operator is used:\n<ul>\n<li>gather multiple function arguments into an array<\/li>\n\n\n\n<li>collect remaining elements when destructuring arrays<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>&#8220;spread&#8221; and &#8220;rest&#8221; are often used interchangeably<\/li>\n\n\n\n<li>the context determines functionality<\/li>\n<\/ul>\n\n\n\n<p>examples as follows:<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Spread Operator (<code>...<\/code>)<\/mark><\/strong><\/p>\n\n\n\n<p>used to spread the elements of an iterable (for example an array, string, object) into a new array, object, or function call. <\/p>\n\n\n\n<p>short terms: <strong>unpacks the elements of the iterable.<\/strong><\/p>\n\n\n\n<p>Some Examples as follows:<\/p>\n\n\n\n<ol>\n<li><strong>Spreading Arrays:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>const numbers = &#91;4, 6, 7];\nconst newArray = &#91;...numbers, 4, 5]; \/\/ Creates a new array &#91;4, 6, 7, 4, 5]<\/code><\/pre>\n\n\n\n<ol start=\"2\">\n<li><strong>Spreading Objects:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code has-very-light-gray-to-cyan-bluish-gray-gradient-background has-background\"><code>const person = { name: \"Amparo\", age: 200 };\nconst newPerson = { ...person, city: \"\" }; \n\/\/ Creates a new object { name: \"Amparo\", age: 200 , city: \"hhjd-23\" }<\/code><\/pre>\n\n\n\n<ol start=\"3\">\n<li><strong>Spreading Function Arguments:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>function add(x, y) {\n    return x + y;\n}\n\nconst numbers = &#91;5, 6];\nconst sum = add(...numbers);\n\/\/ Equivalent to add(5, 6)<\/code><\/pre>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Rest Operator (<code>...<\/code>):<\/mark><\/strong><\/p>\n\n\n\n<p>The rest operator is used to gather a variable number of arguments into an array. It collects the remaining arguments into an array, which can then be manipulated as needed.<\/p>\n\n\n\n<ol>\n<li><strong>Gathering Function Arguments:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>function sum(...numbers) {\n    return numbers.reduce((total, item) => total + item, 0);\n}\n\n\/\/ returns the sum of all arguments: 19\nconst result = sum(5, 3, 5, 6);\n<\/code><\/pre>\n\n\n\n<ol start=\"2\">\n<li><strong>Rest Parameter in Destructuring:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#91;first, ...rest] = &#91;1, 2, 3, 4];\nconsole.log(first); \/\/ 1 (the first one)\nconsole.log(rest); \/\/ &#91;2, 3, 4] (the rest)<\/code><\/pre>\n\n\n\n<ol start=\"3\">\n<li><strong>Rest in Function Parameters:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background:linear-gradient(90deg,rgb(238,238,238) 91%,rgb(169,184,195) 100%)\"><code>function printArgs(first, ...rest) {\n    console.log(first);\n    console.log(rest); \n}\n\nprintArgs(6, 2, 8, 3);\n\/\/ 6 (the first one)\n\/\/ &#91;2, 8, 3] (the rest)<\/code><\/pre>\n\n\n\n<p>that&#8217;s all, enjoy!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explanation: examples as follows: Spread Operator (&#8230;) used to spread the elements of an iterable (for example an array, string, object) into a new array, object, or function call. short terms: unpacks the elements of the iterable. Some Examples as follows: Rest Operator (&#8230;): The rest operator is used to gather a variable number of [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":249,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[36,41,1,32,35,45,49,40],"tags":[],"_links":{"self":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/351"}],"collection":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/comments?post=351"}],"version-history":[{"count":8,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/351\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/351\/revisions\/361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/249"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}