My Journey Using freecodecamp
Published: 2019-07-20 13:08:56

So, recently, I decided that an organised text-based tutorial would help me learn web development faster. Freecodecamp was the solution. But then, I skipped most of the HTML and CSS. Dived into JavaScript. I must admit, it taught me a lot. I'm  still on the JavaScript track. So, here's what I've learnt so far.
## ES6
ES6 was quite an improvement to JavaScript. Coming from a python background, I noticed some of the tricks in python being implemented using ES6. Let's look at a few topics on the subject
## 1. Destructuring
This entails many things, example:
### A. Array Destructuring
#### Swapping Values 
```javascript
let a = 2; let b = 5;
[a, b] = [b, a]
console.log(a, b) //outputs 5 2
```
#### Inline variable creation
```javascript
const [a, b, c] = [1, 2, 3];
console.log(a, b, c) // outputs 1 2 3
// This gives you power to create variables faster
```
### B. Object Destructuring
Now for objects, I like to look at it as *shallow substitution*.
Say we want to create a new variable that would have values from the object. Maybe a variable with value, "Nissan"
```javascript
const cars = {a:'Nissan', b:'Toyota', c:'Benz'}
const {a:nissan_var} = cars;
console.log(nissan_var) //outputs 'Nissan'
```
Just note that this is one way of creating variables from object values. It's cleaner than
```javascript
const cars = {a:'Nissan', b:'Toyota', c:'Benz'};
let nissan_var = cars.a;
console.log(nissan_var); //outputs 'Nissan'
```
because if there where many entries in the cars object, it would all be dirty code.

### There's More to It
It's possible to write a function which takes in an object, checks for a particular key and destructures that key. 
```javascript
const books = { 
    fiction: ["Harry Potter", "Nueromancer", "Angels and Demons"],
    non_fiction: ["Good Leaders ask Great Questions", "Battlefield of the mind"],
};
const getDanBrown = ({ fiction }) => (fiction.find(book => book === "Angels and Demons" || book === "Inferno"));
getDanBrown(books); //returns "Angels and Demons"
```
I like to think of it this way. 
a. Destructure the object fixed into the function
b. Get the key corresponding to what was put in the function. In this case _fiction_
c. Work on its values according to the function
If the key isn't present, the function returns undefined.

Assuming you wanted to destructure objects from an array of objects. First, you need to extract the objects from that array. Let's see that in action
```javascript
const a = [
    {m:[3, 5, 6], n:[9, 8], o:[7, 2]}, 
    {p:[3, 5]}
];
const [b, c] = a;
const {m, n} = b;
console.log(b); //outputs {m:[3, 5, 6], n:[9, 8], o:[7, 2]}
console.log(c); //outputs {p:[3, 5]}
//now working on the m object in b
console.log(m); // outputs [3, 5, 6]
```
So the logic here is simple. 
a. If you want to destructure an object, you'd make use of object literals. 
b. If you want to destructure an an array, you'd use array literals
```javascript
a in the above snippet is an array
To completely destrucuture it, we need two variables in an array literal [] - [b, c]
Now that it has been destrucured, we can further destrucuture the objects, b and c;
b is an object, so destrucutring it requires an object literal {} - {m, n}
This was done to make the explanation colorful
```

## 2. Rest and Spread
### Rest Operator
The rest and spread operators are siblings. The rest operator packs the spread unpacks. It's more like:
"I need  to travel to Europe tomorrow. I'd need the *rest operator* to pack my luggage"
---Then you finally arrived Europe---
"Now, the *spread operator* would be handy in unpacking these luggage"
OK, I know they were dry jokes. Let's see it in code
```javascript
let arr = [1, 2, 3, 4, 5];
const [a, b, ...c] = arr;
console.log(a, b, c) //outputs 1, 2, [3, 4, 5]
```
The rest operator packs the remaining values into an array. it follows destructuring we did earlier.
Now, if you are working with functions, you may need to pack the inputs into an array.
```javascript
const printThem = (...inputs) => {
    let a = ``;
    for (let i of inputs) {
       a += `${i} is your ${inputs.indexOf(i) + 1} input \n`
    }
    return a;
}

console.log(printThem([2, 3], 4, 5, [3]))
/*ouputs
"2,3 is your 1 input 
4 is your 2 input 
5 is your 3 input 
3 is your 4 input 
"
*/
```
### Spread Operator
The spread operator opens up arrays or objects depending on the context. Just like that. Like opening up a soda. This example from MDN illustrates it well.
```javascript
let parts = ['shoulders', 'knees']; 
let lyrics = ['head', ...parts, 'and', 'toes'];
console.log(lyrics)
//outputs ["head", "shoulders", "knees", "and", "toes"]
```
Now, copying an array would just a rest operator enclosed in square brackets
```javascript
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4); 
console.log(arr2) // outputs [1, 2, 3, 4]

//concatenation is also possible
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
```
Same with objects. You can copy objects using the spread operator
```javascript
let obj1 = {a:'letter', one:'number'}
let obj2 = {...obj1}
console.log(obj1) // outputs {a:'letter', one:'number'}
```

So, there you have it. There are more things I have to look into. But until then, keep on coding.