Thread by @eyeshreya

One of the required prerequisites to learn React is 𝗘𝗦𝟲.

𝑂𝑛𝑒 𝑠ℎ𝑜𝑢𝑙𝑑 𝑘𝑛𝑜𝑤 𝐸𝑆6 𝑤ℎ𝑒𝑡ℎ𝑒𝑟 𝑦𝑜𝑢'𝑟𝑒 𝑙𝑒𝑎𝑟𝑛𝑖𝑛𝑔 𝑅𝑒𝑎𝑐𝑡 𝑜𝑟 𝑛𝑜𝑡.

🧵 This thread is all you need to know about ES6 before you get your hands on React:

#100DaysOfCode #javascript

⚛️ You'll be able to learn React way better if you know working with ES6.

ES6 is a scripting language for JavaScript and helps developers by making the code simple as it handles out all the limitations of the main language (JS).
👇

𝟭. 𝗦𝗰𝗼𝗽𝗲 𝗼𝗳 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗶𝗻 𝗝𝗦
Before moving to the point, let us understand 3 concepts here:

1️⃣ Global Scope - Variable is declared outside the function. This variable is accessible inside every function present in the code.

2️⃣ Function Scope - Variable is declared inside (within) a function, outside that it is not accessible anywhere.

3️⃣ Block Scope - Block scope means variables that are declared in a { } block are not accessible outside it. This block can be an if statement, for/while loop..

𝟮. 𝗹𝗲𝘁/𝗰𝗼𝗻𝘀𝘁 𝗼𝗿 𝘃𝗮𝗿?

- var: function/ global scoped
var is both global and function scoped, which often creates a confusion. So avoid using it.

- let: block scoped.
→ let keyword can be reassigned:

But when we use let inside a function, it works like:

Inside the function box() when we log the value of size, it shows a reference error. That is because let is block scoped.

- const: block scoped

→ const is very similar to let except that they can't be changed and redeclared.

→ therefore let and const are preferred over var keyword for declaring variables.

𝟯. 𝗢𝗯𝗷𝗲𝗰𝘁𝘀

-> objects are written within curly braces { } as a collection of key: value pairs.

key: property name
value: value of that property

- Creating an empty object:

Talking specifically about ES6, before ES6 we had to specify both (key, value) even if both are of the same names.

ES6 helps us to get rid of duplication when we have the same key: value names. So now our code will look like this:

𝟰. `𝘁𝗵𝗶𝘀` 𝗸𝗲𝘆𝘄𝗼𝗿𝗱

this is a keyword. It basically returns a reference to the object it is placed within

💡 NOTE:
When we call a function as a method in an object, this keyword returns a reference to that object. 👇

But when we call the function alone, outside the object this returns the global object (browser window) and hence we get the result as undefined 👇

𝟱. 𝗔𝗿𝗿𝗼𝘄 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀

- Helps us to write functions in a much shorter, concise, and easier way.

- Having a single argument can remove the () around our parameters (num in below case)

𝟲. 𝗢𝗯𝗷𝗲𝗰𝘁 𝗗𝗲𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗶𝗻𝗴

Let's say we have an object called girl such that it has 3 keys such as:

const girl = {
name: " ",
age: " ",
country: " ",
};

Normally, we would do something like this to get the values:

here, as you can see we have to repeat the object name girl every time we want to get a value. This problem can be solved by object destructuring:

𝑐𝑜𝑛𝑠𝑡 { 𝑛𝑎𝑚𝑒, 𝑎𝑔𝑒, 𝑐𝑜𝑢𝑛𝑡𝑟𝑦 } = 𝑔𝑖𝑟𝑙;

this one-line code works the same as the previous code.

So destructuring made our code shorter and easier to understand.

In case you want to use an alias (a different variable name) instead of key:

𝑐𝑜𝑛𝑠𝑡 {𝑐𝑜𝑢𝑛𝑡𝑟𝑦: 𝑐𝑡𝑟𝑦} = 𝑔𝑖𝑟𝑙;

- This above line of code means we've defined a new variable called ctry = country.

𝟳. 𝗦𝗽𝗿𝗲𝗮𝗱 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿
- We use spread operator for adding items to an array, combining arrays/ objects, merging or cloning and array, and many more. Let's have a quick look at each of them:

Let's say we have two arrays such that

Case 1 - 𝐴𝑟𝑟𝑎𝑦𝑠

𝐶𝐴𝑆𝐸 𝐼𝐼 - 𝑂𝑏𝑗𝑒𝑐𝑡𝑠

𝟴. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀

-> they behave as a template for creating objects

Let us take an example of an object boy here. We have a function called run inside it.

Now if we've some bug in the future or we've to modify our function for a different object, it would be a long way.

- To overcome this and make our work easier, we use classes:

*Always add the constructor method when creating objects*

Now that we've created a class, let's try building our object again -

see it's that simple!

with this above class, we've implemented the run method in a single line of code. If someday we find a bug here, we've to modify it in just a single place {inside class Boy}. So this is the advantage of using classes in JS.

Now let's talk about Inheritance..

𝟵. 𝗜𝗻𝗵𝗲𝗿𝗶𝘁𝗮𝗻𝗰𝗲

-> when we acquire properties of one class into another class to extend it, it is inheritance.

If we have a class Boy such that -

..and we want to create another class (having similar properties + some specific properties of its own). We can do this using the keyword 𝑒𝑥𝑡𝑒𝑛𝑑𝑠

we just created the class Girl here. Let us now create a const using this -

𝑐𝑜𝑛𝑠𝑡 𝑚𝑦𝐺𝑖𝑟𝑙 = 𝑛𝑒𝑤 𝐺𝑖𝑟𝑙("Sara");

and we're done. This code basically means that now the const myGirl will have the functions eat + run + constructor property of Boy class.

Now we can use it like below without writing a long piece of code:

myGirl. eat()
myGirl. run()

Now let's say we want to create another constructor inside the Girl class (derived class constructor).

We must call 𝑠𝑢𝑝𝑒𝑟() constructor inside the new constructor, otherwise, we'll get an error. Now, this must be looking confusing, let's look at the example below -

𝟭𝟬. 𝗠𝗼𝗱𝘂𝗹𝗲𝘀

At times, we can have many no. of classes declared in a single file. This makes the code long, confusing and messy.

To avoid this, we separate these classes into different files and import them as a module into the main file.
This is called modularity.

Let's look at it in action. Here's what our folder 𝑠𝑟𝑐 will look like:

Here we created two files (boy, girl) inside 𝑠𝑟𝑐 folder.

Doing this simple setup can make our code much easier to understand!

Why we used 𝑖𝑚𝑝𝑜𝑟𝑡 and 𝑒𝑥𝑝𝑜𝑟𝑡? 👇

both Boy and Girl classes are private in the folder, in order to use them we made them public using the 𝒆𝒙𝒑𝒐𝒓𝒕 keyword.

*We use 𝑖𝑚𝑝𝑜𝑟𝑡 keyword in line 1 of girl.js as it is an extended version of the Boy class.*

Now half of the work is done. For now, these classes are not accessible in our main app.js file. For that, we've to import them into our app.js file. We can do that by using -

𝟭𝟭. 𝗗𝗲𝗳𝗮𝘂𝗹𝘁 𝗮𝗻𝗱 𝗡𝗮𝗺𝗲𝗱 𝗘𝘅𝗽𝗼𝗿𝘁𝘀

- Named Exports

We can export more than one object from a specific module. This is called named export. Eg:

Here we exported a class `Car` and a function `add`.👇

- Default Exports

It is basically the main object that is exported from the module. It is generally used in case we've only a single object to export. Let's see how it is -

💡 Now we don't need the import { Car } from "./car";

Instead, we use import Car from "./car"; in case of default exports.

I know this is too long to be called a thread and can be difficult to read, so I've compiled it in a blog. You can read it here:
dev.to/shreya/es6-han…

👋 Woosh! You've made it to the end. Hope I've helped you somehow.
If it did, 🔁 and ❤️ the thread and let's connect @eyeshreya :)