Write Clean Code Using JavaScript Object Destructuring

Write Clean Code Using JavaScript Object Destructuring

In this article, I'm going to compare traditional and new methods using ES6's destructuring assignment syntax. Write Clean Code Using JavaScript Object Destructuring. Comparing traditional and ES6 destructuring to unpack values in JavaScript.

Comparing traditional and ES6 destructuring to unpack values in JavaScript

In this article, I’m going to compare traditional and new methods using ES6's destructuring assignment syntax. This syntax allows you to unpack values from complex objects and arrays. This can be used to write clean code and will definitely save you some lines.

First, we will discuss object destructuring. Then we’ll move on to arrays.

“The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.” —  MDN Web Docs

Object Destructuring

Let’s make an example object of a customer. The customer object has properties like name and nested ones like address:

const customer = {
     name: 'Sherlock',
     email: '[email protected]',
     age: 34,
     address: {
         streetNo: '221b Baker Street',
         city: 'London',
         country: 'UK' 
    }
}

customer object

javascript nodejs react node

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Node.JS vs React.JS | Node.Js Vs React.Js Comparison | What to Choose

Node.JS vs React.JS: Which one to choose? See the detailed comparison between these two most popular website development frameworks.

Node.JS vs React.JS | Node.Js Vs React.Js Comparison | What to Choose

Node.JS vs React.JS: Which one to choose? See the detailed comparison between these two most popular website development frameworks.

Cezerin3 is React and Node.js based eCommerce Platform

Cezerin3 is React and Node.js based eCommerce platform. React Shopping Cart. "All In One" App: Cezerin API + Cezerin Storefront + Cezerin Dashboard.Cezerin is React and Node.js based eCommerce platform. React Shopping Cart.

Setting up a JavaScript project for beginners (Prettier, Node, NPM, Parcel, ESLint, React, Vue)

Setting up a JavaScript project for beginners (Prettier, node, npm, Parcel, ESLint, React, Vue). We walk through how to set up several tools that will help you during development. How to set up the Prettier extension in Visual Studio Code to automatically format your code. We learn how to use Parcel to generate a live preview of your website while you are coding. We walk through how to set up the ESLint extension in VS Code that will give you coding tips. In the last part of the tutorial, we also go through how to set up a React and a Vue.js project from scratch in an easy way.