Swap Two Variables In-Place

Account Required

This lesson is available if you sign in.
If you don't have an account, you can sign up for free.

Swap Two Variables In-Place

Sign in to access this content

You must sign in to access this content.
If you don't have an account you can sign up for free!

Problem

let alpha = 'john';
let beta = 'jane';

// Don't use any new variables

// Test
console.log(alpha == 'jane' && beta == 'john'); // true

Solution

let alpha = 'john';
let beta = 'jane';

// Don't use any new variables
[beta, alpha] = [alpha, beta];

// Test
console.log(alpha == 'jane' && beta == 'john'); // true

Transcript

00:00 Can you take two JavaScript variables, alpha and beta,

00:03 and swap the values around so

00:05 that the value stored in beta is now stored in alpha

00:07 and vice versa without using a third variable.

00:11 We'll answer that in this lesson. So let's go here.

00:14 We have two JavaScript variables,

00:16 alpha containing the string, John

00:18 and Beta containing the string.

00:20 Jane, our key constraint is

00:22 that we will not use any new variables,

00:24 and our final test will be that alpha must contain the value

00:27 of beta, which was Jane

00:29 and Beta must contain the value of Alpha, which was drawn.

00:32 Now, most people will quite easily arrive at a temporary

00:35 variable solution where the user temporary variable

00:38 to store the value of Alpha so

00:40 that they can then put in the value of beta into Alpha,

00:43 and then finally recover the value

00:44 of Alpha from the temporary variable to store into beta,

00:47 essentially swapping alpha and beta.

00:50 However, this violates are constraint

00:52 of not treating any temporary variables.

00:55 Fortunately, we do have a solution to this problem thanks

00:58 to JavaScript Destructuring.

01:00 Here's a quick recap.

01:01 We can create two variables, one

01:03 and two by destructuring them from an existing array

01:06 containing the strings, John and Jane.

01:08 So now one will be John and two will be Jane.

01:12 And in addition to Destructuring, while creating variables,

01:15 we can even destructure into existing variables.

01:18 For example, we can have the variables one

01:20 and two declared beforehand

01:22 and then use these two variables to store the values

01:25 provided by the array first and second members.

01:28 Now, since we are creating arrays out strings over here,

01:31 we can actually create an array out

01:32 of existing variables as well.

01:34 So we might as well just use the variables alpha

01:36 and beta that we already have

01:37 that are storing these two same strings.

01:41 And now for the final crescendo, instead

01:43 of storing these values into these two local variables

01:45 that we just created, we can use the existing variables beta

01:49 and alpha in that order to essentially swap the values

01:53 of alpha and beta using JavaScript destructuring.

01:58 So this is not something that was possible

01:59 with older versions of JavaScript, for example, ES five

02:02 and Below, which did not have a already structuring.

02:05 So as JavaScript continues to evolve,

02:07 more interesting patterns like this continue to emerge.