What are the main concepts in JavaScript?

The year is 2021. The whole web is occupied by JavaScript. People are running after libraries and frameworks. Not knowing how javascript fundamental works. And says javascript sucks. What the hell?

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.

When you choose C/C++ as a beginner and tries to learn JavaScript later, I think It happens with everyone.

JavaScript behaves differently than other programming languages.

So, in this article, I will try to put everything in plain English to make it all clear.

According to StackOverflow Survey 2020, JavaScript is the #1 programming language.

From StackOverflow Survey 2020

Either you are a Front End Developer or a Backend Developer, knowing these topics in JavaScript will make you a better JS developer.

1. Scope

Let’s put it very simply, Scope in JavaScript is just a boundary box for variables, functions, and objects. Whether you can access those variables or not. In JavaScript, you are in the root scope i.e. window and global in Nodejs.

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.

2. IIFE

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.

Syntax:

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.

3. Hoisting

Hoisting is JavaScript’s behavior which takes all the declarations to the top of the current scope. In another word, it is a mechanism which takes variable and functions declaration to the top of their scope before execution.

In JavaScript, variables can be used before It is declared.

In order to understand hoisting, you need to know how the creation and the execution phases work in javascript.

In the example above, we have used the variable name before it was declared in line 7.

Let’s see another example with a function, to be clear.

Again in the example above, we have invoked the function before it was defined. This works just fine because this is how javascript’s context execution works.

4. Closure

In JavaScript, a closure is an inner function that has access to outer function variables. It has three scopes:

  1. It has access to its own scope(variables declared within the scope)
  2. Access to outer function’s variables
  3. Access to global variables

Let’s see an example:

In the example, the innerFunction() prints the value of a variable that is declared in the parent function which is outerFunction() .

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.

A callback is not preferred in JavaScript these days since there is something called Promise. At some point you will run into callback hell if you use it.

6. Promises

A promise in JavaScript is an Object. It returns a value in eventual completion or failure.

I struggle a lot with Promises.

A Promise has the following states:

  • pending: initial state, neither fulfilled nor rejected.
  • fulfilled: meaning that the operation was completed successfully.
  • rejected: meaning that the operation failed.

A promising example:

7. async/await

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.

The keyword await before a function makes to wait for the promise.

Let’s see with an example.

await keyword makes it to wait for the promise to be resolved. In this case, we have set the time for 3 seconds. After 3 seconds, the promise will be resolved.

8. JavaScript Prototype

All JavaScript objects inherit properties and methods from a prototype:

Date objects inherit from Date.prototype

let a = 20;
let b = "20";
a==b //true
0 objects inherit from
let a = 20;
let b = "20";
a==b //true
1

The

let a = 20;
let b = "20";
a==b //true
2 is on the top of the prototype inheritance chain.

9. ES6 — The New JavaScript

ES6 is a second revision in javascript. It introduced a lot of new features. Let’s discuss some of them here.

a. Let & Const

Before ES6,

let a = 20;
let b = "20";
a==b //true
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;
let b = "20";
a==b //true
4 is block-scoped. And the solved problem with
let a = 20;
let b = "20";
a==b //true
3 .

let a = 20;
let b = "20";
a==b //true
6 declaration is also block scoped. They can not be redeclared or updated.

b. Arrow Function

An arrow function is just a fancy way to write a function in javascript. Nothing more.

c. JavaScript Classes

Although JavaScript is best for functional programming, you can write the object-oriented style of code using

let a = 20;
let b = "20";
a==b //true
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.

d. Promises

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.

10. DOM

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

One of the widely used patterns in JavaScript is the Module pattern. It wraps the set of variables and functions in a single scope.

You can find more about design patterns in this article.

12. Currying

Currying is an advanced topic in javascript. It can be implemented in other programming languages as well.

13. JavaScript Methods

JavaScript has a lot of built-in methods which comes very handy in many places. Array methods, Date methods, String methods to state some. You need to know most of them. You can find JS references here.

14. Value vs Reference

Javascript always passes by value. However, if you pass an object to a function, the “value” is really a reference to that object, so the function can modify that object’s properties but not cause the variable outside the function to point to some other object. — from here

15. Destructuring

It is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

16. Spread & Rest Syntax

Spread syntax (

let a = 20;
let b = "20";
a==b //true
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.

17. Generators

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
const x = 10;

“==” is used for comparing two values. It transforms the value of the operand before comparison.

let a = 20;
let b = "20";
a==b //true

=== is used for strict comparison. Which returns false if values are not the same type.

let a = 10;
let b = "10";
a===b //false

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:

V8 is Google’s open-source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors. V8 can run standalone or can be embedded into any C++ application.

Learn everything about the Event Loop in this talk from JSConf EU 2014.

Bonus: JavaScript Versioning

Do you know? The official name of JavaScript is ECMAScript. And its versions are abbreviated as ES1, ES2, ES3, ES4, ES5, ES6…

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

Almost all modern websites or web applications uses JavaScript in some way. That’s why many people think it is the king of the web. JavaScript is everywhere. It runs your client applications, it runs your critical servers, and IoT, Machine learning models, and many more.

Today, we can build mobile applications using technologies such as React-Native — A mobile framework built on top of React(A JavaScript Library).

JavaScript is a huge language. I’ve never met a person who knows everything about JavaScript. Maybe it is just a myth.

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

Jokes apart.

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.

I know JavaScript is a vast language. I have never met a single person who knows everything about JavaScript. All you need to do is keep learning and never stop exploring new awesome features.

If you enjoyed reading, please consider giving me 👏👏👏, this will motivate me to bring more quality content in the future.

What are the 3 types of functions in JavaScript?

There are 3 ways of writing a function in JavaScript:.
Function Declaration..
Function Expression..
Arrow Function..

How many topics are there in JavaScript?

The sixteen concepts that every modern JavaScript developer should know well follow: JavaScript Objects in Detail. JavaScript Prototype in Plain, Detailed Language. JavaScript Variable Scope and Hoisting Explained.

What are 5 things JavaScript can do?

Here are some basic things JavaScript is used for:.
Adding interactive behavior to web pages. JavaScript allows users to interact with web pages. ... .
Creating web and mobile apps. ... .
Building web servers and developing server applications. ... .
Game development..

What is the most important part of JavaScript?

The most important feature of JavaScript is that functions are objects. That's it. Understanding this will open up a whole new understanding of the JavaScript language. In JavaScript, functions are objects.