Let's Learn

How would you like to grab a summary knowledge of Javascript in one article?

That would be pretty epic, right?

Well, this is entirely possible, and in today’s article, I am going to talk about few core concepts in javascript development.

Sound good? Let’s get this deal down.

Understanding A value in JavaScript is always of a certain type. For example, a string or a number.

There are two main-types of datatype in JavaScript: primitive data type and non-primitive data type. Here, we’ll cover the most occurred in general and we’ll talk about each of them in detail.
JavaScript is a dynamic type language, which means that you don't need to define type of the variable because it is effectively used by the JavaScript engine.

There are 7 primitive data types in JavaScript:

Number
Bigint
String
Boolean
Null
Undefined
Symbol

Object is a non-primitive data type

We can put any type in a variable. For example, a variable can at one moment be a string and then store a number:

Some Programming languages allow such things, here JavaScript, being one of them sees such as “dynamically typed”, meaning that there exist data types, but variables are not bound to any of them.

Numbers

The Number datatype represents both integer and floating-point numbers.
In Number Type, there are some operations for number type e.g.
multiplication , division /, addition +, subtraction -, and so on.
Besides regular numbers, there are so-called special numeric value which also belong to this Number data type:
**Infinity, *-Infinity** and NaN.

Infinity represents the mathematical Infinity ∞. It is a special value that’s greater than any number.

We can get it as a result of division by zero:

alert( 1 / 0 ); // Infinity

Or just reference it directly:

alert( Infinity ); // Infinity

What is NaN in Javascript and Its Property

NaN represents a computational error. It is a result of an incorrect or an undefined mathematical operation, for instance:

alert( "not a number" / 2 ); // NaN, such division is erroneous

NaN is sticky. Any further mathematical operation on NaN returns NaN:

alert( NaN + 1 ); // NaN
alert( 3 * NaN ); // NaN
alert( "not a number" / 2 - 1 ); // NaN

So, if there’s a NaN somewhere in a mathematical expression, it propagates to the whole result (there’s only one exception to that: NaN ** 0 is 1).

Difference between == and === Operators

JavaScript has two visually similar, but very different ways to test equality:
The equality operator (a == b) converts the operands if they are not of the same type, then applies strict comparison. If both operands are objects, JavaScript compares internal references which are equal when operands refer to the same object in memory

a == b 

While

Non-intuitive behavior is when null or undefined are compared to other values. For a strict equality check ===. These values are different, as each of them is a different type.

The strict equality === in javascript

console.log( null === undefined ); // false

== (Double equals operator): the equality or abstract comparison operator

=== (Triple equals operator): the identity or strict comparison operator

Here are the differences between == and ===:

* == converts the variable values of the same type;
* === does not do any type conversion and returns true only if both values and types are identical for the two variables being compared.

What is Hoisting in Javascript?

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared.

Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doing so can lead to unexpected errors, and is not generally recommended.
One of the advantages of hoisting is that it lets you use a function before you declare it in your code.

catName("Tiger");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Tiger"
*/

...
Without hoisting you would have to write the same code like this:
...

function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Tiger");


/*
The result of the code above is the same: "My cat's name is Tiger"
*/


What is Currying in Javascript?
In JavaScript, there exists an advanced technique of working with functions. It is called currying. However, it is used not only in JavaScript but also in other programming languages.

Generally, it is a transformation of functions. So, it translates a function from callable likef(a, b, c) to f(a)(b)(c) .

A function can’t be called by currying. What it does is merely transforming.

For a better perception, let’s start at an example:

function curry(fn) { // curry(fn) does transforms curry
  return function (a) {
    return function (b) {
      return fn(a, b);
    };
  };
} 
function sum(a, b) {
  return a + b;
}
let currySum = curry(sum);
console.log(currySum(10)(20)); // 30.

...
In the example above, there is a helper function curry(fn) that implements currying for a two-argument f.

It’s a simple performance with two wrappers. A wrapper function(a) is the result of curry(func). Once you call curySum(1), the argument is saved in the Lexical Environment. A new wrapper function(b) is returned. Afterward, it is called with argument 2, passing the call to sum .
...

What is this() keyword in Javascript ?

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.
The value of this is defined at run-time.

...
When a function is declared, it may use this(), but that this() has no value until the function is called.
....

Explain call(), Apply(), Bind() in Javascript

Call()

call() allows for a function or method belonging to one object to be assigned and called for a different object. You can refer to the values of the object by using the this keyword.

Apply()
The apply() function works similar to call() function. The only difference between the call() and apply() function is you can pass multiple parameters in the array and use them.

Bind()
bind() returns the exact copy of a function and binds it with an object. This method is used to bind and keep a copy of a method and use it later. You can use the function whenever you want by invoking it.

call() and apply() are very similar—they invoke a function with a specified this context, and optional arguments.

Differences

The only difference between call and apply is that call requires the arguments to be passed in one-by-one, and apply takes the arguments as an array.
Both call and apply are one-time use methods—if you call the method with the this context it will have it, but the original function will remain unchanged.

Sometimes, you might need to use a method over and over with the this context of another object, and in that case you could use the bind method to create a brand new function with an explicitly bound this.

Functions

Let's look at Higher Order Functions in javascript.
In Javascript, functions can be assigned to variables in the same way that strings or arrays can. They can be passed into other functions as parameters or returned from them as well.

A “higher-order function” is a function that accepts functions as parameters and/or returns a function.

...
++++++++Constructor Function()++++
The function () constructor is used in JavaScript to create a new function object. The objects created are parsed when the function is created.

When we pass parameter of a function in javascript, It can be done in two ways;

*By value
*By reference

Explanation on Pass by Value and Pass By Reference

Pass By Value
Pass by value refers to a mechanism of copying the function parameter value to another variable also seen as a copy of the actual parameter's value is made in memory, i.e. the caller and callee have two independent variables with the same value.If the callee modifies the parameter value, the effect is not visible to the caller.

Pass by reference
Pass by reference (also called pass by memory address) means to pass the reference of an argument in the calling function to the corresponding formal parameter of the called function so that a copy of the address of the actual parameter is made in memory, i.e. the caller and the callee use the same variable for the parameter. If the callee modifies the parameter variable, the effect is visible to the caller’s variable.

When to use pass by value?
If you are building multi-threaded application, then you don’t have to worry of objects getting modified by other threads. In distributed application pass by value can save the over network overhead to keep the objects in sync.

There situation where the use pass by reference is needed;

In pass by reference, no new copy of the variable is made, so overhead of copying is saved. This makes programs efficient especially when passing objects of large structs or classes.

Narrowing down to SCOPE in Javascript, we will be looking at Scope and Scope Chain.

Scope in JavaScript can be referred to as the current context of a code, which determines the accessibility of variables to JavaScript.
The two types of scope in javascript are local and global: *Global variables are those declared outside of a block. *Local variables are those declared inside of a block. While

The scope chainin javascript is used to resolve the value of variable names .

Without a scope chain the Javascript engine wouldn't know which value to pick for a certain variable name if there are multiple defined at different scopes.

Another term will be looking at is [ Closures] in JavaScript.

Closure provides access to the outer scope of a function from inside the inner function, even after the outer function has closed
A closure can also be seen as the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

Have you heard about object prototypes?
A syntax of an object look like this;

const object_name = {
   key1: value1,
   key2: value2
}

...
Now Let us understand what prototypes are about.

Prototypes are the mechanism by which JavaScript objects inherit features from one another.
In JavaScript, every function and object has a property named prototype by default.
Syntax;

function Person () {
    this.name = 'John',
    this.age = 23
}

const person = new Person();

// checking the prototype value
console.log(Person.prototype); // { ... }

...
A prototype can be used to add properties and methods to a constructor function. And objects inherit properties and methods from a prototype.

Okay!!!

Do you know about callbacks and Memoization? in Javascript. Yes! you heard that right.

Well callback is a function which is to be executed after another function has finished execution. A more formal definition would be - Any function that is passed as an argument to another function so that it can be executed in that other function is called as a callback function.

What is memoization?

Memoizing means memorizing or storing in memory.
Memorization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

This concept of memoization in JavaScript is used to cache function results in order to speed up slow-performing, or time-consuming function calls. In case the result is not cached, we would execute the function and cache the result.

A memoized function is usually faster because if the function is called subsequently with the previous value(s), then instead of executing the function, we would be fetching the result from the cache.

But,

talking about a program being itself without altercation. just like we have some mathematics problem, we consider RECURSION
Recursion means "defining a problem in terms of itself". This can be a very powerful tool in writing algorithms. Recursion comes directly from Mathematics, where there are many examples of expressions written in terms of themselves. For example,

the Fibonacci sequence is defined as: F(i) = F(i-1) + F(i-2)

...

Well, lastly am talking about DOM (Document Object Model)

DOM stands for Document Object Model and is a programming interface that allows us to create, change or remove elements from the document. We can also add events to these elements to make our page more dynamic.
DOM has various properties that refer to other objects which allow access to and modification of document content. This way a document content is accessed and modified as DOM represents the document as nodes and objects.

Simplified
The Document Object Model (DOM) is a programming interface for web documents representing a page in which programs can change its document structure, style, and content. it can be modified with a scripting language such as JavaScript.