{"id":4194,"date":"2023-05-01T05:01:09","date_gmt":"2023-05-01T05:01:09","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4194"},"modified":"2023-06-10T11:29:58","modified_gmt":"2023-06-10T11:29:58","slug":"react-es6-tutorial-spread-operator","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-es6-tutorial-spread-operator\/","title":{"rendered":"React – ES6 Tutorial – Spread Operator"},"content":{"rendered":"

What is ES6?<\/em><\/h2>\n

ES6 stands for ECMAScript 6.<\/em><\/p>\n

ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.<\/em><\/p>\n

Spread Operator<\/h2>\n

The JavaScript spread operator (...<\/code>) allows us to quickly copy all or part of an existing array or object into another array or object.<\/p>\n

\n

Example<\/h3>\n
const numbersOne = [1, 2, 3];\r\nconst numbersTwo = [4, 5, 6];\r\nconst numbersCombined = [...numbersOne, ...numbersTwo];<\/pre>\n
The spread operator is often used in combination with destructuring.<\/p>\n
\n
Example<\/h3>\n
Assign the first and second items from\u00a0numbers<\/code>\u00a0to variables and put the rest in an array:<\/p>\n
const numbers = [1, 2, 3, 4, 5, 6];\r\n\r\nconst [one, two, ...rest] = numbers;<\/pre>\n
We can use the spread operator with objects too:<\/p>\n
\n
Example<\/h3>\n
Combine these two objects:<\/p>\n
const myVehicle = {\r\n  brand: 'Ford',\r\n  model: 'Mustang',\r\n  color: 'red'\r\n}\r\n\r\nconst updateMyVehicle = {\r\n  type: 'car',\r\n  year: 2021, \r\n  color: 'yellow'\r\n}\r\n\r\nconst myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}<\/pre>\n
Notice the properties that did not match were combined, but the property that did match,\u00a0color<\/code>, was overwritten by the last object that was passed,\u00a0updateMyVehicle<\/code>. The resulting color is now yellow.<\/strong><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
What is ES6? ES6 stands for ECMAScript 6. ECMAScript was created to <\/a><\/p>\n","protected":false},"author":1,"featured_media":4376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[508,12],"tags":[516,514,517,511,510,491,509,513,512,518,515],"newstopic":[578],"class_list":{"0":"post-4194","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"category-web-development","9":"tag-array-methods","10":"tag-arrow-functions","11":"tag-destructuring","12":"tag-ecmascript-6","13":"tag-es6-tutorial","14":"tag-javascript","15":"tag-react","16":"tag-react-classes","17":"tag-react-tutorial","18":"tag-spread-operator","19":"tag-variables","20":"newstopic-react"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=4194"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4194\/revisions"}],"predecessor-version":[{"id":4196,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4194\/revisions\/4196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4376"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=4194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=4194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=4194"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=4194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}