Update exercise for object-destructuring

Author: SleeplessByte

concepts/object-destructuring/introduction.md

@@ -2,13 +2,30 @@
 
 JavaScript's object destructuring syntax is a concise way to extract properties from an object and assign them to distinct variables.
 
-In this example, each value in the `numberOfMoons` array is assigned to its corresponding planet:
+In this example, weather symbols are extracted from the object `weather`:
 
 ```javascript
-const numberOfMoons = { venus: 0, mars: 2, neptune: 14 };
+const weather = {
+  sun: '☀️',
+  sun_behind_small_cloud: '🌤️',
+  sun_behind_cloud: '⛅',
+  sun_behind_large_cloud: '🌥️',
+  sun_behind_rain_cloud: '🌦️',
+  cloud: '☁️',
+  cloud_with_rain: '🌧️',
+  cloud_with_snow: '🌨️',
+  cloud_with_lightning: '🌩️',
+  cloud_with_lightning_and_rain: '⛈️',
+};
 
-const { venus, mars, neptune } = numberOfMoons;
+const { sun, cloud, cloud_with_lightning } = weather;
 
-neptune;
-// => 14
+sun;
+// => '☀️'
+
+cloud;
+// => '☁️'
+
+cloud_with_lightning;
+// => '🌩️'
 ```

exercises/concept/elyses-destructured-enchantments/.docs/hints.md

@@ -2,32 +2,35 @@
 
 ## 1. Get the first card
 
-- [This article][destructuring_overview_resource] has a good overview of array destructuring. You can find an example of basic variable assignment in the 'Basic Array Destructuring' section.
+- [This article][mdn-destructuring] has a good overview of array destructuring. You can find an example of basic variable assignment in the 'Basic Array Destructuring' section.
 
 ## 2. Get the second card
 
 - You can use placeholders to ignore one or more values in the array.
-- You can find an example [here][ignoring_some_values_resource].
+- You can find an example [on MDN][mdn-destructuring-ignore-value].
 
-## 3. Swap the first two cards
+## 3. Swap the two cards
 
 - It's possible to swap two values in a single destructuring expression.
-- You can find an example [here][swapping_variables_resource].
+- You can find an example [on MDN][mdn-destructuring-swapping].
 
-## 4. Discard the top card
+## 4. Shift three cards around
 
-- There is a [built-in][rest_operator_docs] operator that can be used to collect the remaining values in an array into a single variable.
-- You can find an example [here][rest_assignment_resource].
+- It's possible to change the position of three values in a single destructuring expression.
+- This is the same as swapping two values, but then with three (or more).
 
-## 5. Insert face cards
+## 5. Pick named pile
 
-- There is a [built-in][spread_operator_docs] operator that can be used to expand an array into a list.
-- You can find a more detailed overview [here][spread_operator_overview].
+- Objects can be destructured just like arrays.
+- You can find an example [on MDN][mdn-object-destructuring-basic-assignment].
 
-[destructuring_overview_resource]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Basic_variable_assignment
-[ignoring_some_values_resource]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Ignoring_some_returned_values
-[swapping_variables_resource]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Swapping_variables
-[rest_operator_docs]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Rest_syntax_parameters
-[rest_assignment_resource]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_the_rest_of_an_array_to_a_variable
-[spread_operator_docs]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
-[spread_operator_overview]: https://blog.alexdevero.com/javascript-spread-operator
+## 6. Swap named piles
+
+- When a property is extracted from an object, it can be renamed using specific syntax.
+- You can find an example [on MDN][mdn-object-destructuring-object-rename].
+
+[mdn-destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Basic_variable_assignment
+[mdn-destructuring-ignore-value]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Ignoring_some_returned_values
+[mdn-destructuring-swapping]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Swapping_variables
+[mdn-object-destructuring-basic-assignment]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#basic_assignment
+[mdn-object-destructuring-object-rename]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#assigning_to_new_variable_names

exercises/concept/elyses-destructured-enchantments/.docs/instructions.md

@@ -1,12 +1,29 @@
 # Instructions
 
-Elyse, magician-to-be, continues her training. She has a deck of cards she wants to manipulate.
+Elyse, magician-to-be, continues her training.
+She has a deck of cards she wants to manipulate.
 
-To make things easier, she usually only starts with cards numbered 1 to 10, although some of the tricks may involve additional cards.
+To make things easier, she usually only starts with cards numbered 2 to 10, although some of the tricks may involve additional (face) cards.
+
+<!-- prettier-ignore-start -->
+~~~~exercism/note
+There are **many** ways to shuffle the cards around, but to keep up the illusion of magic, it is vital that *no single method is used*, e.g. Elyse doesn't use `splice`, `slice`, `shift`, `unshift`, `push`, `at`.
+The array accessor `array[index]` and object accessor (`object[key]` and `object.key`) are also never to be used.
+~~~~
+<!-- prettier-ignore-end -->
+
+Want to level up Elyse her magic?
+
+<!-- prettier-ignore-start -->
+~~~~exercism/advanced
+Every function can be implemented using the parameters and a function body with a single `return expression`.
+~~~~
+<!-- prettier-ignore-end -->
 
 ## 1. Get the first card
 
-Elyse will summon the first card in the deck without using the `array[index]` or `.shift()`. It's just like magic.
+Elyse will summon the first card in the deck without using the `array[index]`, `.at(index)`, or `.shift()`.
+It's just like magic.
 
 ```javascript
 const deck = [5, 9, 7, 1, 8];
@@ -17,7 +34,7 @@ getFirstCard(deck);
 
 ## 2. Get the second card
 
-Elyse performs sleight of hand and summons the second card in the deck without using the `array[index]`.
+Elyse performs sleight of hand and summons the second card in the deck without using the `array[index]` or `.shift()`.
 
 ```javascript
 const deck = [3, 2, 10, 6, 7];
@@ -26,35 +43,56 @@ getSecondCard(deck);
 // => 2
 ```
 
-## 3. Swap the first two cards
+## 3. Swap two cards
+
+Elyse will make the two cards of the deck switch places.
+She doesn't need to call a single function.
+
+```javascript
+const deck = [10, 7];
+
+swapTwoCards(deck);
+// => [7, 10]
+```
+
+## 4. Shift three cards around
 
-Elyse will make the top two cards of the deck switch places. She doesn't need to call a single function.
+In order to perform some more sleight of hand, Elyse takes three cards and quickly moves the top card to the back, making the middle card the first card and the old bottom card the middle card.
+She doesn't need to call a single function.
 
 ```javascript
-const deck = [10, 7, 3, 8, 5];
+const deck = [2, 6, 10];
 
-swapTopTwoCards(deck);
-// => [7, 10, 3, 8, 5]
+shiftThreeCardsAround(deck);
+// => [6, 10, 2]
 ```
 
-## 4. Discard the top card
+## 5. Pick the named pile
 
-Elyse will separate the deck into two piles. The first pile will contain only the top card of the original deck, while the second pile will contain all the other cards.
+Elyse will separate the deck into two piles.
+She then asks the observer to pick one of the two piles, which we'll name `chosen`.
+The `disregarded` pile is no longer relevant, which she makes disappear.
+She doesn't need to call a single function.
 
 ```javascript
-const deck = [2, 5, 4, 9, 3];
+const deck = [5, 4, 7, 10];
+const chosen = [5, 4];
+const disregarded = [7, 10];
 
-discardTopCard(deck);
-// => [2, [5, 4, 9, 3]]
+pickNamedPile({ chosen, disregarded });
+// => [5, 4]
 ```
 
-## 5. Insert face cards
+## 5. Swap the picked pile
 
-Elyse will insert a set of face cards (i.e. jack, queen, and king) into her deck such that they become the second, third, and fourth cards, respectively.
+Unfortunately the observer keeps picking the "wrong" pile, but with some clever fast magic, Elyse renames the `chosen` pile to be `disregarded` and the `disregarded` pile to be the `chosen` pile.
+She doesn't need to call a single function.
 
 ```javascript
 const deck = [5, 4, 7, 10];
+const chosen = [5, 4];
+const disregarded = [7, 10];
 
-insertFaceCards(deck);
-// => [5, 'jack', 'queen', 'king', 4, 7, 10]
+swapNamedPile({ chosen, disregarded });
+// => { chosen: [7, 10], disregarded: [5, 4] }
 ```

exercises/concept/elyses-destructured-enchantments/.docs/introduction.md

@@ -14,31 +14,45 @@ neptune;
 // => 14
 ```
 
-## Rest and spread
+In short:
 
-JavaScript has a built-in `...` operator that makes it easier to work with indefinite numbers of elements. Depending on the context, it's called either a _rest operator_ or _spread operator_.
+- The syntax allows for naming _positioned_ elements in an array, as well as swapping variables using re-assignment.
+- Destructuring syntax is available inside function parameters, and is available on any iterable.
+- Leaving a position unnamed (by not writing _any_ variable name) silently ignores that position.
 
-### Rest elements
+## Object destructuring
 
-When `...` appears on the left-hand side of an assignment, those three dots are known as the `rest` operator. The three dots together with a variable name is called a rest element. It collects zero or more values, and stores them into a single array.
+In JavaScript, there is also destructuring syntax to extract properties from an object and assign them to distinct variables.
 
-```javascript
-const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];
+In this example, weather symbols are extracted from the object `weather`:
 
-everythingElse;
-// => [1, 2, 3, 5, 8]
+```javascript
+const weather = {
+  sun: '☀️',
+  sun_behind_small_cloud: '🌤️',
+  sun_behind_cloud: '⛅',
+  sun_behind_large_cloud: '🌥️',
+  sun_behind_rain_cloud: '🌦️',
+  cloud: '☁️',
+  cloud_with_rain: '🌧️',
+  cloud_with_snow: '🌨️',
+  cloud_with_lightning: '🌩️',
+  cloud_with_lightning_and_rain: '⛈️',
+};
+
+const { sun, cloud, cloud_with_lightning: thunder } = weather;
+
+sun;
+// => '☀️'
+
+cloud;
+// => '☁️'
+
+thunder;
+// => '🌩️'
 ```
 
-Note that in JavaScript, unlike some other languages, a `rest` element cannot have a trailing comma. It _must_ be the last element in a destructuring assignment.
-
-### Spread elements
-
-When `...` appears on the right-hand side of an assignment, it's known as the `spread` operator. It expands an array into a list of elements. Unlike the rest element, it can appear anywhere in an array literal expression, and there can be more than one.
+In short:
 
-```javascript
-const oneToFive = [1, 2, 3, 4, 5];
-const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];
-
-oneToTen;
-// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-```
+- The syntax allows for both extracting properties as well as extracting and renaming them.
+- Destructuring syntax is available inside function parameters.

exercises/concept/elyses-destructured-enchantments/.meta/design.md

@@ -4,22 +4,19 @@
 
 - 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
+- Using destructuring to extract properties from an object
+- Using destructuring to extract properties from an object and rename them
 
 ## Out of scope
 
-- Anything with objects
 - Default values
 
 ## Concepts
 
 - `array-destructuring`
-- `rest-and-spread`
+- `object-destructuring`
 
 ## Prerequisites
 

exercises/concept/elyses-destructured-enchantments/.meta/exemplar.js

@@ -24,39 +24,46 @@ export function getSecondCard([, second]) {
 }
 
 /**
- * Switch the position of the first two cards in the given deck
+ * Switch the position of the two cards
  *
- * @param {Card[]} deck
+ * @param {[Card, Card]} deck
  *
- * @returns {Card[]} new deck with reordered cards
+ * @returns {[Card, Card]} new deck with the 2 cards swapped
  */
-export function swapTopTwoCards([a, b, ...rest]) {
-  return [b, a, ...rest];
+export function swapTwoCards([a, b]) {
+  return [b, a];
 }
 
 /**
- * Put the top card of the given deck into a separate discard pile
+ * Rotate (shift) the position of the three cards (by one place)
  *
- * @param {Card[]} deck
+ * @param {[Card, Card, Card]} deck
  *
- * @returns {[Card, Card[]]} the top card of the given
- * deck and a new deck containing all the other cards
+ * @returns {[Card, Card, Card]} new deck with the 3 cards shifted by one position
  */
-export function discardTopCard([first, ...rest]) {
-  return [first, rest];
+export function shiftThreeCardsAround([a, b, c]) {
+  return [b, c, a];
 }
 
-/** @type Card[] **/
-const FACE_CARDS = ['jack', 'queen', 'king'];
-
 /**
- * Insert face cards into the given deck
+ * Grab the chosen pile from the available piles
  *
- * @param {Card[]} deck
+ * @param {{ chosen: Card[], disregarded: Card[] }} piles
+ *
+ * @returns {Card[]} the pile named chosen
+ */
+export function pickNamedPile({ chosen }) {
+  return chosen;
+}
+
+/**
+ * Swap the chosen pile for the disregarded pile and the disregarded pile for the chosen pile
  *
- * @returns {Card[]} new deck where the second,
- * third, and fourth cards are the face cards
+ * @param {{ chosen: Card[], disregarded: Card[] }} piles
+ * @returns {{ chosen: Card[], disregarded: Card[] }} new piles where the two piles are swapped
  */
-export function insertFaceCards([head, ...tail]) {
-  return [head, ...FACE_CARDS, ...tail];
+export function swapNamedPile({ chosen: disregarded, disregarded: chosen }) {
+  // 🪄 Don't break the magic.
+  // Do NOT touch the next line or Elyse will accidentally reveal the trick.
+  return { chosen, disregarded };
 }