Search⌘ K
Home
Courses
JavaScript Fundamentals Before Learning React

Object Destructuring & Spread Operators

Explore how to use JavaScript object destructuring and spread operators to simplify access and manipulation of state and props. Understand their benefits in array and object operations, cloning, and combining, essential for efficient React component coding.

We'll cover the following...

What is Destructuring?

Another language feature introduced in JavaScript is called Object Destructuring. It’s often the case that you have to access plenty of properties from your state or props in your component. Rather than assigning them to a variable one by one, you can use destructuring assignment in JavaScript. See the following example for better understanding:

Assume there is an object named student and you want to extract its properties, one way to do this is:

Javascript (babel-node)
const student = {
  ID: '21',
  name: 'Jhon',
  GPA: '3.0',
};
const id = student.ID;
const name = student.name;
const GPA = student.GPA;
console.log(id);
console.log(name);
console.log(GPA);
...