ES6: Use Destructuring Assignment to Assign Variables from Arrays

I kinda “cheated” by looking up the answer on this one, but I don’t understand why the ‘const’ keyword is being used in the example.

It says …

Destructuring an array lets us do exactly that:

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

but using const here would result in the variable being immutable, not allowing a and b to swap. what point is the example trying to make?


let a = 8, b = 6;
(() => {
  "use strict";
  // change code below this line
  [a, b] = [b, a]
  // change code above this line
})();
console.log(a); // should be 6
console.log(b); // should be 8

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0.

Link to the challenge:

1 Like

you don’t need const before the [a,b] in test, since strict mode is being used insdie the function, if you attempt to use const, you will get a reference error, because b is not defined inside the function.

const [a, b] = [1, 2, 3, 4, 5, 6];

is like

const arr = [1, 2, 3, 4, 5, 6];

const a = arr[0];
const b = arr[1];

I get that it’s slightly confusing, the example doesn’t quite relate to what you’re doing. So instead think like

const arr = [1, 2, 3, 4, 5, 6];

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

Because they use let, you can now reassign those variables

a = 5
b = 'hello'

That’s fine - as you say, you wouldn’t be able to do that with const because a and b would not be reassignable.

So in the code here:

let a = 8, b = 6;
(() => {
  "use strict";
  [a, b] = [b, a];
})();

If we get rid of the stuff that’s just there to help with the tests:

let a = 8;
let b = 6;
[a, b] = [b, a];

You’ve already defined the variables a and b. The code is the same as doing:

let a = 8;
let b = 6;
// create something to hold onto a value while we swap:
let temp = a;
a = b;
b = temp;

You don’t put let before the [a, b] because a and b are already defined - that would be a reference error, as @moein says (but it has absolutely nothing to do with strict mode), but it would be a reference error because they have already defined a and b. eg you can’t do:

let a = 10;
// then
let a = 20;

Because you can only use let a once, you redefine like:

let a = 10;
// then
a = 20;

This is not correct, strict mode has nothing to do with it, that’s just there for the tests.

4 Likes

With strict mode, you can not use undeclared variables.

Yes but it’s just there for the tests, to emulate an ES6 module, what you wrote isn’t an explanation of why let/const isn’t being used at all. It doesn’t use it because a and b have already been declared, it is just normal JS semantics (declare variable x, like let x = 1, reassign like x = 2). The OP’s confusion is from the example using const, which they correctly point out is not reassignable.

in this example:

const a = ['JAN'];
const b = ["M"];
let result = function (a,b){    
   "use strict";
    b = [...a]; 
  console.log(b); 
};
result(a,b);
console.log(b); 

we reassign b with const and not get Error: invalid assignment to const

1 Like

Yes, because it’s const, you can’t reassign const, that’s the point. You have to use let because then you can reassign the variable.

const a = 2
const a = 3 // error, a is not reassignable

This won’t work either

let a = 2
let a = 3 // error, duplicate declaration

You have to do

let a = 2
a = 3
1 Like

we can reassign b with const in this:

const a = ['JAN'];
const b = ["M"];
let result = function (a,b){    
  "use strict";
   b = [...a]; 
 console.log(b); 
};
result(a,b);
console.log(b); 
1 Like

You’re not reassigning there at all, look at the code.

reassign b :

b = [...a];
let result = function (a,b){

You’ve written a function with a parameter b. That happens to be the same letter used for const b, but it isn’t the same

1 Like

yes it isn’t the same

const b = ["M"];

global scope

b = [...a]; 

local scope.

my point is, how declare b = […a]

let a = ['JAN']
let b = ['M']
b = [...a]

Is how. You can’t reassign const because it’s not reassignable, there isn’t anything more complex at work here.

this code run without error (with const):
Screenshot%20(46)

Yes, of course it does, this is exactly the same:

const a = ['JAN'];
const b = ["M"];
let result = function (firstParameter, secondParameter){    
  "use strict";
  secondParameter = [...firstParameter]; 
  console.log(secondParameter); 
};
result(a,b)
console.log(b)

b inside the function refers to the parameter b, it has nothing to do with const b. You have chosen to give them the same name of b, but they are not the same.

You can even see this in the console log output: the second one (logging b, the const b, not inside the function) is still ['M'] - it hasn’t changed

2 Likes

With strict mode, you can not use undeclared variables.
when i say :

you say

but:

i now:

:sunglasses:

1 Like

You need to have a refresher on scopes and parameters. As Dan explained to you above, although you have a global const called b and a function parameter called b , they are not the same variable. Whether the global b is a var or a let or a const or strict mode is enabled or disabled doesn’t matter, because they are not the same variables.

2 Likes

my point is: why? code 1:

const a = 8, b = 6;
(() => {
  "use strict";
  // change code below this line
  [a, b] = [b, a]
  // change code above this line
})();
console.log(a); // should be 6
console.log(b);

run with error, but code 2:

const a = ['JAN'];
const b = ["M"];
let result = function (a,b){    
   "use strict";
    b = [...a]; 
 
};
result(a,b);
console.log(b); 

run without error

I say code1 and code 2, have run with error @DanCouper

1 Like

a and b are parameters of the function you wrote, they have absolutely nothing to do with const a and const b, you’re not reassigning anything.

Just to reiterate:

The first one just contains the logic, the self-executing function is literally only there so that the “use strict” statement works properly for the tests, it’s the same as

const a = 1;
const b = 2;
[a, b] = [b, a] // error, a and b are not reassignable
2 Likes

hi @DanCouper @moein @colinthornton,

Thank you for the replies and the attempt to clear my confusion.
Please allow me to check if I have properly understood what you are saying:

  1. using the const keyword in javascript prevents the variable from being reassigned.
    i.e.
const x = 52;
x = 32; // this will fail
  1. using de-structuring allows the reassignment of the contents of the array, without the actual reassignment of the array - thus allowing the code in the examples given to work:
const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2
  1. the function expression in the middle of the code is only used for the automated testing
let a = 8, b = 6;
[a, b] = [b, a];
console.log(a);
console.log(b);

is how we would use this in a real world scenario

1 Like