{"id":689,"date":"2024-01-17T18:58:00","date_gmt":"2024-01-17T18:58:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=689"},"modified":"2024-02-05T10:39:44","modified_gmt":"2024-02-05T10:39:44","slug":"destructuring-in-javascript","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/destructuring-in-javascript\/","title":{"rendered":"Destructuring in JavaScript"},"content":{"rendered":"\n<p>Destructuring in JavaScript is a feature that allows you to extract values from arrays or properties from objects and assign them to variables in a more concise and readable way. It provides a convenient syntax for unpacking values from data structures.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Array Destructuring:<\/h3>\n\n\n\n<p>You can extract values from arrays and assign them to variables using square brackets <code>[]<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numbers = &#91;1, 2, 3, 4, 5];\n\nlet &#91;first, second] = numbers;\nconsole.log(first);  \/\/ Output: 1\nconsole.log(second); \/\/ Output: 2<\/code><\/pre>\n\n\n\n<p>You can also skip elements by using commas without a corresponding variable.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let &#91;first, , third] = numbers;\nconsole.log(first);  \/\/ Output: 1\nconsole.log(third);  \/\/ Output: 3<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Object Destructuring:<\/h3>\n\n\n\n<p>You can extract values from objects and assign them to variables using curly braces <code>{}<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let person = { firstName: 'John', lastName: 'Doe' };\n\nlet { firstName, lastName } = person;\nconsole.log(firstName); \/\/ Output: 'John'\nconsole.log(lastName);  \/\/ Output: 'Doe'<\/code><\/pre>\n\n\n\n<p>You can also assign the extracted values to variables with different names.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let { firstName: fName, lastName: lName } = person;\nconsole.log(fName); \/\/ Output: 'John'\nconsole.log(lName); \/\/ Output: 'Doe'<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Default Values:<\/h3>\n\n\n\n<p>You can provide default values for variables in case the value extracted is <code>undefined<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numbers = &#91;1, 2];\n\nlet &#91;first, second, third = 3] = numbers;\nconsole.log(first);  \/\/ Output: 1\nconsole.log(second); \/\/ Output: 2\nconsole.log(third);  \/\/ Output: 3<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Nested Destructuring:<\/h3>\n\n\n\n<p>You can destructure nested arrays and objects.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let data = {\n  person: {\n    firstName: 'John',\n    lastName: 'Doe',\n    age: 30\n  }\n};\n\nlet { person: { firstName, lastName, age } } = data;\nconsole.log(firstName); \/\/ Output: 'John'\nconsole.log(lastName);  \/\/ Output: 'Doe'\nconsole.log(age);       \/\/ Output: 30<\/code><\/pre>\n\n\n\n<p>Destructuring provides a concise and expressive way to work with arrays and objects in JavaScript, making your code more readable and maintainable. It&#8217;s a powerful feature that is commonly used in modern JavaScript development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Destructuring in JavaScript is a feature that allows you to extract values from arrays or properties from objects and assign<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-689","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=689"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/689\/revisions"}],"predecessor-version":[{"id":690,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/689\/revisions\/690"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}