DESTRUCTURING IN JAVASCRIPT

Destructuring in JavaScript is unpacking data structures, array and objects to easily access the values inside them. Destructuring help to extract values from arrays and objects into distinct variable so we don’t have to navigate through large arrays or objects to get the values that are needed. JavaScript allows us to destructure arrays, objects and function parameters.
JavaScript allows for 3 different modes of destructuring which includes;

Array destructuring
Object destructuring
Function parameter destructuring

ARRAY DESTRUCTURING

Array in JavaScript is a collection of elements a numerical index can access. The element in an array can be of any data type Including numbers, strings and even array of objects. Arrays are created using square brackets and individual elements can be accessed using their index which starts at 0.
The basic syntax for array destructuring uses square brackets on the left-hand side. For example, to extract the first element of an array and assign it to a variable. The following code can be used

Const Persons = [‘Sam’, ‘Faith’, ‘John’. ‘Gift’]
Const [firstPerson] = Persons
Console.log(firstPerson)
RESULT:‘Sam’

Multiple elements can also be extracted from an array and assigned to multiple variables.

Const Persons = [‘Sam’, ‘Faith’, ‘John’. ‘Gift’]
Const [firstPerson, secondPerson, thirdPerson] = Persons
Console.log(firstPerson, secondPerson, thirdPerson)
RESULT:  ‘Sam’, ‘Faith’, ‘John’

OBJECT DESTRUCTURING

Objects in JavaScript are collections of key-value pairs. Objects are created using curly braces.
The basic syntax for object destructuring uses curly braces on the left-hand side of an assignment statement and the object on the right-hand side. For example, to extract a property called “name” from an object and assign it to a variable, the following code can be used

Const Person = {name: ‘John’, brand: ‘Apple’}
Const {name} = Person 
Console. Log(name)
RESULT: ‘John’

The above code creates an object called Person that has 2 properties (ie name and brand), we use object destructuring to extract the name property of the object and assign it to a variable called ‘name’

FUNCTION PARAMETER DESTRUCTURING

JavaScript allows us to extract values from an object or array passed as parameter to a function. Destructuring parameters is quite straight forward as you only need to use the destructuring syntax inside the function.

function greet ({name, age}) {
    Console.log(`Hello, ${name}. You are ${age} years)
} 
greet({name: “Peter”, age:25})
RESULT: Hello, Peter. You are 25 years

BENEFITS OF DESTRUCTURING

Improved performance

When values are extracted from an array or object, new variable is created that reference the value. This is particularly useful when working with large data, as it allows you to work with a smaller portion of the data, which can be more efficient.

Concise and readable code

Destructuring allows you to write more concise and readable code. When working with large data, destructuring allows you to focus on the essential parts of the data rather than getting lost in details.

Easier handling of nested properties

With destructuring, you can extract values with a single line of code, making it easier to work with nested properties.

Better handling of function parameters

Destructuring can be used to extract values from function parameters. This can be particularly useful when working with complex data structures, as it allows you to focus on the specific values you need without navigating through the entire data structure.