{"id":316,"date":"2020-08-17T19:18:41","date_gmt":"2020-08-17T19:18:41","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=316"},"modified":"2020-08-20T09:13:55","modified_gmt":"2020-08-20T09:13:55","slug":"spread-operator-in-javascript","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/spread-operator-in-javascript\/","title":{"rendered":"Spread Operator in JavaScript"},"content":{"rendered":"\n<p>The spread operator <code>(...)<\/code> is a new powerful feature introduced in JavaScript ES6. It allows expansion of iterables such as  arrays, objects, and function\u2019s arguments in place where zero or more elements (for array), zero or more key-value pairs (for object literals) and zero or more arguments  (for function calls) are expected.  In short the spread operator expands an iterable object into the list of arguments. <\/p>\n\n\n\n<p>Example: Spreading array into arguments<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function sum(x, y, z) {\n  return x + y + z;\n}\n\/\/ Pass each element of array as argument\nsum(...[1,2,3]) \/\/ Output: 6\n\nfunction someFun(x, ...y) {\n  \/\/ y is an Array\n  return x * y.length;\n}\nsomeFun(2, \"hello\", \"world\") \/\/ Output: 4<\/code><\/pre>\n\n\n\n<h1 class=\"entry-title post-title-big wp-block-heading\">Other Usage of Spread Operator<\/h3>\n\n\n\n<p><strong>Combine or Merge Arrays and Objects:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr1 = [1, 2, 3];\nlet arr2 = [4, 5];\nlet combinedArr = [...arr1, ...arr2];\nconsole.log(combinedArr) \/\/Output: [1, 2, 3, 4, 5]\n\nlet obj1 = {\"name\": \"Sam\", \"age\": 25};\nlet obj2 = {\"city\": \"Bengaluru\"};\nlet combinedObj = {...obj1, ...obj2};\nconsole.log(combinedObj) \/\/ {\"name\": \"Sam\", \"age\": 25, \"city\": \"Bengaluru\"}\n\n<\/code><\/pre>\n\n\n\n<p><strong>Clone or Copy Arrays and Objects:<\/strong><\/p>\n\n\n\n<p>In JavaScript every non-primitive entity is an&nbsp;<code>Object<\/code>, which means that arrays are also objects. You should note that objects are copied as a reference and not as value. So, if you do any changes in copied object, the changes will reflect in the original object too.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr1 = [1, 2, 3];\nlet arr2 = arr1; \/\/ Copy\narr2.push(4);\nconsole.log(arr1) \/\/Output: [1, 2, 3, 4]\nconsole.log(arr2) \/\/Output: [1, 2, 3, 4] <\/code><\/pre>\n\n\n\n<p>We can resolve this issue using spread operator as shown in the examples below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr1 = [1, 2, 3];\nlet arr2 = [...arr1]; \/\/ Clone arr1\narr1.push(4);\nconsole.log(arr1) \/\/Output: [1, 2, 3, 4]\nconsole.log(arr2) \/\/Output: [1, 2, 3] \n\nlet obj1 = {\"name\": \"Sam\", \"age\": 25};\nlet obj2 = {...obj1}; \/\/ Clone obj1\nobj1.city = \"Bengaluru\";\n\nconsole.log(obj1) \/\/Output: {\"name\": \"Sam\", \"age\": 25, \"city\": \"Bengaluru\"}\nconsole.log(obj2) \/\/Output: {\"name\": \"Sam\", \"age\": 25};\n<\/code><\/pre>\n\n\n\n<p>Note that spread operator does shallow copy of object and not deep copy. This means nested object cannot be copied using <code>... operator<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The spread operator (&#8230;) is a new powerful feature introduced in JavaScript ES6. It allows expansion of iterables such as arrays, objects, and function\u2019s arguments in place where zero or&nbsp;[ &hellip; ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[145,143,142,144],"class_list":["post-316","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-how-to-use-spread-operator-in-javascript","tag-spread-operator-example","tag-spread-operator-in-javascript","tag-using-js-spread-operator","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":16,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/316\/revisions"}],"predecessor-version":[{"id":349,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/316\/revisions\/349"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}