How to do Object Destructuring and Spread in JavaScript

Object destructuring is a syntax that extracts properties from an object and binds them to local variables in a single statement. Instead of writing separate lines to access each property, you declare all the variables you need on the left side of an assignment inside curly braces. The property names in the curly braces must match the property names of the object on the right side.

If you want the local variable to have a different name than the object property, use a colon inside the destructuring pattern. Write the property name you want to extract, a colon, and then the variable name you want to bind it to. This allows you to avoid naming conflicts with existing variables or to use more descriptive names in the current context.

If a property might not exist on the object, provide a default value using an equals sign inside the destructuring pattern. If the property is undefined in the object, the variable receives the default value instead. If the property exists with any value including null or zero, the actual value is used and the default is ignored.

Destructuring works on nested objects by placing another destructuring pattern as the value in the outer pattern. This lets you extract deeply nested properties in one concise statement. Be careful with nested destructuring when intermediate objects might be null or undefined, as this throws a TypeError. Use optional chaining or provide default empty objects for intermediate levels to handle missing nested objects safely.

Array destructuring extracts values from an array by position. Use square brackets on the left side of the assignment. The first variable receives the first element, the second variable receives the second element, and so on. Skip elements by leaving empty spaces between commas. Use the rest syntax with three dots to collect remaining elements into a new array.

Destructuring is especially useful for function parameters. Instead of accepting an options object and accessing its properties individually inside the function body, destructure the object directly in the parameter list. This makes the function signature self-documenting because the expected properties are visible at the function definition, and it reduces repetitive property access inside the function body.

The spread operator with three dots spreads all own enumerable properties of an object into another object literal. It is commonly used to create a new object that is a copy of an existing one with some properties overridden. Properties listed after the spread override properties from the spread object when there are conflicts. Properties listed before the spread are overridden by matching properties from the spread object.

In a destructuring pattern, the rest syntax with three dots collects all properties that were not explicitly destructured into a new object. This is useful when you want to extract a few specific properties and pass the remaining ones along without knowing their names upfront. The rest element must always be last in the destructuring pattern. This pattern is common in React for separating props meant for a wrapper element from props meant for a child component.