Javascript Destructure, Spread and Rest

Javascript Destructure, Spread and Rest

·

3 min read

Destructure, Spread, and Rest are three very useful features brought to us in JavaScript version ES6 (2015) and some enhancements in ES9(2018), which you might not find in many other programming languages.

Those features make our life easier in accessing Array values or Object properties and result in more concise and cleaner code.

It could be confusing as these three features have slices in implementation, especially Spread and Res, which use the three-dot "..." operator.

Destructure (Destructuring Assignment)

Destructuring-Assignment is a syntax that unpackages iterable elements such as Array and String, or properties from an Object and sets them as variables. By doing this, we can reduce our lines of code in manipulating data.

Example Destructing with Array

Commonly done in unpackaging Array values

const arrayOfStrings = ["first string", "second string", "third string"]
const first = arrayOfStrings[0]
const second = arrayOfStrings[1]
const third = arrayOfStrings[2]
console.log(first) // first string

Unpackaging Array values with Destructing Assignment

const arrayOfStrings = ["first string", "second string", "third string"]
const [first, second, third] = arrayOfStrings;
console.log(first) // first string

const arrayOfObjects = [{name: "Then"}, {name: "Mr ABC"}, {name: "Mr DEF"}]

We also can skip over Array value or Object property

...
const [first, , third] = arrayOfObjects;
console.log(first.name) // Then

Default value if array value index undefined

const arrayOfStrings = ["first string"]
const [first, second = "-", third = "empty"] = arrayOfStrings;
console.log(second) // -
console.log(third) // empty

Not only Array, destructuring assignment also works with String

const string = "abcdefg"
const [first, second, third] = string;
console.log(second) // b

Example Destructing with Object

Commonly done in unpackaging Object properties

const userObject = {
    username: "thendrianus",
    password: "123456789"
}
const username = userObject.username
const password = userObject.password
console.log(username) // thendrianus

Unpackaging Object Properties with Destructing Assignment

const userObject = {
    username: "thendrianus",
    password: "123456789"
}
const {username, password} = userObject
console.log(username) // thendrianus

Bind property with a different name than in the Object

const userObject = {
    username: "thendrianus",
    password: "123456789"
}
const {username : name, password : pass} = userObject
console.log(name) // thendrianus

Default value if object property undefined

Spread (Spread Operator)

Pretty similar to Destructure Assignment. Spread Operator unpackage literal elements like Array or String, and Object properties. But what differentiates it is that the unpackaged elements are not assigned as variables but as function arguments or object operation elements.

Example Spread Operator with Array

Commonly done in Concatting two Arrays

const customers = ['CUS-A', 'CUS-B']
const employees = ['EMP-A', 'EMP-A']
const people = customers.concat(employees)
console.log(people)

We can do the same with Spread Operator

const peopleWithSpread = [...customers, ...employees]
console.log(peopleWithSpread)

const addMorePeopleWithSpread = [...peopleWithSpread, 'EMP-C']
console.log(peopleWithSpread)

If you take a look at the two above examples, with Spread Operator, we create a new variable, and our original variable didn't change.

Example Spread Operator with Object

Commonly done in cloning an Object

const userObject = {
    username: "thendrianus",
    password: "123456789"
}
const newUserObject = Object.assign({}, userObject)
console.log(newUserObject)

We can do the same with Spread Operator

const newSpreadUserObject = {...userObject}
console.log(newSpreadUserObject )

const addNewSpreadUserObject = {...newSpreadUserObject, age: 100}
console.log(addNewSpreadUserObject )

Rest (Rest Parameter)

While Destructure Assignment and Spread Operator do the unpackaging, Rest Parameter does the packaging. Packaging the remaining elements into an Array or Object.

Example of Rest Parameter

Package function parameters into an Array

function sum(...args) {
  let result = 0;

  for (let arg of args) {
    result += arg;
  }
  return result
}

sum(1, 2) // 3
sum(3, 4, 5, 6) // 18

Package the remaining function parameters into an Array

function sum(first, ...args) {
    console.log(first) // 1
    // Do something here
}
sum(1,  2, 3)

Use Rest Syntax with Destructing Assignment

const userObject = {
    username: "thendrianus",
    password: "123456789",
    age: 100
}
const {username, ...rest} = userObject
console.log(rest) // {password: "123456789", age: 100}

Thank you so much for reading this article. I hope you like it. Cheers

asdf