JS: Objects

Theory: Spread and creating new objects

Cloning and merging can be combined into one operation that allows us to "update" objects in a functional style, in other words, to create new objects based on the old ones instead of mutating them. We will learn more about such tasks closer to the end of the profession when we talk about frameworks. Below is an example of such an operation:

const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };
const data = { name: 'Tirion 2', age: 33 };

// New object where data from the user object and data object combined
const copyOfUser = Object.assign({}, user, data);

Modern JavaScript has a special operator that allows you to perform the same task a little more quickly and, most importantly, more clearly. It's called the spread operator. Simple shallow copying using spread:

// Shallow copying
const copyOfUser = { ...user };
// Object.assign({}, user);

A spread statement is three dots before a variable (or constant) name inside an object definition It places the corresponding object inside the new object. By using it, you can only get a copy, it cannot change existing objects.

Thanks to the spread operator, it's easy to expand new objects with additional data:

const user = { name: 'John', age: 11 };

const newUser = { ...user, married: true, age: 25 };
// Age has changed
console.log(newUser); // => { name: 'John', married: true, age: 25 }

Anything that appears on the right side of the spread will have merge priority, similar to how Object.assign() works. In turn, everything on the left has a lower priority:

const user = { name: 'John', age: 11 };

const newUser = { age: 25, married: true, ...user };
// The age is the same
console.log(newUser); // => { name: 'John', married: true, age: 11 }

Properties can appear both to the left and to the right of this operator at the same time:

const user = { name: 'John', age: 11 };

const newUser = { age: 25, ...user, married: true };
// The age is the same
console.log(newUser); // => { name: 'John', married: true, age: 11 }

The spread operator itself can be used within one object any number of times:

const user = { name: 'John', married: true, age: 25 };
const user2 = { name: 'Sara', surname: 'Barnes' };

const mergedObject = { ...user, ...user2 };
console.log(mergedObject);
// => { name: 'Sara', married: true, age: 25, surname: 'Barnes' }

// In reverse order
const mergedObject2 = { ...user2, ...user };
console.log(mergedObject2);
// => { name: 'John', surname: 'Barnes', married: true, age: 25 }

Finally, you can also combine new properties and several spreads together:

const user = { name: 'Sara', age: 25, married: false };
const user2 = { name: 'Peter', surname: 'Fulton' };

const newUser = { ...user, married: true, ...user2 };
console.log(newUser);
// => { name: 'Peter', age: 25, married: true, surname: 'Fulton' }

Recommended programs

NavigationTheory

Completed

0 / 13