es6 · ES6 Basics

ES6 gives an alternative way to assign variables. Can you guess what the below code does?

let a = 12, b = 3;
[a, b] = [b, a];

Answers

Makes both a and b equal 12.
Swaps the values inside a and b, without using extra variables.
Creates an array that contains a and b.

# Understanding Variable Swapping in ES6 Developers were long looking for an elegant and efficient way to swap the values of two variables. Prior to ES6, JavaScript would require a temporary variable to hold one value during the swap. However, ES6 introduced a much cleaner solution, and that can be seen in the quiz question above. In ES6, you can effortlessly exchange the values of two variables like this: ```javascript let a = 12, b = 3; [a, b] = [b, a]; ``` This line of Code `[a, b] = [b, a];` swaps the values inside `a` and `b` WITHOUT using any extra variables. Such a succinct and elegant technique to switch values! ## Digging Deeper This syntax works based on the concepts of destructuring assignments in ES6, one of the most productive features introduced. Destructuring assignment allows for instantly unpacking values from arrays or properties from objects into distinct variables. The code `[a, b] = [b, a];` in actuality implies "destructure the array `[b, a]` and assign its elements to the variables `a` and `b` in order". In this way, the value of 'b' is assigned to 'a', and the value of 'a' is assigned to 'b', thus effectively swapping the values. ## Practical Applications & Best Practices Swapping variables is frequently used in sorting algorithms, where elements need to be rearranged based on certain conditions. Consider an example where you want to sort an array of numbers in ascending order. Here, you'd initiate a loop, compare each pair of elements, and if they are not in the correct order, you would swap them, just like we learned here. ES6 has undoubtedly simplified codes and added readability to JavaScript. But when using the ES6 destructuring assignment, it's important to have a solid comprehension of how it works to avoid potential bugs or unexpected behavior. ES6 provides a variety of other handy features, such as arrow functions, rest and spread operators, etc. Using them wisely can drastically improve your coding efficiency. Remember, understanding the tools in your toolbox can make you a much better and effective programmer. Happy Coding!