JavaScript concepts every developer should know.

Friday, 20/03/2020

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:

function Bike(model,color){
   this.model = model,
   this.color = color,
   this.getDetails = function(){
        return this.model+' bike is '+this.color;
   }
}
var bikeObj1 = new Bike('BMW','BLACK');
var bikeObj2 = new Bike('BMW','WHITE');
console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE

function Bike(model,color){

this.model = model,

this.color = color,

this.getDetails = function(){

return this.model+' bike is '+this.color;

}

var bikeObj1 = new Bike('BMW','BLACK');

var bikeObj2 = new Bike('BMW','WHITE');

console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK

console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE

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.

Prototype

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.

function Bike(model,color){
  this.model = model,
  this.color = color
}
Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
console.log(bikeObj1.getDetails());

function Bike(model,color){

this.model = model,

this.color = color

}

Bike.prototype.getDetails = function(){

return this.model+" bike is "+this.color;

}

var bikeObj1 = new Bike(‘BMW’,’Black’);

console.log(bikeObj1.getDetails());

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 ===

console.log(bikeObj1.__proto__ === Bike.prototype );
//output : true

console.log(bikeObj1.__proto__ === Bike.prototype );

//output : true

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:

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
 
Bike.prototype.getInfo = function() {
    return this.color + ' ' + this.model+ ' bike';
};

function Bike(model,color) {

this.model = model;

this.color = color;

}

Bike.prototype.getInfo = function() {

return this.color + ' ' + this.model+ ' bike';

};

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:

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }
}

class Bike{

constructor(color, model) {

this.color= color;

this.model= model;

}

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.

IIFE

What is IIFE in JavaScript?

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

(function () 
{// logic here })
();

(function ()

{// logic here })

();

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:

(function () 
{ var foo = “hello”;
console.log(foo);
 })
();
console.log(foo); //Error: foo is not defined

(function ()

{ var foo = “hello”;

console.log(foo);

})

();

console.log(foo); //Error: foo is not defined

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

var greeting='Welcome to blog';
(function(){
  console.log(greeting); //Output: Welcome to blog
})();

var greeting='Welcome to blog';

(function(){

console.log(greeting); //Output: Welcome to blog

})();

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

(function(){
var greeting = 'Welcome to blog';
  console.log(greeting); //Output: Welcome to blog
})();
console.log(greeting); //Output:Reference-Error greeting not defined

(function(){

var greeting = 'Welcome to blog';

console.log(greeting); //Output: Welcome to blog

})();

console.log(greeting); //Output:Reference-Error greeting not defined

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 :

function User(name){
  var displayName = function(greeting){
   console.log(greeting+' '+name);
  }
return displayName;
}
var myFunc = User('Raj');
myFunc('Welcome '); //Output: Welcome Raj
myFunc('Hello '); //output: Hello Raj

function User(name){

var displayName = function(greeting){

console.log(greeting+' '+name);

}

return displayName;

}

var myFunc = User('Raj');

myFunc('Welcome '); //Output: Welcome Raj

myFunc('Hello '); //output: Hello Raj

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.

var myModule = (function() {
    'use strict';
 
    var _privateProperty = 'Hello World';
     
    function _privateMethod() {
        console.log(_privateProperty);
    }
     
    return {
        publicMethod: function() {
            _privateMethod();
        }
    };
}());
  
myModule.publicMethod();                    // outputs 'Hello World'   
console.log(myModule._privateProperty);     // is undefined      
protected by the module closure
myModule._privateMethod();                  // is TypeError protected by the module closure

var myModule = (function() {

'use strict';

var _privateProperty = 'Hello World';

function _privateMethod() {

console.log(_privateProperty);

}

return {

publicMethod: function() {

_privateMethod();

}

};

}());

myModule.publicMethod(); // outputs 'Hello World'

console.log(myModule._privateProperty); // is undefined

protected by the module closure

myModule._privateMethod(); // is TypeError protected by the module closure

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

//myMOdule.js file
export default myModule;

//myMOdule.js file

export default myModule;

The module can import other JS files

//second.js file 
import myModule from ‘./myModule’;

//second.js file

import myModule from ‘./myModule’;

Why do we need to use a module?

There are many benefits of using modules such as:

maintainability
reusability
Namespacing

Hoisting

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:

console.log(Hoist);
var Hoist = ’The variable Has been hoisted’;
//output : undefined//

console.log(Hoist);

var Hoist = ’The variable Has been hoisted’;

//output : undefined//

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

var Hoist;
console.log(Hoist);
Hoist = ’The variable Has been hoisted’;

var Hoist;

console.log(Hoist);

Hoist = ’The variable Has been hoisted’;

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

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:

var add =   function (a){
                 return function(b){
                       return function(c){
                              return a+b+c;
                              }        
                        }
                  }
console.log(add(2)(3)(4)); //output 9
console.log(add(3)(4)(5)); //output 12

var add = function (a){

return function(b){

return function(c){

return a+b+c;

}

console.log(add(2)(3)(4)); //output 9

console.log(add(3)(4)(5)); //output 12

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

JavaScript concepts every developer should know.

JavaScript Prototype

JavaScript (ES6) Class

IIFE

Understanding Scope:

JavaScript Closures

The Module Pattern

Hoisting

Currying

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers