turovskiy · November 30, 2023 09:36 · May 30, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 24, 2023
diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -1,6 +1,7 @@
-Frameworks like React require that when you change the contents of an array or object you change it's reference. Or push another way that you don't change arrays but instead create new arrays with updated values (i.e. immutability).
+Frameworks like React require that when you change the contents of an array or object you change its reference. Or push another way that you don't change arrays but instead create new arrays with updated values (i.e. immutability).
 
-There are older array methods that are incompatible with immutability because they alter the array in place and don't cghange the array reference. These are _destructive_ methods.
+There are older array methods that are incompatible with immutability because they alter the array in place and don't change
+the array reference. These are _mutable_ (or _destructive_) methods.
 
 Shown below are replacements for the array destructive methods (e.g. `push`, `pop`, `splice`, `sort`, etc.) that will create new array references with the updated data.
 

diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -95,7 +95,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-const shiftedValue = myArray.shift();
+const shiftedValue = myArray.shift(); // [3, 2]
 ```
 
 Non-destructive version:
@@ -111,7 +111,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray.unshift(6);
+myArray.unshift(6); // [6, 1, 3, 2]
 ```
 
 Non-destructive versions:
@@ -134,7 +134,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray.splice(1, 1, 4, 5, 6);
+myArray.splice(1, 1, 4, 5, 6); // [1, 4, 5, 6, 2]
 ```
 
 Non-destructive versions:
@@ -161,7 +161,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray.reverse();
+myArray.reverse(); // [2, 3, 1]
 ```
 
 Non-destructive versions:
@@ -184,7 +184,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray.sort();
+myArray.sort(); // [1, 2, 3]
 ```
 
 Non-destructive versions:

diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -12,7 +12,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray[1] = 10;
+myArray[1] = 10; // [1, 10, 2]
 ```
 
 Non-destructive versions:
@@ -47,7 +47,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray.push(5);
+myArray.push(5); // [1, 3, 2, 5]
 ```
 
 Non-destructive versions:
@@ -70,7 +70,7 @@ Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-const poppedValue = myArray.pop();
+const poppedValue = myArray.pop(); // [1, 3]
 ```
 
 Non-destructive versions:

diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -6,7 +6,7 @@ Shown below are replacements for the array destructive methods (e.g. `push`, `po
 
 Solutions are provided using the spread operator and also the newer ["change array by copy"](https://github.com/tc39/proposal-change-array-by-copy) methods (`toSpliced`, `toSorted`, `toReversed` and `with`).
 
-### Setting Value At Index
+## Setting Value At Index
 
 Destructive version:
 
@@ -41,7 +41,7 @@ const myArray = [1, 3, 2];
 const newArray = myArray.with(1, 10);
 ```
 
-### Push
+## Push
 
 Destructive version:
 
@@ -64,7 +64,7 @@ const myArray = [1, 3, 2];
 const newArray = myArray.toSpliced(myArray.length, 0, 5);
 ```
 
-### Pop
+## Pop
 
 Destructive version:
 
@@ -89,7 +89,7 @@ const poppedValue = myArray[myArray.length - 1];
 const newArray = myArray.toSpliced(myArray.length - 1, 1);
 ```
 
-### Shift
+## Shift
 
 Destructive version:
 
@@ -105,7 +105,7 @@ const myArray = [1, 3, 2];
 const [shiftedValue, ...newArray] = myArray;
 ```
 
-### Unshift
+## Unshift
 
 Destructive version:
 
@@ -128,7 +128,7 @@ const myArray = [1, 3, 2];
 const newArray = myArray.toSpliced(0, 0, 6);
 ```
 
-### Splice
+## Splice
 
 Destructive version:
 
@@ -155,7 +155,7 @@ const myArray = [1, 3, 2];
 const newArray = myArray.toSpliced(1, 1, 4, 5, 6);
 ```
 
-### Reverse
+## Reverse
 
 Destructive version:
 
@@ -178,7 +178,7 @@ const myArray = [1, 3, 2];
 const newArray = myArray.toReversed();
 ```
 
-### Sort
+## Sort
 
 Destructive version:
 

diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -1,5 +1,8 @@
-These are replacements for the array destructive methods (e.g. push, pop, splice, sort, etc.) that will
-create new array references with the updated data.
+Frameworks like React require that when you change the contents of an array or object you change it's reference. Or push another way that you don't change arrays but instead create new arrays with updated values (i.e. immutability).
+
+There are older array methods that are incompatible with immutability because they alter the array in place and don't cghange the array reference. These are _destructive_ methods.
+
+Shown below are replacements for the array destructive methods (e.g. `push`, `pop`, `splice`, `sort`, etc.) that will create new array references with the updated data.
 
 Solutions are provided using the spread operator and also the newer ["change array by copy"](https://github.com/tc39/proposal-change-array-by-copy) methods (`toSpliced`, `toSorted`, `toReversed` and `with`).
 
@@ -12,7 +15,7 @@ const myArray = [1, 3, 2];
 myArray[1] = 10;
 ```
 
-Non-destructive version:
+Non-destructive versions:
 
 ```js
 const myArray = [1, 3, 2];
@@ -47,7 +50,7 @@ const myArray = [1, 3, 2];
 myArray.push(5);
 ```
 
-Non-destructive version:
+Non-destructive versions:
 
 ```js
 const myArray = [1, 3, 2];
@@ -70,7 +73,7 @@ const myArray = [1, 3, 2];
 const poppedValue = myArray.pop();
 ```
 
-Non-destructive version:
+Non-destructive versions:
 
 ```js
 const myArray = [1, 3, 2];
@@ -111,7 +114,7 @@ const myArray = [1, 3, 2];
 myArray.unshift(6);
 ```
 
-Non-destructive version:
+Non-destructive versions:
 
 ```js
 const myArray = [1, 3, 2];
@@ -134,7 +137,7 @@ const myArray = [1, 3, 2];
 myArray.splice(1, 1, 4, 5, 6);
 ```
 
-Non-destructive version:
+Non-destructive versions:
 
 ```js
 const myArray = [1, 3, 2];
@@ -161,7 +164,7 @@ const myArray = [1, 3, 2];
 myArray.reverse();
 ```
 
-Non-destructive version:
+Non-destructive versions:
 
 ```js
 const myArray = [1, 3, 2];
@@ -184,7 +187,7 @@ const myArray = [1, 3, 2];
 myArray.sort();
 ```
 
-Non-destructive version:
+Non-destructive versions:
 
 ```js
 const myArray = [1, 3, 2];

diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -3,27 +3,39 @@ create new array references with the updated data.
 
 Solutions are provided using the spread operator and also the newer ["change array by copy"](https://github.com/tc39/proposal-change-array-by-copy) methods (`toSpliced`, `toSorted`, `toReversed` and `with`).
 
-### Sort
+### Setting Value At Index
 
 Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray.sort();
+myArray[1] = 10;
 ```
 
 Non-destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-const newArray = [...myArray].sort();
+const newArray = [...myArray];
+newArray[1] = 10;
 ```
 
-Or (if you have access to `toSorted`):
+Or: 
 
 ```js
 const myArray = [1, 3, 2];
-const newArray = myArray.toSorted();
+const newArray = [
+  ...myArray.slice(0, 1),
+  10,
+  ...myArray.slice(2, myArray.length)
+];
+```
+
+Or (if you have access to `with`):
+
+```js
+const myArray = [1, 3, 2];
+const newArray = myArray.with(1, 10);
 ```
 
 ### Push
@@ -163,37 +175,25 @@ const myArray = [1, 3, 2];
 const newArray = myArray.toReversed();
 ```
 
-### Setting Value At Index
+### Sort
 
 Destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-myArray[1] = 10;
+myArray.sort();
 ```
 
 Non-destructive version:
 
 ```js
 const myArray = [1, 3, 2];
-const newArray = [...myArray];
-newArray[1] = 10;
-```
-
-Or: 
-
-```js
-const myArray = [1, 3, 2];
-const newArray = [
-  ...myArray.slice(0, 1),
-  10,
-  ...myArray.slice(2, myArray.length)
-];
+const newArray = [...myArray].sort();
 ```
 
-Or (if you have access to `with`):
+Or (if you have access to `toSorted`):
 
 ```js
 const myArray = [1, 3, 2];
-const newArray = myArray.with(1, 10);
+const newArray = myArray.toSorted();
 ```
diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -1,6 +1,8 @@
 These are replacements for the array destructive methods (e.g. push, pop, splice, sort, etc.) that will
 create new array references with the updated data.
 
+Solutions are provided using the spread operator and also the newer ["change array by copy"](https://github.com/tc39/proposal-change-array-by-copy) methods (`toSpliced`, `toSorted`, `toReversed` and `with`).
+
 ### Sort
 
 Destructive version:
@@ -138,6 +140,29 @@ const myArray = [1, 3, 2];
 const newArray = myArray.toSpliced(1, 1, 4, 5, 6);
 ```
 
+### Reverse
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+myArray.reverse();
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const newArray = [...myArray].reverse();
+```
+
+Or (if you have access to `toReversed`):
+
+```js
+const myArray = [1, 3, 2];
+const newArray = myArray.toReversed();
+```
+
 ### Setting Value At Index
 
 Destructive version:

diff --git a/arrayDestructiveReplacements.md b/arrayDestructiveReplacements.md
@@ -0,0 +1,174 @@
+These are replacements for the array destructive methods (e.g. push, pop, splice, sort, etc.) that will
+create new array references with the updated data.
+
+### Sort
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+myArray.sort();
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const newArray = [...myArray].sort();
+```
+
+Or (if you have access to `toSorted`):
+
+```js
+const myArray = [1, 3, 2];
+const newArray = myArray.toSorted();
+```
+
+### Push
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+myArray.push(5);
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const newArray = [...myArray, 5];
+```
+
+Or (if you have access to `toSpliced`):
+
+```js
+const myArray = [1, 3, 2];
+const newArray = myArray.toSpliced(myArray.length, 0, 5);
+```
+
+### Pop
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const poppedValue = myArray.pop();
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const poppedValue = myArray[myArray.length - 1];
+const newArray = myArray.slice(0, myArray.length - 1);
+```
+
+Or (if you have access to `toSpliced`):
+
+```js
+const myArray = [1, 3, 2];
+const poppedValue = myArray[myArray.length - 1];
+const newArray = myArray.toSpliced(myArray.length - 1, 1);
+```
+
+### Shift
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const shiftedValue = myArray.shift();
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const [shiftedValue, ...newArray] = myArray;
+```
+
+### Unshift
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+myArray.unshift(6);
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const newArray = [6, ...myArray];
+```
+
+Or (if you have access to `toSpliced`):
+
+```js
+const myArray = [1, 3, 2];
+const newArray = myArray.toSpliced(0, 0, 6);
+```
+
+### Splice
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+myArray.splice(1, 1, 4, 5, 6);
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const newArray = [
+  ...myArray.slice(0, 1),
+  4, 5, 6,
+  ...myArray.slice(2, myArray.length)
+];
+```
+
+Or (if you have access to `toSpliced`):
+
+```js
+const myArray = [1, 3, 2];
+const newArray = myArray.toSpliced(1, 1, 4, 5, 6);
+```
+
+### Setting Value At Index
+
+Destructive version:
+
+```js
+const myArray = [1, 3, 2];
+myArray[1] = 10;
+```
+
+Non-destructive version:
+
+```js
+const myArray = [1, 3, 2];
+const newArray = [...myArray];
+newArray[1] = 10;
+```
+
+Or: 
+
+```js
+const myArray = [1, 3, 2];
+const newArray = [
+  ...myArray.slice(0, 1),
+  10,
+  ...myArray.slice(2, myArray.length)
+];
+```
+
+Or (if you have access to `with`):
+
+```js
+const myArray = [1, 3, 2];
+const newArray = myArray.with(1, 10);
+```