Essential JavaScript Techniques for React Developers — ES6 Part 02

Photo by Gabriel Heinzer on Unsplash

Object Destructuring

Object destructuring is an easy way to assign array values and objects to a single variable. When doing this, the variable name must match the array or object values name.

Code

create JavaScript object

Output

Object Destructuring Output

Array Destructuring

Destructuring assignment makes it easy to assign array values to variables. See the example below.

Code

Create an Array

Output

Array destructuring output

The For/Of Loop

The JavaScript for/of statement loops can iterate over Arrays and Strings. The for/of loops have the following syntax.

for (variable of iterable) {
  // code block to be executed
}

Code

For/Of Loop

Output

Conclusion

In conclusion, object destructuring in JavaScript provides a convenient way to assign array values and object properties to variables, ensuring that the variable names match the keys in the array or object. Similarly, array destructuring simplifies the assignment of array elements to variables. The for/of loop offers an intuitive method to iterate over arrays and strings, enhancing the readability and efficiency of the code. Together, these features streamline the process of handling complex data structures and iterating through collections in JavaScript, making code more concise and maintainable.

Essential JavaScript Techniques for React Developers — ES6 Part 03 | by Nipun Madusanka | Jun, 2024 | Medium