I won't lie I was doing the same a year ago.
I found everything very confusing in the beginning. Later, I found most people feel so. Because it has some weird behaviors.
So, in this article, I will try to put everything in plain English to make it all clear.
From StackOverflow Survey 2020
Variables are basically in two scopes: Local and Global.
Local means the scope is within any functions. Globals means you can access them from anywhere.
Let see an example.
But, you can access a variable defined in local scope from global scope until it is returned from functions.
Let’s try it in the browser.
If you run the code above in the browser. You can access it through the window object like this.
IIFE stands for Immediately Invoked Function Expression. As the name itself states, it is immediately invoked when a function is defined. It is also called the Self-Executing anonymous function.
Let’s create an IIFE example.
Please remember assigning IIFE to a variable means you are assigning value the IIFE function returns, not a function definition itself.
And the variable declared inside the IIFE function is not accessible from outside it.
In the example above, we have used the variable
Let’s see another example with a function, to be clear.
Let’s see an example:
In the example, the
5. Callback Function
A callback function is a function that is passed as an argument in another function and later invoked inside that outer function.
Let’s see an example.
The example above is an asynchronous callback. It is immediately called when the outer function is invoked.
I struggle a lot with Promises.
A Promise has the following states:
A promising example:
async/await was introduced in ECMAScript 2017. It is just syntactic sugar for promises. Nothing more. It makes writing promises easier.
The keyword before a function makes it return a promise.
You can also use the arrow function if you want. We will talk about the arrow function in the ES6 section later.
Let’s see with an example.
let a = 20;0 objects inherit from
let a = 20;1
let a = 20;2 is on the top of the prototype inheritance chain.
a. Let & Const
let a = 20;3 was how we used to declare variables. We still do in some cases. But, it has a problem with hoisting or scope.
So we needed a different approach to declare variables.
let a = 20;4 is block-scoped. And the solved problem with
let a = 20;3 .
let a = 20;6 declaration is also block scoped. They can not be redeclared or updated.
b. Arrow Function
let a = 20;7 . If you are familiar with other object-oriented programming such as Java, C++, you will be comfortable with this approach.
A simple example of a class is given below.
The promise is also one of the most interesting features introduced in ES6, which we discussed earlier in the Promise section.
There are so many interesting features in ES6 and newer versions. Explore yourself.
If you work as a front-end developer, understanding Browser DOM is the most. You have to understand how DOM works.
DOM stands for Document Object Model. It is an interface for HTML and XML documents.
It is a structured data representation of objects of web pages or web contents.
Image from w3schools
You can learn more about DOM and DOM APIs here.11. Modular Patterns
You can find more about design patterns in this article.
14. Value vs Reference
16. Spread & Rest Syntax
Spread syntax (
let a = 20;8) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
Generators object are returned by the generator function and It cannot be instantiated by itself. You can find more here.
18. “=” vs “==” vs “===”
“=” is used for assigning value to variables.
// assign variable x of value 10
“==” is used for comparing two values. It transforms the value of the operand before comparison.
let a = 20;
=== is used for strict comparison. Which returns false if values are not the same type.
let a = 10;
If you are still confused, you can find a complete guide with examples here.
19. Asynchronous Communication
Asynchronous gives you the ability to load pages dynamically without refreshing the browser. It is also called AJAX. Modern web applications heavily use an asynchronous approach. So you should master it.
20. V8 Engine & Event Loop
From their website:
Learn everything about the Event Loop in this talk from JSConf EU 2014.
ES6 was introduced in 2015. Since then, new versions are named by year.
E.g. ECMAScript 2016, ECMAScript 2017,ECMAScript 2018 ans so on.
I mentioned versioning here as a bonus point because sometimes modern browsers don’t support the newest version. Although modern browsers like Chrome, Firefox, bring support to a newer version as soon as possible.
If you still need to convert your newer version like ES6 to ES5 or backward-compatible versions(almost all browsers support), there are so many tools (e.g. babel) available to make the job done.Wrapping Up
This article just scratches the surface of each topic. You need to deep into each topic in order to be comfortable.
All I am telling you is to make your fundamentals strong. Otherwise, you will end up like this:
Meme from the Internet
At least you will suffer from an Undefined, Reference error, etc a lot. 😅
Finally, If you think there is something important topic I missed in the article, please let me know in the comment.
If you enjoyed reading, please consider giving me 👏👏👏, this will motivate me to bring more quality content in the future.
Creating web and mobile apps. ... .
Building web servers and developing server applications. ... .