DEV Community: satish-rajnale

Getting Started with TypeScript in React

satish-rajnale — Sat, 11 Dec 2021 06:02:35 +0000

First : Open the terminal and run this command

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

You will be get a up and running react app with typescript configurations with this template.

Now you can make changes to your App.tsx file.

Note : in your tsconfig.json file strict mode is set true, while it is a good practice to have it true you might get a lot errors and feel more restrict if not used proper ways around typescripting your app.

const App: React.FC = () => {
  // App body
};

Note : You must have installed a dependancy @types/node & @types/react. Check your package.json file

Defining a state with type

const [task, setTask] = useState < string > '';
// <string | null> throws error that value cannot be null;
const [todoList, setTodoList] = useState < Array < string >> [];
// null does not work Array<string |null> it shows error that string[] cannot be null

Input and onchange handler

<input type="text" value={task} onChange={handleChange} />

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  // you have to specify what event type
  setTask(event.target.value);
};

So apparently typescript needs the event type also which is provided by our browser (Js) events and React extends those events & puts them in the React.syntheticEvent variable. Typescript wants the event provided by React.

Lets create a useReducer component with typescript and react.
1.Defining our action types & initial state

import { useReducer } from 'react';

const initialState = {
  counter: 100,
};

type ACTIONTYPES =
  | { type: 'increment'; payload: number }
  | { type: 'decrement'; payload: number };

2.Count reducer

function counterReducer(state: typeof initialState, action: ACTIONTYPES) {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        counter: state.counter + action.payload,
      };
    case 'decrement':
      return {
        ...state,
        counter: state.counter - action.payload,
      };
    default:
      throw new Error('Bad action');
  }
}

UseReducer component

export default function UseReducerComponent() {
  const [state, dispatch] = useReducer(counterReducer, initialState);
  return (
    <div>
      <div>{state.counter}</div>
      <div>
        <button onClick={() => dispatch({ type: 'increment', payload: 56 })}>
          Increment
        </button>
        <button onClick={() => dispatch({ type: 'decrement', payload: 26 })}>
          decrement
        </button>
      </div>
    </div>
  );
}

And that is how you create a simple reusable type based component in react.
<> By Satish Rajnale </>

HashMap in Go

satish-rajnale — Thu, 13 May 2021 12:11:06 +0000

This is a implementation of closed addressing in a typical hashmap we use in go lang.

some globals & imports

package main
import "fmt"

const ArraySize = 7

Now lets define our steps

Structures

Hashtable structure

type HashTable struct{ 
// our hashtable will be an array
  array [ArraySize]* bucket
}

bucket structure (linkedlist)

type bucket struct{
  head * bucketNode
}

bucketNode structure

type bucketNode struct{
  key string 
  next *bucketNode
}

Hash function

func hash(key string) int{
  sum := 0
  for _,v := range key{
    sum += int(v)
  }
return sum % ArraySize
}

Methods for HashTable

insert method

//insert will take a key and add it to hash table arr
func (h *HashTable) Insert(key string) {
  index := hash(key)
  h.array[index].insertInBucket(key)
}

search method

//search will take a key and return true if in hash table arr
func (h *HashTable) Search(key string) bool{
   index := hash(key)
  return h.array[index].searchInBucket(key)
}

delete method

//delete will take a key and delete the item from hash table arr
func (h *HashTable) Delete(key string) {
   index := hash(key)
  h.array[index].deleteFromBucket(key)
}

Methods for Bucket(linkedlist)

insertInBucket function

func (b * bucket) insertInBucket(k string) {
  if !b.searchInBucket(k){
  newNode := &bucketNode{key : k}
  newNode.next = b.head
  b.head = newNode
    } else {
  fmt.Println(k, "Already exists")
    }
}

searchInBucket function


func (b * bucket) searchInBucket(k string) bool {
   currentNode := b.head
  for currentNode != nil {
    if currentNode.key == k {
      return true
    }
  currentNode = currentNode.next
  }
 return false
}

deleteFromBucket function

func (b*bucket) deleteFromBucket(k string){
   if(b.head.key == k){
    b.head = b.head.next
    return 
   }

  previousNode := b.head
  for previousNode.next != nil{
    if previousNode.next.key == k {
      previousNode.next = previousNode.next.next
    }
  previousNode = previousNode.next
  }
}

Init function

// Init function to initialize hashtable this will create a bucket in
    // each slot of the hashtable
func Init() *HashTable{ 
  result := &HashTable{}

  for i := range result.array {
    result.array[i] = &bucket{}
  }
return result
}

Main function

func main() {
  // myHashTable := &HashTable{} checking step
  myHashTable := Init()
 // fmt.Println(myHashTable)
 //  testBucket := &bucket{}
 //  testBucket.insertInBucket("sangha")

 //  fmt.Println(testBucket.searchInBucket("sangha"))
 //  testBucket.deleteFromBucket("messi")
 //   fmt.Println(testBucket.searchInBucket("sangha"))

 list := []string{
   "ERIC",
   "JASH",
   "JOSEPH",
   "PRAVIN",
   "WASER",
   "MAYUR",
   "QINGSHIN",
 }
 for _,v := range list{
   myHashTable.Insert(v)
 }
fmt.Println(myHashTable.Search("JOSEPH"))//true
fmt.Println(myHashTable.Search("MEGAN"))//false
}

Lastly Full Code

run command: go build main.go

//main.go is your filename

package main
import "fmt"

const ArraySize = 7


// hash function
func hash(key string) int{
  sum := 0
  for _,v := range key{
    sum += int(v)
  }
return sum % ArraySize
}

// Hashtable structure
type HashTable struct{ // our hashtable will be an array
  array [ArraySize]* bucket
}

// bucket structure (linkedlist)
type bucket struct{
  head * bucketNode
}

//bucketNode structure
type bucketNode struct{
  key string 
  next *bucketNode
}

//insert will take a key and add it to hash table arr
func (h *HashTable) Insert(key string) {
  index := hash(key)
  h.array[index].insertInBucket(key)
}

//insertInBucket function 
func (b * bucket) insertInBucket(k string) {
  if !b.searchInBucket(k){
  newNode := &bucketNode{key : k}
  newNode.next = b.head
  b.head = newNode
    } else {
  fmt.Println(k, "Already exists")
    }
}

//search will take a key and return true if in hash table arr
func (h *HashTable) Search(key string) bool{
   index := hash(key)
  return  h.array[index].searchInBucket(key)
}

// searchInBucket function
func (b * bucket) searchInBucket(k string) bool {
   currentNode := b.head
  for currentNode != nil {
    if currentNode.key == k {
      return true
    }
  currentNode = currentNode.next
  }
 return false
}

//delete will take a key and delete the item from hash table arr
func (h *HashTable) Delete(key string) {
   index := hash(key)
   h.array[index].deleteFromBucket(key)
}

// deleteFromBucket function
func (b*bucket) deleteFromBucket(k string){
 if(b.head.key == k){
   b.head = b.head.next
   return 
 }

  previousNode := b.head
  for previousNode.next != nil{
    if previousNode.next.key == k {
      previousNode.next = previousNode.next.next
    }
  previousNode =  previousNode.next
  }
}

// Init function to initialize hashtable this will create a bucket in
    // each slot of the hashtable
func Init() *HashTable{ 
  result := &HashTable{}

  for i := range result.array {
    result.array[i] = &bucket{}
  }
return result
}



func main() {
  // myHashTable := &HashTable{} checking step
  myHashTable := Init()
 fmt.Println(myHashTable)
 testBucket := &bucket{}
 testBucket.insertInBucket("sangha")

 fmt.Println(testBucket.searchInBucket("sangha"))
 testBucket.deleteFromBucket("sangha")
 fmt.Println(testBucket.searchInBucket("sangha"))

 list := []string{
  "ERIC",
  "JASH",
  "JOSEPH",
  "PRAVIN",
  "WASER",
  "MAYUR",
  "QINGSHIN",
 }
 for _,v := range list{
   myHashTable.Insert(v)
 }
 fmt.Println(myHashTable.Search("JOSEPH"))//true
 fmt.Println(myHashTable.Search("MEGAN"))//false
}

JavaScript function add(1)(2)(3)(4) to achieve infinite accumulation-step by step principle analysis

satish-rajnale — Sat, 24 Apr 2021 13:59:08 +0000

Question: We have a requirement to implement an infinitely cumulative function with js, like

add(1) //=> 1;
add(1)(2) //=> 2;
add(1)(2)( 3) //=> 6;
add(1)(2)(3)(4) //=> 10;
and so on...

At first glance, it looks amazing. Now I will implement such an add() function step by step.

we now define a toSting() method for the function sum ```js

function sum(a){
return a+1;
}
sum.toString = function(){return 2;}
console.log(sum);
typeof(sum)


<img width="100%" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ytog28qwnmg5gc2uq8o.PNG"/>


After defining the `sum.toString` method, if you directly console.log(sum), this function will be printed out. If you directly alert(sum), we can see that "2" will pop up. Let's check the type of sum (typeof(sum)),

Obviously sum is a function. 

2. Okay, now let's wrap this sum function in a 'closure' -:)
```js


function add(a){
 function sum(a){
    return  a+1;
 }
 sum.toString = function(){return a;}
 return sum;
}
console.log(add(3));

In the above code, we have wrapped the previous code with a layer, and also modified the sum.toString() method so that it returns the parameter a passed in from the outside, instead of the previously fixed 2.
After wrapping a layer, the return value is a function, thus forming a closure. In this way, when we call add(3), the return value is actually a function, the function sum inside.

However, when we alert(sum(3)), 3 will pop up.

Last step ```js

function add(a){
function sum(b){
a = a+b;
return sum;
}
sum.toString = function(){return a;}
return sum;
}
console.log(add(1)(2)(3)(4));

<img width="100%" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lofds8mnsw46fadmid1t.PNG"/>

At this point, we can see that the above console.log(add(1)(2)(3)(4)); this sentence prints out a function, function 10, in fact, when alert(add(1)(2 )(3)(4));, it will pop up 10.
This is the implementation process of add(1)(2)(3)(4);, obviously, our accumulating function can be called infinitely. -:) 

#### The whole realization process is two key points.
1. Use closures and have a deep understanding of JavaScript's scope chain (prototype chain);

2. Rewrite the toSting() method of the function;

let's analyze add(1)(2)(3);step by step:

a) Execute add(1);   
What is returned is the sum function inside. Through the closure, the variable a=1 in the sum function can be accessed; so when we alert(add(1));, the toSting() method called will change the scope (prototype chain ) The inside a = 1 pops up.

b) Execute add(1)(2);
<=== is equivalent to ===> sum(2); 
 This is equivalent to passing 2 to b in the sum() function, so that a in the scope (prototype chain) = a+b, at this time a = 3, continue to be saved in the scope. Then it returns to the sum function.


c) Execute add(1)(2)(3); 
<=== is equivalent to ===> sum(3); 
 Same as the analysis in (step b) above, except that a = 6 in the scope is updated, and then the sum function is also returned.

Question 16 : JavaScript in-depth 4 types of common memory leaks and how to avoid

satish-rajnale — Sat, 24 Apr 2021 13:16:52 +0000

What are possible causes of memory leaks?

Advance JavaScript concepts

Garbage collection algorithm:

The commonly used garbage collection algorithm is called Mark-and-sweep, and the algorithm consists of the following steps:

The garbage collector creates a " roots " list. Roots are usually references to global variables in the code. In JavaScript, the "window" object is a global variable and is treated as root. The window object always exists, so the garbage collector can check whether it and all its child objects exist (that is, it is not garbage);
All roots are checked and marked as active (ie not junk). All child objects are also checked recursively. If all objects starting from root are reachable, they are not treated as garbage.
All unmarked memory will be treated as garbage, and the collector can now release the memory and return it to the operating system.

Modern garbage collectors have improved the algorithm, but the essence is the same: reachable memory is marked, and the rest is treated as garbage.

Four common JS memory leaks

Unexpected global variables Undefined variables will create a new variable in the global object, as follows.

function  myfunc( arg )  { 
    bar  =  "this is a hidden global variable" ; 
}

Function myfunc internal forget to use var, in fact JS would assume bar mounted to the global object and accidentally create a global variable

function  foo ( arg )  { 
    window . bar  =  "this is an explicit global variable" ; 
}

Another surprise may be provided by global variables this created.

function  foo ( )  { 
    this.variable  =  "potential accidental global" ; 
}
// Foo calls itself, this points to the global object (window) 
// instead of undefined 
foo ( ) ;

Solution :

Add to the head of the JavaScript file to 'use strict' use strict mode to avoid unexpected global variables. At this time, the this in the above example points to undefined. If you must use a global variable to store a large amount of data, make sure to set it to null or redefine it after use.

The forgotten timer or callback function Timer setInterval codes are very common

var  local =  getData ( ) ; 
setInterval ( function ( )  { 
    var  node  =  document . getElementById ( 'Node' ) ; 
    if ( node )  { 
  // Process node and data
  node.innerHTML  =  JSON.stringify ( local ) ; 
    } 
} ,  1000 ) ;

The above example shows that when the node or data is no longer needed, the timer still points to the data. So even when the node is removed, the interval is still alive and the garbage collector cannot reclaim it, and its dependencies cannot be reclaimed unless the timer is terminated.

var  element  =  document . getElementById ( 'button' ) ; 
function  onClick( event ){ 
    element.innerHTML  =  'text' ; 
}

element.addEventListener ( 'click' ,  onClick ) ;

For the observer example above, once they are no longer needed (or the associated object becomes unreachable), it is important to explicitly remove them. Old IE 6 cannot handle circular references. Because the old version of IE cannot detect circular references between DOM nodes and JavaScript code, it will cause memory leaks.
However , modern browsers (including IE and Microsoft Edge) use more advanced garbage collection algorithms (mark removal), which can already detect and process circular references correctly. That is recovered node memory, you do not have to call removeEventListener up.

References away from the DOM If you save the DOM as a dictionary (JSON key-value pair) or an array, at this time, there are two references to the same DOM element: one in the DOM tree and the other in the dictionary. Then both references will need to be cleared in the future.

var  elements  =  { 
    button : document.getElementById ( 'button' ) , 
    image : document.getElementById ( 'image' ) , 
    text : document.getElementById ( 'text' ) 
} ; 
function  doStuff ( )  { 
    image.src ='http://some.url/image' ; 
    button.click ( ) ; 
    console.log ( text . innerHTML ) ; 
    // More logic 
} 
function  removeButton ( )  { 
    // Button is a descendant element of 
    document.body.removeChild ( document.getElementById( 'button' ) ) ; 
    // At this point, it still exists A global #button reference 
    // elements dictionary. The button element is still in memory and cannot be recycled by GC. 
}

If the code is saved in a certain form <td> references.And in future decided to delete the entire table when the GC will intuitively think in addition to recycling saved <td> other nodes outside.
Is not the case: this <td> is a form of child nodes, child element of the parent element is a reference to the relationship. Since the code retains <td> references , yet to cause the entire table in memory. So be careful when saving DOM element references.

Closure The key to closures is that anonymous functions can access variables in the parent scope.

var  football =  null ; 
var  replaceBall =  function( ) { 
  var  firstBall =  football ; 
  var  unused  =  function( ) { 
    if  ( firstBall ) 
      console.log ( "Got it!" ) ; 
  } ;

  football =  { 
    reallyLongArr : new Array(1000000).join ( '*' ) , 
    goal : function( ) { 
      console.log( message ) ; 
    } 
  } ; 
} ;

setInterval ( replaceBall  ,  1000 ) ;

Each time it is called replaceBall,
football a goal new object containing a large array and a new closure ( ) is obtained. Meanwhile, the variable unused is a reference to the firstBall closure (previously replaceBall they call football). goal can be football used, goal and unused shared closure scope, although unused never used, it refers to firstBall force it to remain in memory (to prevent recovery).

Solution :

In replaceBall the final addition firstBall = null.
<> By Satish Rajnale </>

JWT-authentication

satish-rajnale — Wed, 21 Apr 2021 13:36:51 +0000

This project describes the steps involed in a authentication process between client & server using JWT tokens.
Find it on my Github repo :
Satish-Rajnale

First you need to generate some tokens

It's very easy just enter node and then the code in below image.
Then add these tokens in your .env file as ACCESS_TOKEN_PATH & REFRESH_TOKEN_PATH.

Now Create the authUser.js file as shown below.
Now Create the inedx.js file as shown below.

Onto the Requests part create a Requests.rest file as shown below.

You can use the extension Rest Client in VsCode or you can also use Postman, both are great but in this project I am using the entension.

First make a request of POST for login on port:4000
On successfully making the request you will get the following response with tokens.
Copy the accessToken and paste it in your GET request's Auhtorization value. PORT:8080

Copy the refreshToken and paste it in your Post request for token.PORT:4000

When sent a request from GET method you will get the following response. ###NOTE: There is a TimeLimit added and within that time limit you have to make the get request. For your convenience you can extend the time limit through your authuser.js code.

When you send the POST request for token it generates the following access token which you can copy and paste in the GET request. This will extend the user access/auth time. Basically you get access again.

Now to delete the generated JWT token and logout the user use the DELETE request.

Question 4: In-depth analysis of call and apply principles, usage scenarios and implementation

satish-rajnale — Mon, 19 Apr 2021 16:22:16 +0000

Call() and apply()

The call() method calls a function that has a specified this Value and separately supplied parameters (List of parameters)。

 //The difference is thatcall()The method accepted isa list of several parameters,andapply()The method accepted isAn array of multiple parameters

 var func = function(arg1, arg2) {
     ...
};

func.call(this, arg1, arg2); / / Use call, parameter list
func.apply(this, [arg1, arg2]) / / Use apply, parameter array

Scenes to be used:

Here are some common usages

1. merge two arrays

 var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// merge the second array into the first array
// is equivalent to vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);
// 4

vegetables;
// ['parsnip', 'potato', 'celery', 'beetroot']

When the second array (as in the example moreVegs) Don't use this method to merge arrays when they are too large, becauseThe number of parameters a function can accept is limited. Different engines have different limits. The JS core is limited to 65535. Some engines throw exceptions, some don't throw exceptions but lose redundant parameters.

How to solve it? The method isLoop the parameter array into a target method after it is diced

 function concatOfArray(arr1, arr2) {
    var QUANTUM = 32768;
    for (var i = 0, len = arr2.length; i < len; i += QUANTUM) {
        Array.prototype.push.apply(
            arr1, 
            arr2.slice(i, Math.min(i + QUANTUM, len) )
        );
    }
    return arr1;
}

// verification code
var arr1 = [-3, -2, -1];
var arr2 = [];
for(var i = 0; i < 1000000; i++) {
    arr2.push(i);
}

Array.prototype.push.apply(arr1, arr2);
// Uncaught RangeError: Maximum call stack size exceeded

concatOfArray(arr1, arr2);
// (1000003) [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...]

2. merge two arrays

var numbers = [5, 458 , 120 , -215 ]; 
Math.max.apply(Math, numbers);   //458    
Math.max.call(Math, 5, 458 , 120 , -215); //458

// ES6
Math.max.call(Math, ...numbers); // 458

3. verify whether it is an array

 function isArray(obj){ 
    return Object.prototype.toString.call(obj) === '[object Array]';
}
isArray([1, 2, 3]);
// true

// Use toString() directly
[1, 2, 3].toString();   // "1,2,3"
"123".toString();       // "123"
123.toString();         // SyntaxError: Invalid or unexpected token
Number(123).toString(); // "123"
Object(123).toString(); // "123"

Another verify Array Metthod

 var toStr = Function.prototype.call.bind(Object.prototype.toString);
function isArray(obj){ 
    return toStr(obj) === '[object Array]';
}
isArray([1, 2, 3]);
// true

// Use the modified toStr
toStr([1, 2, 3]);   // "[object Array]"
toStr("123");       // "[object String]"
toStr(123);         // "[object Number]"
toStr(Object(123)); // "[object Number]"

In the above method first Function.prototype.call(Function) specifies a this Value, then .bind Return a new function that will always be Object.prototype.toString Set to pass in parameters. Actually equivalent to Object.prototype.toString.call()

4. the class array object (Array-like Object) using the array method

var domNodes = document.getElementsByTagName("*");
domNodes.unshift("h1");
// TypeError: domNodes.unshift is not a function

var domNodeArrays = Array.prototype.slice.call(domNodes);
domNodeArrays.unshift("h1"); // 505 data is different in different environments
// (505) ["h1", html.gr__hujiang_com, head, meta, ...] 
Copy code

Class array objects have the following two properties

with: a numeric index subscript to the object element and length Attributes
does not have: push、shift、forEach as well as indexOf Methods such as array objects

To be explained, the class array object is a Object. There is a name in JS Class array-Object structure, such as arguments Objects, as well as returned by the DOM API NodeList Objects belong to class array objects, class array objects cannot be used push/pop/shift/unshift Array method, pass Array.prototype.slice.call to convert to a real array and you can use the methods.

Class array object to arrayOther methods:

// The above code is equivalent to
var arr = [].slice.call(arguments)；

ES6:
let arr = Array.from(arguments);
let arr = [...arguments];
Copy code

Array.from() You can turn two types of objects into real arrays: Class array Object and Traversable(iterable) objects (including ES6's new data structures Set and Map).

Question : Why do you have class array objects? Or why the class array object is what solves the problem?

JavaScript typed arrays are an array-like Object And provides a mechanism for accessing raw binary data. Array-stored objects can be dynamically increased and decreased, and any JavaScript value can be stored. The JavaScript engine does some internal optimizations so that operations on arrays can be fast. However, as web applications become more powerful, especially with new additions such as audio and video editing, access to raw data from WebSockets, etc., it's clear that sometimes using JavaScript code can quickly and easily pass typed arrays. It would be very helpful to manipulate the raw binary data.

In a word, you can manipulate complex data faster.

5. call the parent constructor to achieve inheritance

function  SuperType(){
    this.color=["red", "green", "blue"];
}
function  SubType(){
    // core code, inherited from SuperType
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.color.push("black");
console.log(instance1.color);
// ["red", "green", "blue", "black"]

var instance2 = new SubType();
console.log(instance2.color);
// ["red", "green", "blue"]
Copy code

Disadvantages: add a throttle valve to the operation function.

Can only inherit the parent class Instance Properties and methods, cannot inherit prototype properties/methods
Unable to implement reuse, each subclass has a copy of the parent class instance function, affecting performance

Call simulation implementation

The following content refers to JavaScript deep call and apply simulation implementation

var value = 1;
var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call(foo); // 1
Copy code

Through the above introduction we know that call() There are two main points

call() Changed the direction of this
function bar Executed

Simulation implementation first step

var foo = {
    value: 1,
    bar: function() {
        console.log(this.value);
    }
};

foo.bar(); // 1
Copy code

This change can be implemented: change the pointer to this and execute the function bar. But writing this has side effects, that is, giving foo Added an additional attribute, how to solve it?
The solution is simple, use delete Just delete it.

So as long as the following 3 steps are implemented, the simulation can be implemented.

Set the function to the properties of the object: foo.fn = bar
the execution function: foo.fn()
delete the function: delete foo.fn
The code is implemented as follows:

// first edition
Function.prototype.call2 = function(context) {
    // First get the function that calls call, use this to get
    context.fn = this;      // foo.fn = bar
    context.fn();           // foo.fn()
    delete context.fn;      // delete foo.fn
}

// have a test
var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call2(foo); // 1
Copy code

perfect!

Simulation implementation of the second step

The first version has a problem, that is the function bar Can't receive parameters, so we can get from arguments Get the parameters, take the second to the last parameter and put it in the array, why should we discard the first parameter, because the first parameter is this。

The method of converting an array object into an array has already been introduced above, but this is done using the ES3 scheme.

Anti shake idea:

I first set a delay time (timer), in this time, if you operate five times,
I will clear the previous four operations (clear timer triggered function), do not let the previous four operations to execute.
When the delay time is up, you can perform your fifth operation.


var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
    args.push('arguments[' + i + ']');
}
Copy code

The parameter array is fixed, the next thing to do is to execute the function.context.fn()。

context.fn( args.join(',') ); // That does not work
Copy code

The above direct call will definitely not work,args.join(',')Will return a string and will not execute.
Adopted here eval The method is implemented to form a function.

eval('context.fn(' + args +')')
Copy code

In the above code args Will be called automatically args.toString() Method because'context.fn(' + args +')' Essentially string concatenation, it will be called automatically toString() Method, the following code:

var args = ["a1", "b2", "c3"];
console.log(args);
// ["a1", "b2", "c3"]

console.log(args.toString());
// a1,b2,c3

console.log("" + args);
// a1,b2,c3
Copy code

So the second version is implemented, the code is as follows:

// second edition
Function.prototype.call2 = function(context) {
    context.fn = this;
    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    eval('context.fn(' + args +')');
    delete context.fn;
}

// have a test
var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}

bar.call2(foo, 'kevin', 18); 
// kevin
// 18
// 1
Copy code

Simulation implementation of the third step

There are 2 more details to note:

this parameter can be passednull OrundefinedAt this time this points to the window
this parameter can pass basic type data, the original call will automatically use Object () conversion
the function can have a return value

// Third edition
Function.prototype.call2 = function (context) {
    context = context ? Object(context) : window; // implementation details 1 and 2
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }

    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result; // implementation details 2
}

// have a test
var value = 2;

var obj = {
    value: 1
}

function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name: name,
        age: age
    }
}

function foo() {
    console.log(this);
}

bar.call2(null); // 2
foo.call2(123); // Number {123, fn: ƒ}

bar.call2(obj, 'kevin', 18);
// 1
// {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }
Copy code

Call and apply simulation implementation summary

Call simulation implementation

ES3：

Function.prototype.call = function (context) {
    context = context ? Object(context) : window; 
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result;
}
Copy code

ES6：

Function.prototype.call = function (context) {
  context = context ? Object(context) : window; 
  context.fn = this;

  let args = [...arguments].slice(1);
  let result = context.fn(...args);

  delete context.fn
  return result;
}
Copy code

Analog implementation of apply

ES3

Function.prototype.apply = function (context, arr) {
    context = context ? Object(context) : window; 
    context.fn = this;

    var result;
    / / Determine whether there is a second parameter
    if (!arr) {
        result = context.fn();
    } else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')');
    }

    delete context.fn
    return result;
}
Copy code

ES6：

Function.prototype.apply = function (context, arr) {
    context = context ? Object(context) : window; 
    context.fn = this;

    let result;
    if (!arr) {
        result = context.fn();
    } else {
        result = context.fn(...arr);
    }

    delete context.fn
    return result;
}
Copy code

Question 3: What is anti-shake and throttling? What's the difference? How to achieve?

satish-rajnale — Mon, 19 Apr 2021 16:16:11 +0000

What is throttling and anti shake?

Advance JavaScript concepts

Throttling:

for example, click the button to make the box move 50px. The first time you click the button, the box starts to move, and then you keep clicking the button before the box moves 50 Px, but the box will not move more than 50 px. After moving to the position of 50px, you can click the button again to make the box move to the next 50px. Summary: at the first operation, start to execute. Before the end of the first execution, no matter how you operate it, it will be invalid. It's like when you want to drink water, turn on the tap of the water dispenser and get a cup of hot water. Just turn off the tap. When you want to pour a glass of water, turn on the tap to let it go. It won't be on all the time. This saves water, so it's called throttling.

Anti shake:

also take sending verification code as an example. Up on the non-stop point button, the result it does not send verification code. When you stop clicking, it starts sending the captcha. Summary: the operation is invalid all the time. At the last operation, the execution starts. Continuous operation for many times, will only start in the last operation. To prevent hand shaking operation, so called anti shaking.

difference:

Throttling is the first click valid in a period of time, other clicks are invalid.
Anti shake is the last click in a period of time is valid, other clicks are invalid.

Thinking:

Throttling idea add a throttle valve to the operation function.

Open the throttle valve before executing the function.
At the beginning of the function, the throttle is closed.
When the function is finished, open the throttle valve.

Anti shake idea:

I first set a delay time (timer), in this time, if you operate five times,
I will clear the previous four operations (clear timer triggered function), do not let the previous four operations to execute.
When the delay time is up, you can perform your fifth operation.

achieve

Anti-shake realization

 // Anti-shake
      function debounce(fn, wait) {
          var timeout = null;
          return function() {
              if(timeout !== null)   clearTimeout(timeout);
              timeout = setTimeout(fn, wait);
          }
      }
      // Processing function
      function handle() {
          console.log(Math.random());
      }
      // scroll event
      window.addEventListener('scroll', debounce(handle, 1000));

Realization of throttling

Throttle code (time stamp)

 //Throttle code (time stamp)
      var throttle = function(func, delay) {
        var prev = Date.now();
        return function() {
          var context = this;
          var args = arguments;
          var now = Date.now();
          if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
          }
        }
      }
      //Processing function
      function handle() {
      　　console.log(Math.random());
      }
      //Scroll event
      window.addEventListener('scroll', throttle(handle, 1000));

Throttle code (timer):

 // Throttle code (timer):
     var throttle = function(func, delay) {
         var timer = null;
         return function() {
             var context = this;
             var args = arguments;
             if (!timer) {
                 timer = setTimeout(function() {
                     func.apply(context, args);
                     timer = null;
                 }, delay);
             }
         }
     }
     //Processing function
     function handle() {
         console.log(Math.random());
     }
     //Scroll event
     window.addEventListener('scroll', throttle(handle, 1000));

<> By Satish Rajnale </>

DEV Community: satish-rajnale

Getting Started with TypeScript in React

You will be get a up and running react app with typescript configurations with this template.

Defining a state with type

HashMap in Go

Now lets define our steps

Structures

Hash function

Methods for HashTable

Methods for Bucket(linkedlist)

Init function

Main function

Lastly Full Code

JavaScript function add(1)(2)(3)(4) to achieve infinite accumulation-step by step principle analysis

Question 16 : JavaScript in-depth 4 types of common memory leaks and how to avoid

What are possible causes of memory leaks?

Garbage collection algorithm:

Four common JS memory leaks

Solution :

Solution :

JWT-authentication

First you need to generate some tokens

Now Create the authUser.js file as shown below.

Now Create the inedx.js file as shown below.

Onto the Requests part create a Requests.rest file as shown below.

Question 4: In-depth analysis of call and apply principles, usage scenarios and implementation

Call() and apply()

Scenes to be used:

1. merge two arrays

How to solve it? The method isLoop the parameter array into a target method after it is diced

2. merge two arrays

3. verify whether it is an array

4. the class array object (Array-like Object) using the array method

Class array object to arrayOther methods:

5. call the parent constructor to achieve inheritance

Call simulation implementation

Simulation implementation first step

Simulation implementation of the second step

Simulation implementation of the third step

Call and apply simulation implementation summary

Call simulation implementation

Analog implementation of apply

Question 3: What is anti-shake and throttling? What's the difference? How to achieve?

What is throttling and anti shake?

Throttling:

Anti shake:

difference:

Thinking:

achieve

Anti-shake realization

Realization of throttling