This content originally appeared on DEV Community and was authored by Naftali Murgor
Introduction
In this blog article, we shall learn about Object destructing in JavaScript. Object destructuring syntax was introduced in ES6 to make accessing Object properties much easier and cleaner
Object destructing
In pre-ES6, normally you'd read object properties and store the values associated to these properties in a variable like this:
// some code omitted
const result = {
userId: 'dummy_id_001`,
username: 'foo_bar'
avatar: 'https://gravatar/xrkpxys/k1szh.png',
accent: '#fff'
}
// reading a few properties off this object literal: pre-es6
var username = result.username
var accent = result.accent
In ES6, the above becomes:
// some code omitted
const result = {
userId: 'dummy_id_001`,
username: 'foo_bar'
avatar: 'https://gravatar/xrkpxys/k1szh.png',
accent: '#fff'
}
// reading a few properties off this object literal: pre-es6
let {username, accent, userId} = result
// now use username, accent as normal variables
This is useful especially if you need to read more than one property from the same object.
Summary
Object destructuring syntax provides a cleaner way of accessing more than one property off an object literal.
Use object destructuring when accessing more than one property of an object and pre-ES6 syntax(using the "dot" operator) when accessing only one object.
// possible code ommitted
const username = result.username // OK for single property
const {accent, avatar, userId} = result // use object destructing
Found this article helpful? You may follow my twitter handle @nkmurgor where I tweet about interesting topics on web development.
This content originally appeared on DEV Community and was authored by Naftali Murgor
Naftali Murgor | Sciencx (2022-01-31T20:19:50+00:00) ES6: Object destructing. Retrieved from https://www.scien.cx/2022/01/31/es6-object-destructing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.