โ๏ธ 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..
- 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 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.
-> 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 -
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 -
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 :)
โข โข โข
Missing some Tweet in this thread? You can try to
force a refresh
One of the best ways to master a new skill and develop your portfolio is through project-based learning.
6 free virtual project-based internships based on real world scenarios from companies like Deloitte, KPMG, Accenture and Tata โ
๐ง Why should you consider trying these programs:
- Virtual, self-paced and free
- Based on real life scenarios
- Applied knowledge
- Develop your critical thinking skills
- Learn problem solving approaches
Time to dig in! โคต๏ธ
1. KPMG Data Analytics Internship
What youโll learn:
โข Data quality and analysis
โข Data visualization
โข Perform data-driven insights
โข Build dashboards