My Journey Using freecodecamp

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

let a = 2; let b = 5;
[a, b] = [b, a]
console.log(a, b) //outputs 5 2

Inline variable creation

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"

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

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.

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

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

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

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.

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.

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

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

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.