Fix all the things around Elyses Enchantments

Author: SleeplessByte

concepts/arrays/.meta/config.json

@@ -1,5 +1,5 @@
 {
-  "blurb": "TODO: add blurb for arrays concept",
-  "authors": ["ovidiu141"],
-  "contributors": ["peterchu999", "SleeplessByte"]
+  "blurb": "Arrays in JavaScript are list-like objects without a fixed length or fixed item type.",
+  "authors": ["ovidiu141", "SleeplessByte"],
+  "contributors": ["peterchu999"]
 }

concepts/arrays/about.md

@@ -1,6 +1,7 @@
 # About
 
-In Javascript, an array is actually just a regular object where the elements are properties of that object. It includes the `length` property and also lots of [useful methods][array-docs] for traversing and mutating the array.
+In Javascript, an array is actually a regular `object` where the elements are properties of that object.
+It includes the `length` property and also lots of [useful methods][array-docs] for traversing and mutating the array.
 
 Declaring an array and accessing an element:
 
@@ -10,4 +11,120 @@ names[1];
 // => Laura
 ```
 
+Arrays cannot use `strings` as element indexes, but must use integers ([`number`][concept-numbers]).
+Setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection.
+The array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties.
+
+```javascript
+const names = ['Jack', 'Laura', 'Paul', 'Megan'];
+names.length
+// => 3
+
+// Properties can be set on arrays using bracket ['property'] or dot .property
+// notation, and this will affect the length, as shown below.
+
+names.magician = 'Elyse'
+names.length
+// => 4
+
+// The property shows up when logging the array, making it seem that the
+// property is somehow incorporated in the array.
+
+names
+// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]
+
+// However, be aware. Properties added via non-numeric keys are NOT part of the
+// array's internal list, and are not traversed or mutated when using one of
+// the traversal or mutation operations.
+
+names.forEach((name) => console.log(name))
+// => Jack
+// => Laura
+// => Paul
+// => Megan
+```
+
+## Deleting items from an array
+
+Arrays in JavaScript are regular `objects`, and items can be deleted using the `delete` keyword.
+However, this does not change the _length_ of the array, and leaves a hole of `empty`.
+In other languages this is similar to a sparse array.
+The `empty` holes are skipped when using traversal or mutation operations.
+
+```javascript
+const names = ['Jack', 'Laura', 'Paul', 'Megan'];
+delete names[1]
+
+names
+// =>  ["Jack", empty, "Paul", "Megan"]
+
+names.length
+// => 4
+
+names.forEach((name) => console.log(name))
+// => Jack
+// => Paul
+// => Megan
+```
+
+If there should be no holes, and if the `length` should reflect the amount of items that will be traversed or mutated, use `splice` instead:
+
+```javascript
+const names = ['Jack', 'Laura', 'Paul', 'Megan'];
+names.splice(1, 1)
+
+names
+// =>  ["Jack", "Paul", "Megan"]
+
+names.length
+// => 3
+
+names.forEach((name) => console.log(name))
+// => Jack
+// => Paul
+// => Megan
+```
+
+## Array length can be mutated
+
+The `length` property of an array is connected to the list of items the array holds.
+It can be mutated.
+When the length is increased, it creates `empty` holes, that are not considered when traversing or mutating the array.
+When the length is decreased, it _removes_ the elements at the end of the array.
+
+```javascript
+const names = ['Jack', 'Laura', 'Paul', 'Megan'];
+names.length = 6
+
+names
+// => ["Jack", "Laura", "Paul", "Megan", empty × 2]
+
+names.length = 2
+// =>  ["Jack", "Laura"]
+```
+
+## Checking is something is an Array
+
+Because arrays are `objects`, `typeof names` gives `"object"`.
+To check if something is an Array, use `Array.isArray`:
+
+```javascript
+const names = ['Jack', 'Laura', 'Paul', 'Megan'];
+
+typeof names
+// => "object"
+
+Array.isArray(names)
+// => true
+
+const object = {}
+Array.isArray(object)
+// => false
+```
+
+You might be tempted to use `names instanceof Array`, and that can work, but not under all circumstances.
+Read [this article][instanceof-vs-array-is-array] for more information.
+
 [array-docs]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Instance_methods
+[concept-numbers]: /tracks/javascript/concepts/numbers
+[instanceof-vs-array-is-array]: https://web.mit.edu/jwalden/www/isArray.html

concepts/arrays/introduction.md

@@ -1,6 +1,7 @@
 # Introduction
 
-In Javascript, an array is a list-like structure with no fixed length which can hold any type of primitives or ojects, even mixed types. The array elements can be accesed by their index.
+In Javascript, an array is a list-like structure with no fixed length which can hold any type of primitives or objects, even mixed types.
+The array elements can be accessed by their index.
 
 Example of an array declaration and accessing an element by index:
 

concepts/arrays/links.json

@@ -1,6 +1,6 @@
 [
   {
     "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Instance_methods",
-    "description": "array-docs"
+    "description": "MDN: Arrays"
   }
 ]

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

@@ -9,28 +9,28 @@
 
 - The array is a mutable structure, you can change its content anytime.
 - You can find an example [here][change_array_elements_resource], inside the 'Changing an Array Element' section.
-
 ## 3. Insert a card at the top of the stack
 
 - There is a [built-in][push_method_docs] method to add a new value to the end of the array.
 
-## 4. Remove a card from the stack
+## 4. Insert a card at the bottom of the stack
 
-- There is a [built-in][splice_method_docs] method that, among other use cases, can be used to remove elements starting at a certain position.
+- There is a [built-in][unshift_method_docs] method to add a new value to the beginning of the array.
 
-## 5. Remove the top card from the stack
 
-- There is a [built-in][pop_method_docs] method to remove the last element from the array.
+## 5. Remove a card from the stack
 
-## 6. Insert a card at the bottom of the stack
+- There is a [built-in][splice_method_docs] method that, among other use cases, can be used to remove elements starting at a certain position.
 
-- There is a [built-in][unshift_method_docs] method to add a new value to the beginning of the array.
+## 6. Remove the top card from the stack
+
+- There is a [built-in][pop_method_docs] method to remove the last element from the array.
 
 ## 7. Remove a card from the bottom of the stack
 
 - There is a [built-in][shift_method_docs] method to remove the first element from the array.
 
-## 8. Check size of the stack
+## 8. Check the size of the stack
 
 - Arrays have a [property][length_property_docs] to retrieve their length.
 

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

@@ -6,68 +6,73 @@ To make things a bit easier she only uses the cards 1 to 10.
 
 ## 1. Retrieve a card from a stack
 
-Return the card at position `index` from the given stack.
+In order to pick a card, return the card at position `position` from the given stack.
 
 ```javascript
-const index = 2;
-getItem([1, 2, 4, 1], index);
+const position = 2;
+getItem([1, 2, 4, 1], position);
 // => 4
 ```
 
 ## 2. Exchange a card in the stack
 
-Exchange the card at position `index` with the new card provided and return the adjusted stack.
-Note that this will also change the input slice which is ok.
+Perform some sleight of hand and exchange the card at position `position` with the new card provided.
+Return the adjusted stack.
 
 ```javascript
-const index = 2;
+const position = 2;
 const newCard = 6;
-setItem([1, 2, 4, 1], index, newCard);
+setItem([1, 2, 4, 1], position, newCard);
 // => [1, 2, 6, 1]
 ```
 
-## 3. Insert a card at the of top the stack
+## 3. Insert a card at the top of the stack
 
-Insert new card at the top of the stack and return the stack.
+Make a card appear, by inserting a new card at the top of the stack.
+Return the adjusted stack.
 
 ```javascript
 const newCard = 8;
 insertItemAtTop([5, 9, 7, 1], newCard);
 // => [5, 9, 7, 1, 8]
 ```
 
-## 4. Remove a card from the stack
+## 4. Insert a card at the bottom of the stack
 
-Remove the card at position `index` from the stack and return the stack.
+Make a card appear, by inserting a new card at the bottom of the stack.
+Return the adjusted stack.
 
 ```javascript
-const index = 2;
-removeItem([3, 2, 6, 4, 8], index);
-// => [3, 2, 4, 8]
+const newCard = 8;
+insertItemAtBottom([5, 9, 7, 1], newCard);
+// => [8, 5, 9, 7, 1]
 ```
 
-## 5. Remove the top card from the stack
+## 5. Remove a card from the stack
 
-Remove the card at the top of the stack and return the stack.
+Make a card disappear by removing the card the given `position` from the stack.
+Return the adjusted stack.
 
 ```javascript
-removeItemFromTop([3, 2, 6, 4, 8]);
-// => [3, 2, 6, 4]
+const position = 2;
+removeItem([3, 2, 6, 4, 8], position);
+// => [3, 2, 4, 8]
 ```
 
-## 6. Insert a card at the bottom of the stack
+## 6. Remove the top card from the stack
 
-Insert new card at the bottom of the stack and return the stack.
+Make a card disappear by removing the card at the top of the stack.
+Return the adjusted stack.
 
 ```javascript
-const newCard = 8;
-insertItemAtBottom([5, 9, 7, 1], newCard);
-// => [8, 5, 9, 7, 1]
+removeItemFromTop([3, 2, 6, 4, 8]);
+// => [3, 2, 6, 4]
 ```
 
 ## 7. Remove a card from the bottom of the stack
 
-Remove the card at the bottom of the stack and return the stack.
+Make a card disappear by removing the card at the bottom of the stack.
+Return the adjusted stack.
 
 ```javascript
 removeItemAtBottom([8, 5, 9, 7, 1]);

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

@@ -1,6 +1,7 @@
 # Introduction
 
-In Javascript, an array is a list-like structure with no fixed length which can hold any type of primitives or ojects, even mixed types. The array elements can be accesed by their index.
+In Javascript, an array is a list-like structure with no fixed length which can hold any type of primitives or objects, even mixed types.
+The array elements can be accessed by their index.
 
 Example of an array declaration and accessing an element by index:
 

exercises/concept/elyses-enchantments/.meta/config.json

@@ -1,7 +1,7 @@
 {
-  "blurb": "TODO: add blurb for elyses-enchantments exercise",
-  "authors": ["ovidiu141"],
-  "contributors": ["peterchu999", "SleeplessByte"],
+  "blurb": "Help Elyse with her Enchantments and learn about arrays in the process.",
+  "authors": ["ovidiu141", "SleeplessByte"],
+  "contributors": ["peterchu999"],
   "files": {
     "solution": ["enchantments.js"],
     "test": ["enchantments.spec.js"],

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

@@ -0,0 +1,21 @@
+# Design
+
+## Learning objectives
+
+## Out of scope
+
+## Concepts
+
+- `arrays`
+
+## Prerequisites
+
+- `numbers` (and `basics`)
+
+## Analyzer
+
+This exercise could benefit from the following rules added to the the [analyzer][analyzer]:
+
+- Verify the simplicity of every method
+
+[analyzer]: https://github.com/exercism/javascript-analyzer