# About Arrays and their mutations
As we know, JavaScript stores objects and arrays in heap storage. 
That means the memory assigned for a specific array / object is dynamic and once the array has been created. And we don't always want this. 

```js:ArrayMethods.js
let demoArray = [ 'a', 'b', 'c'];
let newArray = demoArray;

newArray[0] = 'd';

console.log(demoArray); // ['d', 'b', 'c']
console.log(newArray); // ['d', 'b', 'c']
```

Because of that, we often find ourselves creating copies of the arrays to apply our changes without mutating the original. This is usually done with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" target="_blank" rel="noopener">spread (three dots) operator</a>

```js:SpreadOperator.js

const numbersArray = [1, 2, 3];
let numbersArrayCopy = [...numbersArray];

numbersArrayCopy[0] = 5;
console.log(numbersArray) // [1, 2, 3]
console.log(numbersArrayCopy) // [5, 2, 3]
```
Since cloning arrays is so common when we want to keep the original immutable, a new specification reached stage 3.

The following proposal, is what introduces these methods and I'm pretty sure everyone will welcome them with excitement. Read more regarding the <a href="https://github.com/tc39/proposal-change-array-by-copy" target="_blank" rel="noopener"> *"Change Array by copy"*</a>

If you want to check this out, here is a <a href='https://github.com/tc39/proposal-change-array-by-copy/blob/main/polyfill.js' target='_blank' rel='noopener'>polyfill</a> that recreates the proposal's behaviour.

# New Change Array by Copy methods

The proposal adds 4 new methods which will copy an array and then apply the changes. These methods are the following : 

- *Array.prototype.toReversed()* - Clones an array, and then reverses it.
- *Array.prototype.toSorted(compareFn)* - Clones an array, and then sorts it.
- *Array.prototype.toSpliced(start, deleteCount, ...items)* - Clones an array, and splices it in some way
- *Array.prototype.with(index, value) - Clones an array, and adds a new element in the index you provide

##### toReversed()
*toReversed()* does exactly what it says. It clones an array, and reverses the order of the values in it. Since this method clones the array, we don't need to do any manual copy of the original to create a new version :
```js:toReversed.js
let arrayA = [ 'a', 'b', 'c' ];
let arrayB = arrayA.toReversed();

console.log(arrayA, arrayB); // Returns [ 'a', 'b', 'c'], [ 'c', 'b', 'a' ]
```

##### toSorted()
*toSorted()* is the immutable version of sort(), meaning it will not mutate (alter) the original array. It will clone it instead and sort it (numerically by default) :

```js:toSorted.js
let x = [ 5, 1, 2, 4, 3];
let y = x.toSorted(); // returns [ 1, 2, 3, 4, 5 ]
```

You can also use a comparison method exactly like the *sort()* method in JavaScript, and it is really useful when we want to sort an array of objects :

```js:toSortedObjectArray.js
let arrayA = [
    { value: 1 },
    { value: 5 },
    { value: 3 },
    { value: 4 },
    { value: 2 }
];


let arrayB = arrayA.toSorted((a, b) => {
    return a.value - b.value
});

console.log(arrayB);
// [
//	  { value: 1 },
//    { value: 2 },
//    { value: 3 },
//    { value: 4 },
//    { value: 5 }
// ]
```

##### toSpliced()
*toSpliced()* is the immutable version of *splice()*. It doesn't alter the original array and accepts 3 arguments: 
- *start* - the position to start at.
- *deleteCount* - the number of elements to remove.
- *...items* - any items to insert at index after deletion.

```js:toSpliced.js
let x = [ "Car", "Bike", "Scooter", "Motorcycle", "RollerBlades", "Skateboard" ];


let y = x.toSpliced(1, 2, "Train"); //y=[ "Car", "Train", "Bat",  "Motorcycle", "RollerBlades", "Skateboard" ]


let z = x.toSpliced(1, 3); // z=[ "Car", "RollerBlades", "Skateboard" ]
```

as you can see, this is an example of how useful these new methods are. 
The original array would've been mutated had we used the *sort()* method, but with *toSpliced()* we can use the original array as many times, without worrying about altering it.

##### with()
Last, we have *with()*, which takes an array, and returns a clone of it "with" a something we declare : 
```js:with.js
let x = [ "Car", "Bike", "Scooter" ];

let y = x.with(1, "Train"); // y=["Car", "Train", "Scooter"]

let z = x.with(0, "Skateboard"); // z=["Scateboard", "Bike", "Scooter"]
```

## Conclusion

This is a very welcome addition to JavaScript. It was needed, since JavaScript maintains only one copy of the an object or an array. With these new methods, the complexity of keeping the the original array untouched ir removed and the readability of the code improves a lot.

New array methods coming in JavaScript

A Type Guard is a technique used to test if a value is of a specific type depending on the boolean returned by a regular function that contains (usually) a conditional block. This technique is used to make sure that the tested value is of that specific type we are checking for.

Type Guards are pretty helpful as you can imagine. One example could be that we retrieve data from an API but we don't know if that returned value is of the Type we are looking for. To do so we can create a "User Defined Type Guard"

Let's see how it is done.

```ts:retrieve-pancake.ts

let couldBePancake: unknown  // Api response retrieved

// Custom typeguard function
type Pancake = {
	name: string;
    variant: 'salty' | 'sweet';
    toppings: number;
    totalPrice: number;
 }
 
 	console.log(couldBePancake.name) // Object is of type unknown
 
```

in the example above, we cannot use 'couldBePancake.name' because we don't know yet if it is of type 'Pancake'. We need to implement the following :


```ts:retrieve-pancake.ts

let couldBePancake: unknown  // Api response retrieved

// Custom typeguard function
type Pancake = {
	name: string;
    variant: 'salty' | 'sweet';
    toppings: number;
    totalPrice: number;
 }
 
 // Exhaustively checking if obj contains all attributes of Pancake
 function isPancake(obj: any): obj is Pancake {
 	return obj.name && obj.variant && obj.toppings && totalPrice
 }
 
 // calling the guard type
 if (isPancake(couldBePancake)) {
 	console.log(couldBePancake.name) // no errors here
 }
 
```

Since we narrowed the type down to make sure it is a Pancake, we can use couldBePancake.name. 

In short our logic goes like "If this is indeed of Type Pancake, then we can go ahead and use couldBePancake.name ." And all our TS errors are gone.

We have to take note that TypeScript doesn't assume type guards remain active in callback as making this assumption is dangerous.



```ts:retrieve-pancake.ts

let couldBePancake: unknown  // Api response retrieved
let basePrice: number; // comes from configuration

// Custom typeguard function
type Pancake = {
	name: string;
    variant: 'salty' | 'sweet';
    toppings: number;
 }
 
 // Exhaustively checking if obj contains all attributes of Pancake
 function isPancake(obj: any): obj is Pancake {
 	return obj.name && obj.variant && obj.toppings && totalPrice
 }
 
 // calling the guard type
 if (isPancake(couldBePancake)) {
 	console.log(couldBePancake.name)
    // BUT this will not work
    calculateTotal(()=> {
    	console.log(couldBePancake.toppings * 1.1 + basePrice) // TS Error: Object is possibly 'undefined'
    }
 }
 
```


if we want to fix this 'issue' we can simply store the inferred safe value in a local variable. That way TypeScript can easily understand that it doesn't get changed externally.




```ts:retrieve-pancake.ts

let couldBePancake: unknown  // Api response retrieved
let basePrice: number; // comes from configuration

// Custom typeguard function
type Pancake = {
	name: string;
    variant: 'salty' | 'sweet';
    toppings: number;
 }
 
 // Exhaustively checking if obj contains all attributes of Pancake
 function isPancake(obj: any): obj is Pancake {
 	return obj.name && obj.variant && obj.toppings && totalPrice
 }
 
 // calling the guard type
 if (isPancake(couldBePancake)) {
 	console.log(couldBePancake.name)
    const numOfToppings = couldBePancake.toppings
    calculateTotal(()=> {
    	console.log(numOfToppings * 1.1 + basePrice) // TS understands that numOfToppings inferred type is "number".
    }
 }
 
```

User Defined Type Guards in TypeScript

So you have read a couple of tutorials, followed some youtube videos and learned the basics of JavaScript, but what's next ? 

I will share with you some of the repositories that will help you sharpen your skills in JavaScript and try to order them by level of JS knowledge needed from 0 to 100%.

---

**"Hello world"**

- <a href="https://github.com/GitbookIO/javascript" target="_blank" rel="noopener noreferrer">Learn Javascript by GitBook</a> - A free book that can teach you the basics of programming and JavaScript. This is a great intro to JavaScript and programming in general.

**Beginners that know some stuff**

- <a href="https://github.com/wesbos/JavaScript30" target="_blank" rel="noopener noreferrer">JavaScript30 Challenge</a> by Wes Bos is an Awesome 30-day challenge for JavaScript beginners that will help you apply everything you learned in daily projects. A good way to also create a basic portfolio as a junior JS developer.

**Ok, so that's how it works !**

- <a href="https://github.com/leonardomso/33-js-concepts#33-clean-code" target="_blank" rel="noopener noreferrer">33 concepts every javascript developer should know</a> by Leonardo Maldonado. A huge list of links to blogs and sources that will teach you how JavaScript works under the hood. Something every JavaScript developer should be a master of.


**Let's check what's going on under the hood**

- <a href="https://github.com/humanwhocodes/computer-science-in-javascript" target="_blank" rel="noopener noreferrer">Computer Science in JavaScript</a> by Nicholas C. Zakas. *A collection of classic computer science paradigms, algorithms and approaches written in JavaScript*

**Bring the heavy artillery**

- <a href="https://github.com/TheAlgorithms/JavaScript" target="_blank" rel="noopener noreferrer">The Algorithms - JavaScript</a> - A huge collection of all algorithms implemented in JavaScript following best practices.

**Little bonus**

- <a href="https://github.com/30-seconds/30-seconds-of-code" target="_blank" rel="noopener noreferrer">30 Seconds of Code</a> by 30secondsofcode.org. Hundreds of JavaScript snippets, that will help you speed up your development process while keeping your code clean and efficient.

The above repos should provide you with everything you need to sharpen your skills and become a better JavaScript developer.

If this article helped you, don't forget to share it.

GitHub repositories that will help you become a better JavaScript developer

In TypeScript you can do exhaustive checking with '*never*'. You can make sure you cover every possible scenario and avoid forgetting one especially if you add it later in your code.

You can add a 'switch' case and make sure that everything that is outside my case should never happen

```ts:main.ts

const rateMultiplier = 1.5

type Car = {type: 'car' , rate : number}
type Motorbike = {type: 'motorbike', rate: number}
type Vehicles = Car | Motorbike

function getRate(vehicle : Vehicles) {
	switch (vehicle.type) {
    	case 'car' : 
        return vehicle.rate * rateMultiplier;
        
        case 'motorbike':
        return vehicle.rate * rateMultiplier - (vehicle.rate * discountAmount);
        
        default : 
        // This should never happen !
        let shouldNeverHappen : never = vehicle;
        return shouldNeverHappen;
    }
}
```

Let's say a developer comes back at a later stage and adds a new vehicle type in without adding it to the switch statement. In that case the dev will be informed by TypeScript that the new vehicle type was not accounted for in the switch statement

```ts:main.ts

const rateMultiplier = 1.5

type Car = {type: 'car' , rate : number}
type Motorbike = {type: 'motorbike', rate: number}
type Bicycle = {type: 'bicycle', rate: number} // We added Bicycle here

type Vehicles = Car | Motorbike | Bicycle // and here

function getRate(vehicle : Vehicles) {
	switch (vehicle.type) {
    	case 'car' : 
        return vehicle.rate * rateMultiplier;
        
        case 'motorbike':
        return vehicle.rate * rateMultiplier - (vehicle.rate * discountAmount);
        
        default : 
        // This should never happen !
        let shouldNeverHappen : never = vehicle;
        return shouldNeverHappen; // Type 'Bicycle' is not assignable to type 'never'.
    }
}
```

As you can see above, TypeScript detects the possibility of Bicycle being used, but since it was not included in the switch statement, the default part is now reached, and it is of type 'never'. That returns a TypeScript Error reminding us that we need to include 'bicycle' within our switch statement. (and anywhere where it could be called in our codebase)

Another example of a case where this could be useful 

let's say we have an article with sizes.

```ts:item-size-calc.ts

type SizeOptions = 's' | 'm' | 'l' | 'xl' 


function getSizePriceVariant(size : SizeOptions) {
	 if (size === 's' || size === 'm') {
    	return 1;
    } else if (size === 'l' || size === 'xl') {
    	return 1.2;
    }
    
    // This code should be unreachable
    const neverHappens: never = size;
    return neverHappens;
}
```
Again, if a developer adds another size options but without accounting for it in the place this is used in your codebase, an error will pop and the dev will be forced to adapt the function to make it compatible with the typing.



```ts:item-size-calc.ts

type SizeOptions = 's' | 'm' | 'l' | 'xl' | 'xxl'


function getSizePriceVariant(size : SizeOptions) {
	 if (size === 's' || size === 'm') {
    	return 1;
    } else if (size === 'l' || size === 'xl') {
    	return 1.2;
    }
    
    // This code should be unreachable
    const neverHappens: never = size; // Type 'string'  is not assignable to type 'never'
    return neverHappens;
}
```


---

Here you go, you now know how to protect your code from situations like this using TypeScript and leverage 'never' to have red flags raised in your code whenever you, or someone else, does a modification and forgets to do exhaustive checking somewhere else in the code.

Exhaustive checking in TypeScript using 'never' type

  
    
    
*Hello, I'm Vasili and I've been working as a web developer for the last 7 years.* 
I was working as a waiter on a 7-day basis, but that changed 7 years ago.  I've always been good with using PCs and doing stuff with them. But I never thought my hobby could also be my job because I always thought something many people are thinking right now.

*If you want to work as a programmer / web developer, you HAVE to have university degrees*  
Well guess what ? That might have been the case 20 years ago, but NOT ANYMORE

If people like me, have followed this path and managed to get a job in the industry, that means that you can also do it as long as you persist and focus on it.
To help you, I will share with you how I learned what I know and I really hope that it helps you.
##### Please note : I am **NOT** affiliated with any of the following websites / youtube channels.
---
### Basics
These are the really basic stuff you need to know. Without them, you will not be able to do anything at all. For me, it was 6 full months of learning through websites and youtube videos but it might take longer for some people. The goal is to build habits and to be learning something no matter how big or small...
Here is a list of the main websites / youtube channels that helped me a lot during this phase.
- <UnderlineLink href='https://www.freecodecamp.org/'> FreeCodeCamp</UnderlineLink> : If you follow frecodecamp's Curriculum, you will have pretty solid foundations to start your career as a web developer.

-  <UnderlineLink href='https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg'> The Net Ninja's Youtube channel</UnderlineLink> : I used this channel, alongside FreeCodeCamp because NetNinja has the right combination of explaining and teaching by example.  
  
    
Congratulations ! You now have what it takes to land a job for junior roles. Find a job and get more exposure to JavaScript.

---

### Tips on growing and learning more
After you know the basics, you have to keep experimenting. Try to recreate existing websites / applications. You will gain enough experience to start having a better view of what is happening.  I started making clones of small projects and once I was more confident, I moved on to learning new concepts / frameworks. TypeScript, Node, Server Side Rendering with NEXTJS, Redux, UI libraries, PHP, Symfony, you name it. 

The best way to learn at this stage, is by being exposed to JavaScript.

---

There will be bad days, programming is hard. Why would companies pay so much money to get developers if it were easy?  

The key here is **CONSISTENCY**.. Learn the basics, land your first job and keep learning. You don't need to be at the top 5% to get a job, but you HAVE to learn something small every day. Make it your goal to keep learning. 

You will see that there is **ALWAYS** something new to learn.. that's part of a programmer's career. You have to stay up to date and keep up with the evolution of your tech stack. You will experience imposters' syndrome. You will be stuck on a bug/problem for hours. Your skills will improve over time, but even people with decades of programming experience use google, reddit and stack overflow DAILY to find information and get the help they need to complete their objectives.
  

Good luck,  and remember. 
**It's hard, but it's well worth it.**



New array methods coming in JavaScript

29 November 2022

User Defined Type Guards in TypeScript

GitHub repositories that will help you become a better JavaScript developer

Exhaustive checking in TypeScript using 'never' type

How I learned Javascript for free