# JS Tip of the Day: Using Destructuring to Swap Values

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-using-destructuring-to-swap-values/643127>\
**Category:** web dev\
**Created:** [April 9, 2020, 1:06pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-using-destructuring-to-swap-values/643127 "2020-04-09T13:06:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 9, 2020, 1:06pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-using-destructuring-to-swap-values/643127/1 "2020-04-09T13:06:50Z")

</div>

**Using Destructuring to Swap Values**  
Version: ES2015  
Level: Intermediate

Normally, when you swap two values, you have to create a temporary variable to keep one of the original values so it doesn’t get lost when assigning from the other.

```javascript
let one = 1;
let two = 2;

// swap
let temp = one;
one = two;
two = temp;

console.log(one); // 2
console.log(two); // 1

```

With array destructuring, this can be done more easily and all in the same line. With a destructuring list of your two variables, you can swap them by assigning them to an array of their values in reverse order.

```javascript
let one = 1;
let two = 2;
[one, two] = [two, one]; // swap

console.log(one); // 2
console.log(two); // 1

```

Though it may look like the temporary variable is gone, we still have it in the form of the array being assigned. Each `one` and `two` are temporarily stored as elements in that array so that when the assignments occur, they’re being pulled from the array and not the originals. This is effectively the same as:

```javascript
let one = 1;
let two = 2;

// swap
let temp = [two, one];
one = temp[0];
two = temp[1];

console.log(one); // 2
console.log(two); // 1

```

Because destructuring ultimately boils down to standard assignment operations, you can also do this with individual array elements and object properties.

```javascript
let list = [1,2,3,4,5];
[list[0], list[1]] = [list[1], list[0]]; // swap

console.log(list); // [2, 1, 3, 4, 5]

let nums = { one: 1, two: 2 };
[nums.one, nums.two] = [nums.two, nums.one]; // swap

console.log(nums); // {one: 2, two: 1}

```

When dealing with arrays, you’ll want to be sure not to destructure from the original array since each assignment happens sequentially and you might be assigning from a value assigned earlier in the destructuring.

```javascript
let list = [1,2,3,4,5];
[list[1], list[0]] = list; // avoid

console.log(list); // [1, 1, 3, 4, 5]

```

Here, `list[1]` was assigned first. Then when `list[0]` was getting assigned, it was getting its value from the just-assigned `list[1]` rather than a temporary array which would have kept the values separated.

More info:

- [Destructuring on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)