{"id":1594,"date":"2023-10-06T05:00:00","date_gmt":"2023-10-06T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1594"},"modified":"2023-09-29T14:38:17","modified_gmt":"2023-09-29T21:38:17","slug":"object-destructuring-with-javascript","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/object-destructuring-with-javascript\/","title":{"rendered":"Object destructuring with JavaScript"},"content":{"rendered":"\n

Here is something I see very often while reviewing Angular code for the Angular certification program<\/a>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

While the above code works, it is very lengthy and repetitive. It also increases your code base’s size, negatively impacting performance<\/a>. Instead, we can use a modern JavaScript syntax introduced with ES6\/ES2015 called object destructuring:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The above line of code does the same as the three previous lines. What if we want the local variable to have a different name than the original property? Say we want to name our new variable homeAddress<\/code> instead of address<\/code>. We can do it like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

What if we want those variables to have a default value in case they are not defined in this.user<\/code>? We can do that too:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Now you know everything you need about object destructuring. <\/p>\n","protected":false},"excerpt":{"rendered":"

Here is something I see very often while reviewing Angular code for the Angular certification program: While the above code works, it is very lengthy and repetitive. It also increases your code base’s size, negatively impacting performance. Instead, we can use a modern JavaScript syntax introduced with ES6\/ES2015 called object destructuring: The above line of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-1594","post","type-post","status-publish","format-standard","hentry","category-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1594"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1594\/revisions"}],"predecessor-version":[{"id":1599,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1594\/revisions\/1599"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}