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',
age: 30,
let DeveloperAttributes1 ={
typeScript: true,
reactJs: true,
reactNative: true,
nodeJs: false
let Developer2 = {
name:'John PHP Developer',
age: 25,
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
//I want static attribute to into this new object like this{
spreadOperatorUsed: true,

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




Sr. Backend Developer PHP | Laravel

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How I Utilized GitHub Actions in My Workflow

Schrödinger’s Code — understanding a promise in AngularJS

Webpack and Rails: the “should” knows

Understanding JavaScript Data Types

Make your React Native app 3x smaller with one simple command

Hook is a kind of function that allows to hook into reacts feature.

An alternative Node.js dependency injection pattern

How to Build a Blazing-Fast Blazor Blog with Cosmic

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
Gabriel Carmo

Gabriel Carmo

Sr. Backend Developer PHP | Laravel

More from Medium

Baby Steps to Understand The DOM

Introduction to Time Complexity and Big O notation

Breaking down the Callback Function

Becoming a software developer: How computer science is helping me becoming a better software…