JavaScript concepts every developer should know.

Tram Ho

This article covers some basic concepts in JavaScript. Every JavaScript developer should know and master these things.

JavaScript Prototype

There are different ways to create objects in JavaScript. One of the ways to create objects in JavaScript is to the constructor. Consider the constructor function below:

In the above example we have created 2 objects: bikeObj1, bikeObj2 using 1 constructure. In JavaScript, every object has its own methods and properties. In the above example 2 objects are 2 instances of the constructor function getDetails()

Instead of using a copy of the instance, we will use the prototype of the constructor function.


When an object is created using JavaScript, the JavaScript engine adds a __proto__ property to the newly created object called a dunder proto . dunder proto or __proto__ points to the prototype object of the constructor function.

The bikeObj1 object is created with the Bike constructor function, with the dunder proto or __proto__ pointing to the prototype object of the Bike function constructor.

In the code below, attributes dunder proto or __proto__ of objects bikeObj1 and attributes Bike.prototype is equal, check with the operator ===

So using the prototypec attribute, how many objects are created to function only load into memory once and we can override the functions if needed.

JavaScript (ES6) Class

JavaScript classes introduced in ES6 are mostly more syntax-based on JavaScript than inheritance based on existing prototypes. Class syntax does not introduce a new object-oriented inheritance model for JavaScript. The beginning of ES5 uses function expressions

Inheriting based on existing prototypes:

Classes are in fact “special functions” and like you define function expressions and function declarations, the class syntax consists of two components: class expressions and class declarations.

ES6 class:

Benefits of using class

  • Convenient, closed syntax.
  • A unique, canonical way to describe classes in JavaScript. Before ES6, there were some competing implementations in popular libraries.
  • Familiar with people from a class-based language platform.


What is IIFE in JavaScript?

IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

At first, it sounds confusing but really, the pattern is very simple. The pattern is immediately called the function expression.

JavaScript functions can be created via a function declaration or function expression. Function declaration is how to create a normal function.

Functions created in the context of an expression are also function expressions. The important thing about JavaScript expressions is that they return values.

In both cases, the return value of the expression is a function. That means if we want to call the function expression immediately, we just need to deal with the last few parentheses. This brings us back to the first piece of code we reviewed:

The main reason to use IIFE is to get data privacy. Because JavaScript scans the var variable with its container, any variables declared in IIFE cannot be accessed externally.

Understanding Scope:

A simple definition of scope in JavaScript: is the ability to access variables, functions, and objects in specific parts of your code at run time. In other words, scopes determine the visibility of variables and other resources in your code areas.

Scope is defined in two main ways:

  • Global Scope
  • Local Scope

Consider the greeting variable in the code above is Global Scope, which is accessible inside the function.

In the above code for local scope

In scope scope variables in JavaScript ES6 updated the let, var, const type variables to learn scope, you can refer here .

JavaScript Closures

What are closures?

is a combination of a function and a lexical environment in which the function is declared. Closures has three scope ranges: it has access to its own scope, it has access to variables outside of the function, and it has access to global variables. For example :

In this code, We have an external User() function that returns an internal function, displayName() . The internal function will have access to the variables within the outer function, even after the outer function has returned

The Module Pattern

In JavaScript, a module is a small, reusable, unit. Modules are the cornerstone of many JavaScript designs and are essential when building any JavaScript-based application.

JavaScript modules are exported as values ​​instead of types, because JavaScript modules can export an object. Modules that export a string containing HTML templates or CSS stylesheets are also popular. JavaScript has no private keyword but we can achieve private methods and properties through closures.

These modules may have been exported to other JS files using the export keyword

The module can import other JS files

Why do we need to use a module?

There are many benefits of using modules such as:

  • maintainability
  • reusability
  • Namespacing


In JavaScript, the meaning of is a JavaScript mechanism in which variables and function declarations are moved to the top of their scope before executing the code.

A simple explanation with the following code:

In fact, JavaScript has pulled up the variable declaration. This is what the above code looks like to the interpreter

JavaScript only pulls up declarations, not initialization. This means that regardless of where functions and variables are declared, they are moved to the top of their scope regardless of whether they are global or local. The next thing you need to know about Hoisting

  • let, var, const keyword in JavaScript (ES6)
  • Hoisting Functions
  • Hoisting classes For more reference here


Currying is a function that evaluates a function with multiple arguments, into a function sequence with a single argument. In other words, when a function, instead of taking all the arguments at once, takes the first function and returns the new function takes the second function and returns the new function takes the third function, and so on. All arguments have been completed. Consider the example code below:

Why is currying useful?

It mainly helps to create a high-level function. It is very useful in event handling

How to convert an existing function into a curried version?

Curry function does not exist in the original JavaScript. But a library like lodash makes it easy to convert a function into a curried function

Share the news now

Source : Viblo