Let's Learn
Tags: javascript, webdev, beginners, tutorial
Published: 2022-05-10 12:00:18

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khki2ytily12iir6vdsl.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewut8ysknb6dje6ixrv6.png)

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 chain`in 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`.