DEV Community: piyush

“THIS” in Javascript.

piyush — Sun, 04 Dec 2022 12:17:06 +0000

Prerequisites:

Function declaration, expression, and arrow function
Objects

What exactly is “this” keyword?
The execution context contains three components: variable environment, scope chain and this.

this is a special variable, that takes the value of the owner of the function, and is created for every function [execution context].

The value of the keyword is only assigned only when the function is called, and also the value depends on how the function is called and is not static.

If we simply console.log(this). It will return the global object.

this keyword doesn't NOT point to the function itself, or the variable environment.

We will look at the ways functions are called and the value the keyword takes:

1. Method call:

If a function is called through this method, the this keyword will point to the object in which it is called for example:

//code 
const student={
    name:"Piyush",
    logThis:function(){
        console.log(this)
    }
}


console.log(student.logThis())


// Output: this point to the object where it is called


name: 'Piyush', print: ƒ}

2. Simple function call

There are two different values this might point to, it depends on whether the strict mode is enabled or not.

a. If strict mode is enabled:

It returns undefined.

//code 
`use strict`
function print12() {
    console.log(this)
}
console.log(print12())

// output
undefined

b. Without strict mode

It returns the global object.

//code 

function print12() {
    console.log(this)
}

console.log(print12())


// output: window object
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

3. Arrow function :

Arrow functions do not get their own “this” keyword. Using this keyword inside the arrow function will simply point to the surrounding function. It is also called the “lexical this” keyword.

//code
const student={
    name:"Piyush",
    age:20,
    print12:()=> {
        console.log(this)
    }
}
console.log(student.print12())


//output: window object
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

Here, “this” does not point to this object where the function is called, but points to the surrounding function, here the global (object).

5. Method borrowing and this keyword :

Say we have two objects student1 and student2. Student1 has “printage” method and we copy it to student2.

//code
const student1={
    name:"Piyush",
    age:20,
    printage:function() {
        console.log(this)
        console.log("Your birth year", 2022-this.age)
    }
}


const student2={
    name:"ABC",
    age:18,
}


//copying student1.printage method to student2
student2.printage=student1.printage
console.log(student2.printage())


//output
{name: 'ABC', age: 18, printage: ƒ}
Your birth year 2004

When this line is executed “printage” method even though it is in student1, “this” points to the object that is calling the method, here student2 is invoking the method so we get the above output.

6. Call, apply and bind method:

We can explicitly set up the value of “this” using these methods.

a. Call

The first argument in the call method should always be the object we want the “this” keyword to point to.
Here we have two students: student1 and student2.

We copy “printage” method from student1 and store it in birthyear. birthyear is a regular function.

After that we use birthyear.call method, the first argument student2 is the object we want this to reference. After that, we can pass the required arguments for the function.

Example :

const student1={
    name:"Piyush",
    age:40,
    printage(score) {
        console.log(this)
        console.log("Hi "+this.name+". You scored "+score)
    }
}


const student2={
    name:"ABC",
    age:18,
}


// copy print age
const birthyear=student1.printage


// call method
birthyear.call(student2,20)


//output
{name: 'ABC', age: 18}
Hi ABC. You scored 20

So we get, the output: {Hi ABC. You scored 20}

b. Apply:

The apply method is similar to the call method. The only difference here is that while calling the apply method the arguments of the function are passed in an array.
Example:

//code
const student1={
    name:"Piyush",
    age:30,
    printage(score) {
        console.log(this)
        console.log("Hi "+this.name+". You scored "+score)
    }
}


const student2={
    name:"ABC",
    age:18,
}


// copy print age
const birthyear=student1.printage


// apply method
birthyear.apply(student2,[20])


//output
{name: 'ABC', age: 18}
Hi ABC. You scored 20

c. bind :

The bind method is a bit different from the call and apply method. It takes in one argument, i.e the object for this, and returns a new function. Now we can use the function to pass arguments.
Example :

//code
const student1={
    name:"Piyush",
    age:20,
    printage(score) {
        console.log(this)
        console.log("Hi "+this.name+". You scored "+score)
    }
}


const student2={
    name:"ABC",
    age:18,
}

// the bind method will return a function, while this will point to student2
const birthyear=student1.printage.bind(student2)


//use the function to pass arguments
birthyear(39)


//output
{name: 'ABC', age: 18}
Hi ABC. You scored 39

Simple guide to useReducer in react.

piyush — Fri, 06 May 2022 16:35:11 +0000

I was using useState for state management for my react app. It was all fine and good until I had to manage more than three states on a single click. Sometimes the state required multiple operations which made it even more complex.

What exactly is useReducer?

useReducer is used to manage state ,as an alternative to useState, when the state becomes complex that involves multiple subvalues.

I prefer using useReducer ,when I have three or more states, to manage all the state mutations in one place.

Prerequisites:

Switch statement,
Spread operator,
useState.

How does it work?

First lets see how reduce in JavaScript works.
The reduce function executes a reducer function takes in an array and returns a single value. Here we have used reduce function + spread operator to add odd and even number of an array.

const reducer = (accumulator, currentValue) => 
{
return currentValue%2===0?
{...accumulator,even:accumulator.even+currentValue}:
{...accumulator,odd:accumulator.odd+currentValue}
}

[3, 4, 7, 8].reduce(reducer,{odd:0,even:0})

We use spread operator to get the previous value
{...accumulator} of the object.

then will manipulate the object depending on whether the current value is odd or even.

{even:accumulator.even+currentValue}. Here, accumulator.even -> is the even value that was stored previously in accumulator object and currentVaulue is the current item of the array that is being passed through the reduce function.
The reducer function will return us one value. {odd:10,even:20}

Initalizing useReducer

const [state,dispatch]=useReducer(reducerFunction,stateVariables)

In React, useReducer essentially accepts a reducer function
and returns a state object that we can bind components to and a dispatch function that we send actions to.

state variables:

State variables is the data we create in order to manipulate them.

For example in useState we pass the value directly

value=0
const [oddSum,setOddSum]=useState(value)
const [evenSum,setEvenSum]=useState(value)

In reducer we create an object first

const stateVariables={
value:0
}

The values in the state variables are manipulated with the help of the reducer function.

Reducer Function:

The reducerFunction accepts two parameters state and action.
The state is the data {the stateVariable that we created while creating useReducer} that we will manipulate
The function receives action from the the component where dispatch function is passed.

function reducerFunction(state,action){
////
}

Passing function in the component.

In the dispatch function ,in our component ,we pass values "type" and "payload".

The possible action is determined by "type" that is passed within dispatch function.

And any specific values/information/data/object is passed through the payload and used to manipulate the stateVariables.

For example

<button onClick=()=>dispatch({type:"incrementHandler",payload:10})>
Increment by 10
</button>

<button onClick=()=>dispatch({type:"decrementHandler",payload:10})>
Decrement by 10
</button>

<button onClick=()=>dispatch({type:"reset"})>
Reset</button>

Afterall reducer function is basically a switch statement defining all the possible actions a context can perform, and only updating the part of the global state related to that action

for example :

  function reducerFunction(state,action){
    switch(action.type){
      case "incrementHandler" :
        return {...state,value:state.value+action.payload}
    case "decrementHandler" :
        return {...state,value:state.value-action.payload}
    case "reset":
        return {...state,value:0}
  default:
       return {...state}

    }  
  }

Here:
return {...state,value:state.value+action.payload}
we are using a spread operator to retrieve the previous
values in the state object and assign a new value to "value".

state.value will get the value in the previous state and add it with action.payload

i.e action.payload for type: "increment" and "decrement" is 10 so when I
click on Increment : value =0+10=10
click on Increment : value= 10+10=20
click on Decrement : value= 20-10=10
click on reset: value=0
etc.

Code snippet .

import { useReducer } from "react";
export default function App() {
  function reducerFunction(state, action) {
    switch (action.type) {
      case "incrementHandler":
        return { ...state, value: state.value + action.payload };
      case "decrementHandler":
        return { ...state, value: state.value - action.payload };
      case "reset":
        return { ...state, value: 0 };
      default:
        return { ...state };
    }
  }

  const stateVariables = {
    value: 0
  };
  const [state, dispatch] = useReducer(reducerFunction, stateVariables);

  return (
    <div className="App">
      <button
        onClick={() => dispatch({ type: "incrementHandler", payload: 10 })}
      >
        Increment by 10
      </button>
      <button
        onClick={() => dispatch({ type: "decrementHandler", payload: 10 })}
      >
        Decrement by 10
      </button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <div>{state.value}</div>
    </div>
  );
}