V3: [JavaScript] Implement new Concept Exercise: array-destructuring

[SleeplessByte]

This issue describes how to implement the array-destructuring concept exercise for the javascript track.

Getting started

Please please please read the docs before starting. Posting PRs without reading these docs will be a lot more frustrating for you during the review cycle, and exhaust Exercism's maintainers' time. So, before diving into the implementation, please read up on the following documents:

• The features of v3.
• Rationale for v3.
• What are concept exercise and how they are structured?

Please also watch the following video:

• The Anatomy of a Concept Exercise.

See the documentation _above_ (general documentation), as well as How to implement a Concept Exercise in JavaScript.

Goal

The goal of this exercise is to teach the student how they can _destructure_ an array into multiple bindings.

Learning objectives

• Using destructuring to get the first item of an array
• Using destructuring to get the second item of an array (skip hole)
• Using destructuring + rest elements to get the last item of an array
• Using destructuring to get the first two items of an array
• Using destructuring + rest elements to get the head and tail of an array
• Using spread to turn an array into a list of parameters
• Using rest elements to turn a list of parameters into an array
• Using destructuring to swap two values

Out of scope

• Anything with objects
• Default values

Concepts

• array-destructuring
• spread-elements
• rest-elements

@ErikSchierboom please advice. These are three concepts, which can be used on their own, but not when learning/teaching. It makes absolute sense to have them _separately_ for exercises, but not when teaching the concept itself.

However, we _could_ argue that, because you learn them all together here, that for us it's just 'one concept'. In that case, I need help with the name (probably still array-descructuring). The counter part is object-destructuring).

Prerequisites

• arrays
• ... (do you think something is missing?)

After

• Show how you can do Default values in Array-destructuring.
• Show how you can do _nested_ destructuring (e.g. [first, [, nestedSecond]])

Help

You can choose to do this solo-style, or collaborate with multiple people on this. My suggestion would be is to

1. first accept this issue by saying "I'd like to work on this" (you will not get a response from me. Just go with it) and optionally request that someone works with you (and wait for a second person to accept your request).
2. Use this issue to write down what you need (collect reference material) and discuss, if necessary, what to write and what not to write.
3. Draft a PR and request the feedback from at least one other JavaScript member (I recommend just pinging the channel on slack).

[ErikSchierboom]

@ErikSchierboom please advice. These are three concepts, which can be used on their own, but not when learning/teaching. It makes absolute sense to have them separately for exercises, but not when teaching the concept itself.

However, we could argue that, because you learn them all together here, that for us it's just 'one concept'. In that case, I need help with the name (probably still array-descructuring). The counter part is object-destructuring).

@SleeplessByte I'd have the exercise be named after the primary concept (which looks to be array-destructuring) and have it unlock three concepts: array-destructuring, spread-elements and rest-elements

[joshgoebel]

Is there a recommended story for this one?

[ErikSchierboom]

No idea. @SleeplessByte?

[SleeplessByte]

All array exercises should probably be the same magician thing :paintbrush:

[kristinaborn]

I'd like to work on this, assuming @joshgoebel hasn't taken it?

[joshgoebel]

@kristinaborn Go for it.

[SleeplessByte]

@kristinaborn you can take it!

[shubhsk88]

I'd like to work on this considering @kristinaborn isn't working on it?

[kristinaborn]

@shubhsk88 I've been chipping away at it. Should be able to get a draft PR up this weekend.

[kristinaborn]

Nearly done, but I'm missing task coverage for a couple of the learning objectives because they don't totally make sense to me. @SleeplessByte perhaps you could clarify?

"Using destructuring to get the first two items of an array" -- how is this different from the "Using destructuring to get the first item of an array" objective?

"Using destructuring + rest elements to get the last item of an array" -- maybe I'm missing something, but this seems odd. What's the use case for breaking out rest syntax to retrieve a single item? Wouldn't you always just use a regular variable?

[SleeplessByte]

const [first] = items
const [, second] = items
const [first, second] = items

# this doesn't work on JavaScript, but works in
# many other languages
const [_..., last] = items

You don't need to teach everything individually. And maybe something is impossible to teach.

Let met know if you have ideas!

[kristinaborn]

Calling out the difference in the way rest works vs. other languages is definitely a good point. Trying to teach that via a task would be awkward, so I'll discuss it in the after doc instead.

[henricazottes]

@SleeplessByte shouldn't this be closed?

[SleeplessByte]

Yep! Thanks @henricazottes