ES6: Use Destructuring Assignment to Assign Variables from Arrays

something interesting to note is that the following code

let a = 3, b = 7;
const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b);

produces the error

​​SyntaxError: Identifier ‘a’ has already been declared (3:7)​​

does this mean that

const [a, b]

declares the variables a and b?

Hi @JoelLau

yes, you’ve already defined the variables a and b .

let a = 3, b = 7;
 [a, b] = [1, 2, 3, 4, 5, 6];;
console.log(a, b); // run without error

let a = 3, b = 7;
let [a, b] = [1, 2, 3, 4, 5, 6];;
console.log(a, b); //Error: redeclaration of let a, b

let a = 3, b = 7;
const [a, b] = [1, 2, 3, 4, 5, 6];;
console.log(a, b); //Error: redeclaration of let a, b

Yes. It is a variable declaration. In that example you already declared variables called a and b. You can’t use those names again for a new variable declaration in that scope.

Yes, that is the aim of const. You can assign a value to an identifier once [within a scope]. In general using const is helpful most obviously because it cuts down on programmer errors. It also forces you to fix the type of value assigned to the variable, which makes the compiler’s job easier (and which can under certain circumstances make code run faster than equivalent var [or let] code).

Umm, I’m not quite sure what you mean here, but I think no is the answer. The normal rules of JavaScript with respect to variables allow the examples to work.

Declare a variable that can be reassigned:

let x = 1;
// or var x = 1
// Not const x = 1, that cannot be reassigned

Reassign it:

x = 2;

The values in the array are just values, literally all you’re doing with the destructuring is assigning values to variables. Destructuring (in this case) just makes it very explicit what you are grabbing from the array.

let [a, b] = [1, 2];

Is, practically, exactly the same as

let a = 1;
let b = 2;

If you have an array, these are exactly the same:

let arr = [1, 2];
let a = arr[0];
let b = arr[1];
let [a, b] = [1, 2];

a has the value 1 assigned to it, b has the value 2 assigned to it.

If I have already defined a and b, and I want to change the values, I do it the same way it has always worked in JS.

let a = 1;
let b = 2;
a = 2;
b = 1;

If I use destructuring, I am doing exactly the same thing:

let a = 1;
let b = 2;
[a, b] = [2, 1];

But instead of writing them out line by line, I can just reassign all at once in the code. I write a pattern to match the values on the right.

Umm, yes, sort of. You will see this in most of the ES6 section and it is a little confusing for a lot of people. JS has function scope, meaning everything inside a function is its own little environment. So in this case (and most of the other ES6 challenges), you want the important bit of the code (the bit you are being asked to write or fix or whatever) to run in “strict mode”. And that function expression is there to create that little environment that runs in strict mode.

I don’t know the full reasoning behind everything in the ES6 section using this pattern, in both the browsers on my computer (Chrome and Firefox), they all run fine and are tested properly even if the expression is deleted.

3 Likes

thanks for the detailed reply. I think I finally get it now, thanks!!

1 Like