Register to get access to 15+ free programming courses with interactive exercises

Spread and creating new objects JS: 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' }

Аватары экспертов Хекслета

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From zero to a developer. Refunds in case you won't get a job

Frontend Developer icon
Profession
New
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.