Mastering Javascript Spread Syntax

Spread syntax in JavaScript makes it possible to manipulate strings, objects or arrays to become other forms as expected. Here Id More Academy will provide some simple case examples that you might need when working on a project someday.

Case 1 : Spread Array As Arguments

I have a function to calculate the average of 3 arguments. As in the picture below.

function average(a,b,c) {
  return parseInt((a + b + c) / 3)
}

But other than me I have an array of 3 values that I want to be argunment in the average()function above.

const digit = [3,4,3]

If you don’t use spread syntax, you can call it based on the index as an argument, like average(digit[0], digit[1], digit[2]). But this can be simplified into the following cide if you use spread syntax.

const result = average(...arg)
// expected value: 3

Case 2 : Array Merge

const arr1 = [1,2,3,4]
const arr2 = [1]
const arr3 = [...arr2, ...arr1]
//exprected value [1,1,2,3,4]

Using sntax spreads, it can be used to combine 2 or more arrays, be it 1 or more than 1 dimension. Before using this method, make sure the data to be combined is of an array type, if not eating merge it won’t work.

Case 3 : Replace Data On Object

Let me give you an example data :

const user = {
name: "andra",
fullname: "andra full",
is_like: false,
is_follow: false
}

And the program do some logic which returns a new object as follows

const response = {
is_like: true,
is_follow: true
}

From the return object, my task is to replace the data with the same property in the user data, by using spread syntax, the code can be made as simple as the following.

const nextdata = ({...user, ...response})

The reason the user is put at the beginning, because it is the initial data, and the response ends as new data. Then the attributes will be matched, if available in the old data, it will be replaced with new data, if it is not available, a new attribute will be created.

Case 4 : Replace Same Atributes on Object

The above case will also work if the old data and new data have the exact same property, for the following example.

const oldDataUser = {
name: "andra",
fullname: "andra full",
is_like: false,
is_follow: false
}
const newDataUser = {
name: "andra",
fullname: "andra full",
is_like: true,
is_follow: true
}
const nextDataUser = {...oldDataUser, ...newDataUser}
//expected result
// Object {
//   fullname: "andra full",
//   is_follow: true,
//   is_like: true,
//   name: "andra"
// }

Case 5 : Replace Same Atributes on Object Except Some Attributes

Until I found a new case, using the method in case 4 but there is one property that I do not want to include updates, even though there are updates in the new data. The property is is_follow I want to always use the old value even though there is an update from the new data. Here’s the solution.

const oldDataUser = {
name: "andra",
fullname: "andra full",
is_like: false,
is_follow: false
}
const newDataUser = {
name: "andra",
fullname: "andra full",
is_like: true,
is_follow: true
}
const nextDataUser = {...oldDataUser, ...newDataUser, is_follow: false}}

Using the method like case 4, but with additional dummy data on the back, as you wish.

Case 6 : Combination of Find Array and Object Spread

It is a next type of case base on cases 4 and 5, only the initial data that is owned is an array consisting of many user data, as below.

const users = [
 {
  name: "andra",
  fullname: "andra full",
  is_like: false,
  is_follow: false
  },
  {
  name: "andri",
  fullname: "andri full",
  is_like: false,
  is_follow: false
 }
]

And I also got the return of new data, just like cases 4 and 5.

const newDataUser = {
name: "andra",
fullname: "andra full",
is_like: true,
is_follow: true
}

My next task is to replace some data in users, which has a name like the result of logic. In this case I get the name “Andre”. The solution is to use a maping array, then do the conditioning, if name is the same as newDataUser.name, then the object spread begins.

users.map((n,key) => {
  if(n.name === newDataUser.name)
    users[key] = {...n, ...newDataUser}
})

Reference

https://academy.byidmore.com/post/Mastering-Javascript-Spread-Syntax-5c1b3c579c52eb5246fdce7c