Cover Photo by Adil Janbyrbayev on Unsplash

There is currently a huge number of beginners learning JavaScript, especially during this quarantine period. This can also be attributed to the fact that there is ample demand for web developers in the market and JavaScript is one of the core skills of most web developers.

Most beginners utilize the excellent free resources that can be easily found online to start their JavaScript journey. But they often skip or overlook some important concepts they find confusing or difficult to understand. Little do they know that these overlooked concepts are some of the most important concepts in JavaScript.

Let’s have a look at my pick of the top 6 most overlooked JavaScript concepts.

Closures and Higher-Order Functions

Closures are one of the trickiest JavaScript concepts to understand as a beginner. But once you have learned, you will begin to see the magic of JavaScript. Ample resources are available online. Just make sure you take the time to understand closures.

A closure would give you access to an outer function’s scope within the inner scope. JavaScript closures are created every time a function is created, at function creation time.

Higher-order functions on the other hand are functions that take other functions as arguments or return functions as a result. Higher-order functions allow composition to unleash the fullest power. You can create smaller functions that take care of only one task and then construct complex functions with the help of these smaller functions. This will result in an increase in code reusability as well.

This also reduces bugs and makes our code easier to read and understand.

Pure Functions, Side Effects, and State Mutation

These three are very important concepts for beginners, especially if they have plans to become a React developer. Understanding State mutation thoroughly can help you immensely as a React developer.

A pure function is a function that always returns a value that’s consistent with the input provided without accessing/altering any variables outside of its scope. This type of function is easier to read, debug, and test.

Side effects are a piece of code whereby a variable is created and available throughout a scope when it doesn’t need to be. If your function is accessing a variable that is outside its scope, then there is a side effect.

State mutation is where you change the value of a variable. If you mutate a variable, there is a possibility that it can affect other functions depending on the value before it was mutated. In a React environment, you are advised to avoid state mutation. Here is a good read on immutability in React.

Prototypes

Prototypes are also one of the most confusing JavaScript concepts, even for someone with years of experience. Beginners who have a background with Object-Oriented Programming (OOP)languages often get confused trying to understand inheritance in JavaScript as it is NOT based on class inheritance like other languages. Rather, it is based on a concept called prototypal inheritance which is based on prototypes. Moreover, JavaScript cannot be considered an OOP language at all. This is where most beginners get stuck.

Prototypes in JavaScript are the mechanism to share common functionalities between objects. Nearly all objects in JavaScript are instances of Object. A typical object inherits all the properties and methods from Object.prototype.

In simple terms, a prototype is an object from where JavaScript objects inherit methods and properties from.

By understanding prototypes better, you can build applications that are efficient and fast.

‘this’ Keyword and ‘apply’, ‘call’, and ‘bind’ Methods

Personally, I think it’s crucial for a JS developer to understand the in-depth meaning of the this keyword. If you don’t understand it properly, you will come across various issues with your application later on.

If you have a great understanding of the this keyword, you can focus on the apply, call, and bind methods. These methods are necessary to invoke functions with the appropriate context. You will especially need the bind method when passing a callback that accesses this. I learned this when helping a friend debug his code!

Scope

Most JS developers overlook the concept of scope as it might take some time to understand. But to be honest, once you understand the concept of scope, you will find it very easy to comprehend and use in accordance with your requirement. According to Wissam, the simple definition of scope is that it’s where the compiler looks for variables and functions when it needs them.

Understanding scopes will allow you to use JavaScript more efficiently and effectively. You should learn about the global scope and the block and function scope, also known as lexical scope.

Type Coercion, Equality Comparison, and the ‘typeof’ Operator

Type Coercion mainly explains the difference between implicit and explicit type coercion. This is one of the few areas in JavaScript where people get things wrong. This is especially true with the concept of implicit type coercion because it behaves in different ways with different data types.

This is one of the most commonly tested areas of JavaScript in interviews. Here’s some code:

Number("789") // explicit
 +"789"; // implicit
789 != "456"; // implicit
9 > "5"; // implicit
10 / null; // implicit
true | 0; // implicit

By understanding type coercion clearly, you can be happy that you have a great understanding of one of JavaScript’s trickiest concepts. Beginners often disregard these concepts as they look too easy. But it’ll get interesting once you try out a few interview questions based on these concepts. You can read the article over here to get a better understanding of type coercion.

Equality comparison simply explains the use of double equals and triple equals, when and why you should use them. Although they look pretty much the same and give the same results most of the time, they can give you unexpected bugs if you use them unknowingly.

You should also be able to use the typeof operator and know the possibilities of the outputs. It can get confusing when objects come into play. Here is some code:

typeof 3; // "number"
typeof "abc"; // "string"
typeof {}; // "object"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof function () {}; // "function"typeof [] // "object"
typeof null; // "object"

Although I have listed out only the top 6 most overlooked JS concepts, in my opinion, there are several more concepts that need to be mastered by JS developers.

Furthermore, the necessary reference material for the above topics as well as the other concepts can be found in the below Github repository.

Thank you for reading, and happy coding.

Resources

• Github Repo by Leonardo Maldonado