{"id":3321,"date":"2018-03-21T10:00:53","date_gmt":"2018-03-21T04:30:53","guid":{"rendered":"https:\/\/code4developers.com\/?p=3321"},"modified":"2023-10-16T00:05:31","modified_gmt":"2023-10-15T18:35:31","slug":"spread-syntax-in-javascript","status":"publish","type":"post","link":"https:\/\/code4developers.com\/spread-syntax-in-javascript\/","title":{"rendered":"Spread syntax (three dots) in JavaScript"},"content":{"rendered":"<p><strong>Spread syntax<\/strong> which is used by typing three dots (&#8230;) in JavaScript. It allows an array expression or string or anything which can be iterating to be expanded in places where zero or more arguments for function calls\u00a0or elements for array are expected. It can also be used for an object expression to be expanded in places where zero or more key-value pairs for object are expected.<!--more--><\/p>\n<p>Spread syntax can be used for:<\/p>\n<ul>\n<li>Array literals or string<\/li>\n<li>Function Calls<\/li>\n<li>Object literals (ECMAScript 2018)<\/li>\n<\/ul>\n<h4 id=\"how-to-use-spread-syntax-in-array-literals\">How to use Spread syntax in Array literals?<\/h4>\n<p>Let consider below code in which we have two arrays.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">var arr1 = [4,5]\r\nvar arr2 = [1,2,3,6,7]<\/pre>\n<p>Now here we want to merge values of &#8220;arr1&#8221; into the &#8220;arr2&#8221; after value &#8220;3&#8221; in &#8220;arr2&#8221;. To achieve this we used to follow below traditional way.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">var arr1 = [4,5]\r\nvar arr2 = [1,2,3,6,7]\r\narr2.splice.apply(arr2, [3, 0].concat(arr1));\r\nconsole.log(arr2);\r\n\r\n\/\/Output: [1, 2, 3, 4, 5, 6, 7]<\/pre>\n<p>Here <em><strong>Spread<\/strong><\/em> of ECMAScript 2015 comes in the picture which simplifies the above code and allow us to achieve above output very easily. Consider below code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">var arr1 = [4,5]\r\nvar arr2 = [1,2,3,...arr1,6,7]\r\nconsole.log(arr2);\r\n\r\n\/\/Output: [1,\u00a02,\u00a03,\u00a04,\u00a05,\u00a06,\u00a07]<\/pre>\n<p>Consider below experiment for easy array operations with Spread (three dots):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">\/\/Copying array\r\nvar arr = [1, 2, 3];\r\nvar arr2 = [...arr];\r\n\r\n\/\/Concatenate array\r\nvar arr1 = [0, 1, 2];\r\nvar arr2 = [3, 4, 5];\r\narr1 = [...arr1, ...arr2];\r\n<\/pre>\n<h4 id=\"how-to-use-spread-syntax-in-function\">How to use Spread\u00a0syntax in Function?<\/h4>\n<p>In function if you want to pass an array as an argument you have to use Function.Prototype.apply.<\/p>\n<p>Let&#8217;s consider below code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">function addition(num1,num2) {\r\n  console.log(num1 + num2);\r\n}\r\naddition.apply(null,[10,20]);\r\n\r\n\/\/Output: 30<\/pre>\n<p>Using Spread above can be achieved with<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">function addition(num1,num2) {\r\n  console.log(num1 + num2);\r\n}\r\naddition(...[10,20]);\r\n\r\n\/\/Output: 30<\/pre>\n<p>Any argument in the function can be passed using spread<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">function addition(num1,num2, num3, num4) {\r\n  console.log(num1 + num2 + num3 + num4);\r\n}\r\naddition(5,...[10,20],5);\r\n\/\/Output: 40<\/pre>\n<p>Using spread we can pass an array to a constructor where we can&#8217;t pass simple array to call constructor with new<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">var date = new Date(...[2018, 03, 18]);<\/pre>\n<h4 id=\"how-to-use-spread-syntax-with-object\">How to use Spread\u00a0syntax with object?<\/h4>\n<p>Before using Spread syntax with objects make sure your browser supports ECMAScript 2018 features.<\/p>\n<p>If you are doing Shallow cloning or merging of the objects Spread syntax can be useful<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">var res1 = { name: 'yatendra', marks1: 35 };\r\nvar res2 = { name: 'yatendra', marks2: 38 };\r\n\r\nvar cloneObj = { ...res1 };\r\n\/\/Output: { name: \"yatendra\", marks1: 35 }\r\n\r\n\r\nvar mergeObj = { ...res1, ...res2 };\r\n\r\n\/\/Output: { name: 'yatendra', marks1: 35, marks2: 38 }<\/pre>\n<h4 id=\"summary\">Summary<\/h4>\n<p>As we have discussed Spread is used only with iterable, so if you will try below code it will throw an exception<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"git\">var obj = {'key': 'value'};\r\nvar arr = [...obj]; \r\n\/\/Output: TypeError: obj is not iterable<\/pre>\n<p><a href=\"https:\/\/code4developers.com\/category\/javascript\/\">Interested in JavaScript? Click here to read more JavaScript articles in Code4Developers<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Spread syntax which is used by typing three dots (&#8230;) in JavaScript. It allows an array expression or string or anything which can be iterating to be expanded in places&hellip;<\/p>\n","protected":false},"author":4,"featured_media":3127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[22,780,779,781],"powerkit_post_featured":[],"class_list":{"0":"post-3321","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript","9":"tag-spread","10":"tag-spread-syntax","11":"tag-three-dots"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Rz","jetpack-related-posts":[{"id":3106,"url":"https:\/\/code4developers.com\/javascript-template-literals\/","url_meta":{"origin":3321,"position":0},"title":"Javascript: What Are Template Literals?","author":"Arif Khoja","date":"September 30, 2017","format":false,"excerpt":"ES6 introduced two types of literals: Template Literals and Tagged Template Literals to tag Template Literals. In this post, we cover both of them in depth! In ES6, two types of literals were introduced: Template Literals for string concatenation and expression embedding in a string Tagged Template Literals to tag\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/thumb-1-e1498942297714.png?fit=240%2C269&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2662,"url":"https:\/\/code4developers.com\/ecmascript-5-strict-mode-json\/","url_meta":{"origin":3321,"position":1},"title":"ECMAScript5 Strict Mode, JSON, and More&#8230;.","author":"Arif Khoja","date":"June 25, 2017","format":false,"excerpt":"Introduction There are a number of other new features and APIs that need attention, as well. The largest of which are\u00a0Strict Mode\u00a0and native\u00a0JSON\u00a0support. Strict Mode Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a \u201cstrict\u201d operating context. This\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6955,"url":"https:\/\/code4developers.com\/transpiling-in-javascript\/","url_meta":{"origin":3321,"position":2},"title":"Transpiling in JavaScript","author":"Yatendrasinh Joddha","date":"April 29, 2020","format":false,"excerpt":"Transpiling is a term used for taking source code written in one language and converting or transforming it into another language. All the browsers does not support JavaScript code written in ES6. It is a big challenge for every new gen developers. Now converting this ES6 code to ES5 is\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2462,"url":"https:\/\/code4developers.com\/local-storage-session-storage\/","url_meta":{"origin":3321,"position":3},"title":"Local Storage and Session Storage","author":"Yatendrasinh Joddha","date":"May 22, 2017","format":false,"excerpt":"What is local Storage? local storage is property for accessing Storage object, which is used to store and retrieve data from user\u2019s browser. It is accessible only at client side not at server side like cookie. Data stored in localStorage is accessible thought all pages under same domain, until user\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3165,"url":"https:\/\/code4developers.com\/pug\/","url_meta":{"origin":3321,"position":4},"title":"Pug","author":"Arif Khoja","date":"December 15, 2017","format":false,"excerpt":"Pug is a template language for Javascript that I have grown to enjoy a lot. My impression is that a lot of people use it, if they use a template engine for server side rendering using Node. The big question is if you need it or not in 2017. I\u2026","rel":"","context":"In \"Node\"","block_context":{"text":"Node","link":"https:\/\/code4developers.com\/tag\/node\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/PugJs.png?fit=225%2C225&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3230,"url":"https:\/\/code4developers.com\/whats-new-ecmascript-2018\/","url_meta":{"origin":3321,"position":5},"title":"What\u2019s new in ECMAScript 2018","author":"Arif Khoja","date":"February 16, 2018","format":false,"excerpt":"Four new feature proposals for the specification underlying JavaScript are finalized and four others are under consideration ECMAScript, the standard specification underlying JavaScript, is on track for a new release, likely in June. So far, four proposals have been finalized for inclusion in the ECMAScript 2018 specification, said Zibi Braniecki,\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"ecma script","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/ecma.png?fit=400%2C277&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3321"}],"version-history":[{"count":11,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3321\/revisions"}],"predecessor-version":[{"id":3401,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3321\/revisions\/3401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3321"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}