Skip to content

Latest commit

 

History

History
298 lines (197 loc) · 10.6 KB

32-Destructuring-Array.md

File metadata and controls

298 lines (197 loc) · 10.6 KB
Raw

What is destructuring and destructuring Arrays ?

Destructuring is a feature in JavaScript that allows you to extract values from arrays, objects, and other structures into distinct variables.

Destructuring Arrays is the process of breaking down an array into individual elements, and assigning those elements to separate variables. This can be done using array destructuring syntax, which uses square brackets on the left-hand side of the assignment operator to specify the variables to which the array elements should be assigned.

Here's an example:

const numbers = [1, 2, 3];

// Destructuring the array into individual variables
const [a, b, c] = numbers;

console.log(a); // Output: 1
console.log(b); // Output: 2
console.log(c); // Output: 3

In this example, we have an array numbers containing three values. We use array destructuring to assign each value to a separate variable a, b, and c. Now we can use these variables independently, as shown in the console.log statements.

How to reverse values using destructuring ?

To reverse values using destructuring in JavaScript, you can use an array with the reverse() method and then destructure the reversed array into new variables. Here's an example:

const numbers = [1, 2, 3, 4, 5];

// reverse the array
numbers.reverse();

// destructure the reversed array
const [five, four, three, two, one] = numbers;

console.log(one); // Output: 5
console.log(two); // Output: 4
console.log(three); // Output: 3
console.log(four); // Output: 2
console.log(five); // Output: 1

In this example, we first create an array of numbers, then use the reverse() method to reverse the order of the elements in the array. We then destructure the reversed array into variables named one, two, three, four, and five. Finally, we log each variable to the console to confirm that the values have been reversed.

How to return two values from function?

In JavaScript, it is not possible to directly return two values from a function. However, there are several ways to achieve this:

  1. Using an Array: We can create an array and store the values that we want to return in it. Then, we can return the array from the function.
function twoValues() {
  var x = 10;
  var y = 20;

  return [x, y];
}

var result = twoValues();
console.log(result[0]); // Output: 10
console.log(result[1]); // Output: 20
  1. Using an Object: We can create an object and assign the values that we want to return to its properties. Then, we can return the object from the function.
function twoValues() {
  var x = 10;
  var y = 20;

  return { 
    a: x, 
    b: y 
  };
}

var result = twoValues();
console.log(result.a); // Output: 10
console.log(result.b); // Output: 20
  1. Using Destructuring: We can use destructuring to extract the values returned by the function into separate variables.
function twoValues() {
  var x = 10;
  var y = 20;

  return [x, y];
}

var [a, b] = twoValues();
console.log(a); // Output: 10
console.log(b); // Output: 20

How to Destructure a nested array ?

Destructuring of nested array in JavaScript is a way to extract values from an array that contains other arrays, objects or primitives.

For example, consider the following nested array:

const nestedArr = [1, [2, 3], [4, 5, [6, 7]]];

To extract the values of this array using destructuring, we can do the following:

const [a, [b, c], [d, e, [f, g]]] = nestedArr;

Here, the variables a, b, c, d, e, f and g are assigned the values from the corresponding positions in the nestedArr array.

So, after running the above code, a will contain 1, b will contain 2, c will contain 3, d will contain 4, e will contain 5, f will contain 6, and g will contain 7.

How to set default values in destructuring ?

In JavaScript, default values can be set in destructuring by using the = operator. The default value will be used if the corresponding variable in the destructuring assignment is undefined.

Here's an example:

// Without default values
let person = { name: "John" };
let { name, age } = person;
console.log(name); // "John"
console.log(age); // undefined

// With default values
let personWithAge = { name: "Jane" };
let { name: newName, age = 25 } = personWithAge;
console.log(newName); // "Jane"
console.log(age); // 25

In the second example, we're setting a default value of 25 for the age variable. If age is undefined in the object being destructured (personWithAge), the default value of 25 will be used instead. We're also renaming the name variable to newName using the syntax { name: newName }.

What is destructuring Objects ?

Destructuring objects in JavaScript is a way to extract values from an object and assign them to variables in a concise and readable manner.

Here's an example:

const person = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    state: 'NY'
  }
};

// Destructuring assignment
const { name, age, address: { city } } = person;

console.log(name); // 'Alice'
console.log(age); // 30
console.log(city); // 'New York'

In the above example, we are using destructuring assignment to extract the name, age, and city properties from the person object. The syntax { name, age, address: { city } } specifies which properties to extract and how to assign them to variables.

Note that we can also rename variables during destructuring:

const { name: fullName, age: yearsOld } = person;

console.log(fullName); // 'Alice'
console.log(yearsOld); // 30

This allows us to use a different variable name for clarity or to avoid naming conflicts.

How to extract any value from object using destructring ?

To extract any value from an object in JavaScript using destructuring, you can use the following syntax:

const { property } = object;

where property is the name of the property you want to extract and object is the object containing that property.

Here's an example:

const person = {
  name: "John",
  age: 30,
  gender: "male"
};

const { name } = person;

console.log(name); // Output: "John"

In this example, we're extracting the value of the name property from the person object using destructuring. The value is assigned to a variable named name, which we then log to the console.

You can also extract multiple properties at once by separating them with commas:

const { name, age } = person;

console.log(name, age); // Output: "John" 30

How to rename Object property name in destrcutring ?

In JavaScript destructuring, you can rename an object property by using the colon (:) syntax. Here's an example:

const person = { firstName: 'John', lastName: 'Doe' };
const { firstName: first, lastName: last } = person;

console.log(first); // Output: "John"
console.log(last); // Output: "Doe"

In the above example, we are renaming firstName to first and lastName to last while destructuring the person object. This means that we are creating two new variables first and last whose values are the respective values of the firstName and lastName properties of the person object.

Setting Default values in destructuring ?

In JavaScript, it's possible to set default values for variables when using destructuring assignment. This means that if the value being destructured is undefined or null, a default value will be used instead.

Here's an example:

const { name = "Anonymous", age = 18 } = {};
console.log(name); // Output: "Anonymous"
console.log(age); // Output: 18

In this code, we are using object destructuring to create two variables name and age, with default values of "Anonymous" and 18 respectively. Since we're destructuring an empty object {}, the values of name and age will be the defaults we specified.

Destructuring of Nested Object ?

Destructuring is a feature in JavaScript that allows you to extract values from objects and arrays and assign them to variables. When dealing with nested objects, destructuring can provide a concise way to access their properties.

Here's an example of destructuring a nested object:

const user = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

// Extracting nested object properties using destructuring
const { name, age, address: { street, city, state, zip }} = user;

console.log(name); // Output: John
console.log(age); // Output: 30
console.log(street); // Output: 123 Main St
console.log(city); // Output: Anytown
console.log(state); // Output: CA
console.log(zip); // Output: 12345

In the example above, we have an object user with a nested object address. We use destructuring to extract the properties name, age, street, city, state, and zip from the user object by assigning them to variables with the same names. We also use the syntax address: { ... } to destructure the nested address object.

How to use destrcutring in Function ?

Destructuring is a way to extract values from arrays or objects into distinct variables. You can use destructuring in function arguments to unpack arguments passed to the function.

Here's an example of how to use destructuring in a function:

function printName({firstName, lastName}) {
  console.log(`${firstName} ${lastName}`);
}

const person = { firstName: 'John', lastName: 'Doe' };

printName(person); // output: "John Doe"

In the above example, we define a function printName that takes an object as an argument. The object has two properties, firstName and lastName. Instead of accessing these properties with dot notation (person.firstName and person.lastName), we use destructuring to extract the values and assign them to separate variables within the function signature.

We then define an object person with the same property names, and call the printName function with person as an argument. The function logs the full name to the console by combining the firstName and lastName variables.

Note that the argument provided to printName must be an object with the expected property names. If any of the properties are missing or have different names, the destructuring will fail and the function will throw an error.