DEV Community

Cover image for JavaScript Destructuring Assignment - 1
Bello Osagie
Bello Osagie

Posted on • Edited on

4 1

JavaScript Destructuring Assignment - 1


In the previous article, we've seen how to extract property values from an object and store them as variables.

const person = {
  name: 'Bello',
  age: 27,
  size: {
    height: 6.7,
    weight: 220
  }
};

const heightSize = person.size.height;
// const weightSize = person.size.weight;

console.log(`${person.name} is ${heightSize}" tall.`);
Enter fullscreen mode Exit fullscreen mode

There's a technique called destructured assignment that easily extracts properties from an object.

Syntax:

{ key } = obj;
Enter fullscreen mode Exit fullscreen mode

See the example below:

const person = {
  name: 'Bello',
  age: 27,
  size: {
    height: 6.7,
    weight: 220
  }
};

const { name } = person;
const { age } = person;

console.log(`${name} is ${age} years old.`);
Enter fullscreen mode Exit fullscreen mode

Multiple property names in the same object (above example) can be accessed as shown below:

const { name, age } = person;
console.log(`${name} is ${age} years old.`);
Enter fullscreen mode Exit fullscreen mode

To extract a nested object property, the syntax is shown below:

Syntax:

{ keyN } = globalObj.objkey1.objkey2...objkeyN;
Enter fullscreen mode Exit fullscreen mode

See the example below:

const person = {
  name: 'Bello',
  age: 27,
  size: {
    height: 6.7,
    weight: 220
  }
};

const { name } = person;
// const { height } = person.size;
const { weight } = person.size;

console.log(`${name} weighs ${weight}lbs.`);
Enter fullscreen mode Exit fullscreen mode

See more examples below:

let a, b, c = 4, d = 8; // a = 4, b = 4, c = 4, d = 8
[ a, b = 6 ] = [ 2 ]; // a = 2, b = 6

[ c, d ] = [ d, c ] // [ 8, 4 ] => c = 8, d = 4

let x, y;
( { x, y } = { x: 'Hello ', y: 'Bello' } );

console.log(x + y); // Hello Bello

let person = { name: 'Bello', isTrue: true }
let { name: lastName, isTrue: t } = person;

console.log(lastName); // Bello
/* console.log(name); // ReferenceError: name is not defined */

let user = { lName: 'Bello', id: '3kwe9i' };
let { lName = 'Doe', isTrue = false } = user;

console.log(lName); // Bello
console.log(isTrue); // false
Enter fullscreen mode Exit fullscreen mode

Happy coding!


Buy me a Coffee


TechStack Media | Domain

  • Purchase a .com domain name as low as $9.99.
  • Purchase a .net domain name as low as $12.99.
  • Get cheaper domain names as low a $3.
  • Build a website with ease.

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay