Spread operator simple way to understand

The simplest possible way to easily understand the operation of a spread operator

Well, I always had a hard time understanding things, I always had to look in more than one source on how to do something so that I could understand, I like to know what is happening and how what I learned works.

And Obviously in the area of ​​programming it was no different, maps, filters and our case today the spread operator, and what the hell does the famous spread operator do?

Spread Operator it is a Brackets Killer

Developing on JS (Javascript) we user collections most named Arrays and objects with are representing by brackets [] {} and we can do a collection of objects to see the sample below

const collection = ['John Doe',99]
const object = {name:'Doe John', age: 66}
const collectionOfObjects =
[
    {name:'John Doe': age:99},
    {name:'Doe John',age:66}
]

Okay, now let’s bring it to a real example

I have a object called Developer and another called DeveloperAttributes, and this both are returned by a different tables on my database, for and this attributes and they are dynamic, but i want this structure inside one object.

let Developer1 = {
  name:'John Js Developer',
  technology:'Javascript'
  age: 30,
  {attributes}
}
let DeveloperAttributes1 ={
   typeScript: true,
   reactJs: true,
   reactNative: true,
   nodeJs: false
}
let Developer2 = {
  name:'John PHP Developer',
  technology:'Javascript'
  age: 25,
  {attributes}
}
let DeveloperAttribute2 ={
   laravel: true,
   symphony: true,
   tests: false,
   phpVersion: 8,
}

But for each technology i have different attributes if i dont use Spread Operator will be something like this

What it is not wrong but i want on root of object so using Spread Operator will be like that

What Spread operator does was remove the brackets and i put into a new object

...Developer1 //Will return the Object without  {}
...DeveloperAttributes1 //Will Return the Object without {}
// Will put all attributes without brackets {} into a new object
{
  ...Developer1,
  ...DeveloperAttributes1
}
//I want static attribute to into this new object like this
{
  spreadOperatorUsed: true,
  ...Developer1,
  ...DeveloperAttributes1
}

Basicaly when you use …Developer1 you are saying

Kill the brackets of this object or collection for me

You can use with collections (Arrays) to just use …NameOfArray and we will receive the collection withou [] brackets

Hope may help someone