Destructuring Objects and Arrays in JavaScript

If you are new to javascript you might think that there is no need for destructuring of objects or arrays, but destructuring is a big deal in javascript because of its abilities to pull out elements from the array or objects it can also help you rename that object and also give that element a default just in case the existence of the elements are false.
Destructuring of objects in javascript:
If we want to get an element out of an object we would normally just refrence the object and then point to the element that we need from that objectas follows. example 1:

  const  objectExample1 = {
firstItmOne = elementOne,
firstItmTwo = elementTwo,
firstItmThree = elementThree
}
console.log(`this is the first element ${objectExample1.firstItmOne}, the second ${objectExample1.firstItmTwo}, and the third ${objectExample2.firstItmThree}

When destructuring an object in javascript we need to consider the position of the object, if the object is inside another object, we also need to consider the the names of the element that we want to destructure out of the object, and we destructure the element of the object as follows.
example 2:

const objectExample2 = {
secondItmOne = secondElementOne,
secondItmTwo = secondElementTwo,
secondItmThree = secondElementThree
const {secondItmOne, secondItmTwo, secondItmThree} = objectExample2
console.log(`this is the first element ${secondItmOne}, the second ${secondItmTwo}, and the third ${secondItmThree}).

You can also rename the elements of the object to your prefrence when destructuring
example 2.1:

const {secondItmOne: itemOne, second ItmTwo: itemTwo, thirdItmThree} = objectExample2
console.log(`this is the first element ${itemOne}, the second ${ItemTwo}, and the third ${secondItmThree}) .

In example 2.1 above I renamed the first and the second element of the object and left the third the same. we can also set to a default incase the elements existence is false and we do that as follows.
example 2..2:

const {secondItmOne: itemOne = 'noFirstItem', second ItmTwo: itemTwo, thirdItmThree = 'noThirdItem'}) = objectExample2
console.log(`this is the first element ${itemOne}, the second ${ItemTwo}, and the third ${secondItmThree}) .

For example, 2.2 above if the first and the third element of the object did not exist then the default would be logged to the console, so this is how destructuring works in an object.
Destructuring of Arrays in javascript:
If we want to get an element out of an array we would normally just refrence the array and then point to the element's index that we need from that array as follows. example 3:

const  ArrayExample3 = [thirdElementOne,thirdelementTwo,thirdelementThree]
console.log(`this is the first element ${arrayExample3[0]}, the second ${arrayExample3[1]}, and the third ${arrayExample3[2]})

When destructuring an array in javascript we need to consider the position of the elements, we also need to consider the index of the element that we want to destructure out of the array, if the element comes first second or thid, and we destructure the element of the array as follows.
example 4:

const arrayExample4 =[arrayElementOne,arrayElementTwo,arrayElementThree ]
const {firstArray,secondArray , thirdArray} = arrayExample4
console.log(`this is the first element ${firstArray}, the second ${secondArray}, and the third ${thirdArray}).

we can also set to a default incase the elements existance is false and we do that as follows.
example 4.1:

const {firstArray = 'noFirstItem', secondArray, thirdArray = 'noThirdItem'}) = arrayExample4
console.log(`this is the first element ${firstArray}, the second ${secondArray}, and the third ${thirdArray}) .

In the example 4.1 above if the first and the third element of the array did not exist then the default would be logged to the console, so this is how destructuring works in an array.