What are the differences between destructuring and spread in JavaScript?

What are the differences between destructuring and spread in JavaScript?

Destructuring is used to unpack values from arrays or properties from objects into distinct variables, while spread syntax allows you to expand elements of an iterable (like an array) into individual elements. They serve different purposes but can be used together.

Can you give me an example of destructuring?

Sure! For example, if you have an object like const person = { name: 'Alice', age: 25 };, you can destructure it like this: const { name, age } = person; This assigns 'Alice' to name and 25 to age.

And what about spread syntax?

Spread syntax can be used to create a new array or object. For instance, if you have an array const arr = [1, 2, 3];, you can create a new array with spread like this: const newArr = [...arr, 4, 5]; This results in newArr being [1, 2, 3, 4, 5].

Can they be used together?

Yes, they can! For example, you can destructure while using spread: const arr = [1, 2, 3]; const [first, ...rest] = arr; Here, first will be 1 and rest will be [2, 3].