JavaScript Object Destructuring, Spread Syntax, and Rest Parameter

ES6 has object restructuring to create variables from an object’s properties.

We can create objects with {...} and properties which have key and value pair. Key has '' around it and there is : between key and value. Value can be any type.

const name = {
    'firstName': 'John',
    'lastName': 'Smith'
} 

We use the . notation to get the value of properties.

let firstName = name.firstName;

Object Destructuring

We can use Javascript Object destructuring to extract values from an object property or array and assign them to a variable. The object key name is a variable that holds the value.

const { firstName } = name;

In the example above we extract firstName object property and put inside {} . This is a variable name that holds the property value. We can use let or const for variables type.

We can extract multiple values from object properties.

const {firstName, lastName} = name;

Add a new variable and default value

const { firstName, lastName, age=34 } = user;

We add age=34 while destructuring. We can combine properties firstName lastName into a new property fullName

const { fisrtName, lastName, fullName=`${firstName} ${lastName}` } = user;

Add Aliases

const { fristName: fName } = name;
console.log(fName) // John

Nested Object Destructuring

const name = {
    'firstName': 'John',
    'lastName': 'Smith',
    'address':{
       'street': '43 S. Fox st',
       'city': 'Denver',
       'zip': 80232
}
const { address: { street } } = name

You should start with the top-level and go down in the hierarchy until you reach the value you want to extract.

Spread Syntax in JavaScript

The Spread Syntax (also known as the Spread Operator) is another excellent feature of ES6. As the name indicates, it takes an iterable (like an array) and expands (spreads) it into individual elements.

We can also expand objects using the spread syntax and copy its enumerable properties to a new object.

Spread syntax helps us clone an object with the most straightforward syntax using the curly braces and three dots {...}.

const clone_some_object = {...some_object}

With spread syntax, we can clone, update, and merge objects in an immutable way. The immutability helps reduce any accidental or unintentional changes to the original (Source) object.

The Object Destructuring and Spread syntaxes are not the same thing in JavaScript.

Create a Clone of an Object

We can create a cloned instance of an object using the spread syntax like this:

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}
const clone = {...user} // Output, {name: "Alex", address: "15th Park Avenue", age: 43}
clone === user; // Output, false

You can alternatively use object.assign() to create a clone of an object. However, the spread syntax is much more precise and much shorter.

The spread syntax performs a shallow copy of the object. This means that none of the nested object instances are cloned.

Update Nested Objects

As we have seen, updating an object with the spread syntax is easy, and it doesn’t mutate the original object. However, it can be a bit tricky when you try to update a nested object using the spread syntax. Let’s understand it with an example.

We have a user object with a property department. The value of the department property is an object which has another nested object with its address property.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43,
    'department':{
        'name': 'Sales',
        'Shift': 'Morning',
        'address': {
            'city': 'Bangalore',
            'street': '7th Residency Rd',
            'zip': 560001
        }
    }
}

Now, how can we add a new property called, number with a value of, say, 7 for the department object? Well, we might try out the following code to achieve it (but that would be a mistake):

const updated = {
    ...user, 
    department: {'number': 7}
}
console.log(updated);

As you execute it, you will realize that the code will replace the entire department object with the new value as, {'number': 7}. This is not what we wanted!

How do we fix that? We need to spread the properties of the nested object as well as add/update it. Here is the correct syntax that will add a new property number with the value 7 to the department object without replacing its value:

const updated = {
    ...user, 
    department: {
        ...user.department, 
        'number': 7
    }
};
console.log(updated);

The Rest Parameter in JavaScript

The Rest parameter is kind of opposite to the spread syntax. While spread syntax helps expand or spread elements and properties, the rest parameter helps collect them together.

In the case of objects, the rest parameter is mostly used with destructuring syntax to consolidate the remaining properties in a new object you’re working with.

Let’s look at an example of the following user object:

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

We know how to destructure the age property to create a variable and assign the value of it. How about creating another object at the same time with the remaining properties of the user object? Here you go:

const {age, ...rest} = user;
console.log(age, rest);

The output will be:

In the output, we see that the age value is 43. The rest parameter consolidated the rest of the user object properties, name and address, in a separate object.

Refereces:

https://www.freecodecamp.org/news/javascript-object-destructuring-spread-operator-rest-parameter/