A doubt from a JavaScript Quiz!

Question

Hey, Jonathan Pizarra

In one of your quiz factory contributions this was a question you had contributed,

QUESTION,
let [learn, solo = “solo] = “learn”;
[solo, learn] = [learn, solo];
console.log(solo + learn);

ANSWER,
le

I answered it wrong because I didn’t understand how this code works!
Could you explain to me how this code works and how the answer is “LE” please?
It would be really helpful if you’d answer
Thanks in advance 🙌🏻😄

Answer 1

Raaja Thalapathy that's actually an interesting discovery I found out while tinkering with array destructuring. What happens is that the string "learn" is considered as an iterable much like an array ["l", "e", "a", "r", "n"].
So, variable learn is assigned with "l" and variable solo becomes "e".

The second line just switches their values. Thus,
learn = "e";
solo = "l";

Therefore,
solo + learn = "le".

I hope you understand my explanation😅

Answer 2

The syntax [var1, var2] = [elem1, elem2] is often used in unpacking/destructuring arrays.
In this case, the string is treated as an array of characters, thus resulting in:

let [learn, solo = "solo"] = "learn" // learn: "l", solo: "e"

Worth noting that solo = "solo" is the default value and is added in the quiz to confuse the player it seems. (solo === "solo") if the array mentioned here has only 1 element (E.g: "l")

[solo, learn] = [learn, solo]; // Swap the values of solo and learn: solo: "l", learn: "e"

console.log(solo + learn) // Output: "le"

Answer 3

Nguyễn Văn Hoàng
Lol 😂, Exactly i got confused in that solo = “solo”. Thanks for letting me know, Really thanks for your reply bro 😁

I have another small doubt,

So why does Javascript works that way right? I mean why does it assign learn = l & solo = e;
Is there any reason to it? I dont think its a bug must be feature & where do we use it?

Answer 4

Nguyễn Văn Hoàng
Wow thats really a boat-load of information i never knew existed!
Had it not been you, I wouldnt have know it.......Really thank you for taking your time & explaining man! ☺️
I owe you 🙌🏻👌🏻👌🏻

R u discord?
Next time if i have any doubt can i reach out to you Nguyen?

Answer 5

Jonathan Pizarra Ya im able to get a hold onto it! Thanks man 😁🙌🏻

Btw just asking out of curiosity 😇
Is there an practical application to it? Like in a particular type of algorithm is it used?
Any example which you know would be helpful to understand even better!

Answer 6

Raaja Thalapathy In previous versions of ECMAScript (original JS implementation), you have to do something like
var nameArr = ["bob", "john"];
var name1 = nameArr[1], name2 = nameArr[2];

1. The destructuring syntax was introduced in ES6 for more convenience: [name1, name2] = nameArr

2. As for why the syntax also work for strings: Many built-in methods & operators for arrays also work on string because a string can be treated as an array-like object. This depends on the language you are working with (JS in this case).

I'm not so sure about which one you are asking, so I'll talk about both.

1. Array destructuring is useful when you need to work on elements of array seperately. Typical example: The position of sprites in most 2D games. You called the position getter, it returned an array [posX, posY], and you needed to check whether charSprite had touched the border of the map or not, the syntax would come in handy.

2. I rarely see implementation of destructuring strings though.

Answer 7

Raaja Thalapathy No prob.
Sorry, I don't use discord. Feel free to ask the great community here, as I'm not majoring in computer science, thus, my understanding of the subject is only partial.

Answer 8

Funny how this syntax works : [a, b, c, d, e] = "learn"
you end up with
a == "l"
b == "e"
c == "a"
d == "r"
e == "n"