What is Destructuring, Rest and Spread operator in JavaScript?

Destructuring assignment:

• Destructuring is a functional programming concept
• It will unpack values from array or properties from object to individual variables
• Array De-structuring:

// Array destructuring
const [firstElement, secondElement] = [20, 27]
console.log(firstElement)//prints 20
console.log(secondElement)//prints 27

// Taking only first element from array
const [firstElement] = [20, 27, 35, 43]
console.log(firstElement)//prints 20

• Rest Property:
  - Rest property will create a new object or array with the remaining elements when de-structuring
  - Rest property is represented as any variable name pre-fixing with three dots(…)
  - This will be used when de-structuring arrays
  - Rest property should be last the last item in the de-structuring

// Destructuring array using rest property
const numbers = [20,30,40,50,60,70]
const [fNum, lNum, ...remainingNums] = numbers
console.log(fNum, lNum) //Prints 20 30
console.log(remainingNums) //Prints [40, 50, 60, 70]

//This will give syntax error, rest property should be last item in the pattern
const [fNum, ...middleNums, lNum] = numbers 

• Object De-structuring:
  - This is similar to array de-structuring, but below are differences
  # Need to use curly braces ({}) instead of square brackets([])
  # New variable name should match with the key in the object
  - If key is not matched with variable name, undefined will be assigned
  - Its perfectly valid to retrieve one or more items from the object
  - Order of variable name is not important
• Simple object de-structuring

const person = {"fName":"Chandu", "lName":"Pasumarthi"}
const {fName, lName} = person // variable name is matching with keys in the person object
console.log(fName) //prints Chandu
console.log(lName) //prints Pasumarthi

• Object de-structuring with different order

const person = {"fName":"Chandu", "lName":"Pasumarthi"}
const {lName, fName} = person //Order of the keys are different
console.log(fName) //prints Chandu
console.log(lName) //prints Pasumarthi

• De-structuring only one item from the object

const person = {"fName":"Chandu", "lName":"Pasumarthi"}
const {fName} = person //taking only item from object
console.log(fName) //prints Chandu

• De-structuring element which is not available in the object

//firstName key is not available in the person object, undefined will be assinged
const {firstName} = person 
console.log(firstName) //prints undefined

Spread operator:

• Spread operator syntax is similar to Rest property in array de-structuring, But Spread will split into individual elements whereas rest collects into an array
• Spread operator also uses three dots(…)
• Spread operator can be used in below scenarios
  - Function Parameters
  - Array literals
  - Object literals

Function Parameters with spread operator example:

function spreadExample(num1, num2){
    console.log(num1, num2)
}

const numbers = [2,3]

// passing list of elements using spread operator
spreadExample(...numbers) // prints 2 3


const numberLetters = ["one","two"]
spreadExample(...numberLetters) // prints one two

Array literals with spread operator example:

const numbers = [2,3]

//Spreading numbers array in a new array
let numSeq = [1, ...numbers, 4]
console.log(numSeq) //prints [1, 2, 3, 4]

Object literals with spread operator example:

let numbers = {"1":"One", "2":"Two"}

//Spreading numbers object in a new object
let moreNums = {...numbers, "3":"three"}
console.log(moreNums)