JavaScript Object Destructuring, Spread Syntax, and Rest Parameter

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

Object Destructuring

const { firstName } = name;
const {firstName, lastName} = name;
const { fisrtName, lastName, fullName=`${firstName} ${lastName}` } = user;
const { fristName: fName } = name;
console.log(fName) // John
const name = {
'firstName': 'John',
'lastName': 'Smith',
'address':{
'street': '43 S. Fox st',
'city': 'Denver',
'zip': 80232
}
const { address: { street } } = name

Spread Syntax in JavaScript

const clone_some_object = {...some_object}

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

Create a Clone of an Object

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

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

Update Nested Objects

const user = { 
'name': 'Alex',
'address': '15th Park Avenue',
'age': 43,
'department':{
'name': 'Sales',
'Shift': 'Morning',
'address': {
'city': 'Bangalore',
'street': '7th Residency Rd',
'zip': 560001
}
}
}
const updated = {
...user,
department: {'number': 7}
}
console.log(updated);
const updated = {
...user,
department: {
...user.department,
'number': 7
}
};
console.log(updated);

The Rest Parameter in JavaScript

const user = { 
'name': 'Alex',
'address': '15th Park Avenue',
'age': 43
}
const {age, ...rest} = user;
console.log(age, rest);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store