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