{"id":4191,"date":"2023-05-01T04:41:57","date_gmt":"2023-05-01T04:41:57","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4191"},"modified":"2023-06-10T11:30:04","modified_gmt":"2023-06-10T11:30:04","slug":"react-es6-tutorial-destructuring","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-es6-tutorial-destructuring\/","title":{"rendered":"React – ES6 Tutorial – Destructuring"},"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

Destructuring<\/h2>\n

To illustrate destructuring, we’ll make a sandwich. Do you take everything out of the refrigerator to make your sandwich? No, you only take out the items you would like to use on your sandwich.<\/p>\n

Destructuring is exactly the same. We may have an array or object that we are working with, but we only need some of the items contained in these.<\/p>\n

Destructuring makes it easy to extract only what is needed.<\/p>\n

\n

Destructing Arrays<\/h2>\n

Here is the old way of assigning array items to a variable:<\/p>\n

Example<\/h3>\n

Before:<\/p>\n

const vehicles = ['mustang', 'f-150', 'expedition'];\r\n\r\n\/\/ old way\r\nconst car = vehicles[0];\r\nconst truck = vehicles[1];\r\nconst suv = vehicles[2];<\/pre>\n
Here is the new way of assigning array items to a variable:<\/p>\n
\n
Example<\/h3>\n
With destructuring:<\/p>\n
const vehicles = ['mustang', 'f-150', 'expedition'];\r\n\r\nconst [car, truck, suv] = vehicles;<\/pre>\n
\n
When destructuring arrays, the order that variables are declared is important.<\/strong><\/span><\/p>\n<\/div>\n
If we only want the car and suv we can simply leave out the truck but keep the comma:<\/p>\n
const vehicles = ['mustang', 'f-150', 'expedition'];\r\n\r\nconst [car,, suv] = vehicles;<\/pre>\n
Destructuring comes in handy when a function returns an array:<\/p>\n
\n
Example<\/h3>\n
function calculate(a, b) {\r\n  const add = a + b;\r\n  const subtract = a - b;\r\n  const multiply = a * b;\r\n  const divide = a \/ b;\r\n\r\n  return [add, subtract, multiply, divide];\r\n}\r\n\r\nconst [add, subtract, multiply, divide] = calculate(4, 7);<\/pre>\n
Destructuring Objects<\/h2>\n
Here is the old way of using an object inside a function:<\/p>\n
\n
Example<\/h3>\n
Before:<\/p>\n
const vehicleOne = {\r\n  brand: 'Ford',\r\n  model: 'Mustang',\r\n  type: 'car',\r\n  year: 2021, \r\n  color: 'red'\r\n}\r\n\r\nmyVehicle(vehicleOne);\r\n\r\n\/\/ old way\r\nfunction myVehicle(vehicle) {\r\n  const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';\r\n}<\/pre>\n
Here is the new way of using an object inside a function:<\/p>\n
\n
Example<\/h3>\n
With destructuring:<\/p>\n
const vehicleOne = {\r\n  brand: 'Ford',\r\n  model: 'Mustang',\r\n  type: 'car',\r\n  year: 2021, \r\n  color: 'red'\r\n}\r\n\r\nmyVehicle(vehicleOne);\r\n\r\nfunction myVehicle({type, color, brand, model}) {\r\n  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';\r\n}<\/pre>\n
\n
Notice that the object properties do not have to be declared in a specific order.<\/strong><\/span><\/p>\n<\/div>\n
We can even destructure deeply nested objects by referencing the nested object then using a colon and curly braces to again destructure the items needed from the nested object:<\/p>\n
\n
Example<\/h3>\n
const vehicleOne = {\r\n  brand: 'Ford',\r\n  model: 'Mustang',\r\n  type: 'car',\r\n  year: 2021, \r\n  color: 'red',\r\n  registration: {\r\n    city: 'Houston',\r\n    state: 'Texas',\r\n    country: 'USA'\r\n  }\r\n}\r\n\r\nmyVehicle(vehicleOne)\r\n\r\nfunction myVehicle({ model, registration: { state } }) {\r\n  const message = 'My ' + model + ' is registered in ' + state + '.';\r\n}<\/pre>\n<\/div>\n<\/div>\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,515],"newstopic":[578],"class_list":{"0":"post-4191","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-variables","19":"newstopic-react"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4191","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=4191"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4191\/revisions"}],"predecessor-version":[{"id":4193,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4191\/revisions\/4193"}],"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=4191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=4191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=4191"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=4191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}