DEV Community: Himanshupal0001

Understanding 'this' in JS V1

Himanshupal0001 — Wed, 12 Jun 2024 05:30:00 +0000

The concept of 'this' keyword is one of the most confusing topics in JavaScript. Let's dig deep and understand the concept of 'this'.

But before starting anything we must clear some concepts to understand this concept better. This article is written considering beginners. Although I've seen many where even seniors don't know the underlying meaning of what they are writing. Before diving deep into the concept of 'this', I want that everyone on the same page and can understand every line of the code.

Table Of Content

Difference between methods and functions
Assigning values vs reference to variable
Difference in function declaration, statement and expression
Different ways to add a function as a property to an object
Difference between fn() vs fn.
What and Why 'this'

🌟Difference between method and a function

A function is a self explanatory set of instructions wrapped inside a variable who's type is given by special keyword 'function'. Basically a function is just a set of instructions of lines that developer want to execute and than you wrap it around a variable to make it reusable and can use in different parts of the code.

On the other hand, methods are just functions but they are part of an object. A method either can be implicitly defined in an object as a property of that object or a function explicitly can be assigned to an object as a property.

//Example of a function
function sum(a, b){
    console.log(a+b);
}

sum(2,2); // function call

//Example of a method
const obj = {
    name: 'John', 
    age:26,
    sum(a,b){
        console.log(a+b)
    }
}
obj.sum(2,2) // accessing function from obj and calling it

/*
Different ways to define a function in a object

//anonymous function
const obj = {
    name: 'John', 
    age:26,
    sum: function(a,b){
        console.log(a+b)
    }
}

//arrowfunction
const obj = {
    name: 'John', 
    age:26,
    sum: (a,b) => {
        console.log(a+b)
    }
}
*/

🌟Assigning values vs reference to variable

It is crucial to understand the value vs reference type. For simplicity just understand all primitive values are assign by value and a collection of primitive are stored in objects which is non primitive are assign by reference.

Example of Primitive assignment to a variable
A primitive value which are absolute values like number and strings are stored directly into the variable.

let a = 10;
let b = a
b =20
console.log(a,b) // output=> 10, 20

Behind the scene, primitive values are assign like this

Example of Non-Primitive assignment to a variable
A non-primitve value which is an object, function or array has there own memory space and when assign to a variable, that variable just hold the address location of that literal.

//array literal => [1,2,3]
//The array literal has its own memory
const arr1 = [1,2,4];
const arr2 = arr1;
arr2.push(3);
console.log(arr1, arr2);

Behind the scene, non - primitive values are assign like this

Thus, a reference/copy of address just being assigned to a variable and if that address assign to another variable it doesn't change the fact that the address is same.

🌟Difference in function declaration, statement and expression

There are different ways to write a function. In programming world different jargons are used to style those functions writing and it is important to understand those jargons/style and how they impact on the code functionality.

Function declaration/statement
Function declaration or statement essentially the same. When a special keyword function is used with the function name to define a function that is a function declaration or statement.

//below is the function declaration/statement
function sum(a,b){
    console.log(a+b);
}

Function Expression
A function expression is nothing but a block of code assign to a variable and the whole logic boils down to a value which is assigned to that variable. Normally a function expression is a anonymous function with or without function keyword.

//Example of function expression
const sum = () => { console.log(a+b); }

//Another Example of function expression
const sum = function(){console.log(a+b);}

🌟Different ways to add a function as a property to an object

In an object there are two ways to add a function as a property to an object.

*Implicit method *
The the implicit methods are methods which are defined within the object.

const obj = {
    name: 'John', 
    age:26,
    sum(a,b){
        console.log(a+b)
    }
}
obj.sum(2,2)

*Explicit method *
Explicit methods are methods and when a function statement is assign to an object explicitly. It can be done in two ways.

Runtime method declaration

const obj = {
    name: 'John', 
    age:26,

}
obj.sum = function(a,b){
console.log(a+b);
}
obj.sum(2,2); //function call

Pre-declare method

const obj = {
    name: 'John', 
    age:26,

}

function sum(a,b){
   console.log(a+b);
}
obj.sum = sum;  // assigning function definition to object property 'sum'
obj.sum(2,2); //function call

🌟Difference between fn() vs fn.

This is crucial to know the what is the difference between fn() can fn. A fn contains the actual body of the function while a fn() is the invokation/call of that function. When a function is called the control goes to that function block.

function print(){
console.log('print this string');
}

console.log(print) // this will console log the body of the function within {}. 

console.log(print())
or  just
print() // will print the string 'print this string'

🌟 What and Why 'this'

Now the question is what is 'this' and why?

'this' keyword is a special keyword in JavaScript and almost all OOPS language it's the same. The main job of the 'this' keyword to provide context.

Now the question might arise context of what?

'this' provide context of the scope in which a function is calling. It provides accessibility of that object with which it attached to. In Javascript 'this' default refers to 'window' object in browser and GlobalThis in node js.

Because of 'this' we can access functions and methods already provided by the web Apis.

But for our use case we create functions and classes to add a particular functionality and we need to tell compiler during execution of the code which context we are talking about when executing a function. Because this binding in javascript happens during runtime.

I know to understand 'this' can be complicated. We'll deep dive in next article and understand how this works using code snippets.

This is a great resource to understand this keyword

Why React Developers write Custom Hooks?

Himanshupal0001 — Fri, 27 Oct 2023 12:53:39 +0000

Being a React developer it's a common practice to use hooks. React provides many hooks out of the box like useState, useEffect,useContext etc for common use cases. However, most real-world applications require logic that goes beyond these basic hooks. This is where custom hooks come in handy.

I am sure you'll encountered such situations where you need to write customs hooks to achieve desired functionality.

But have you ever wondered-

Why do we write custom hooks instead of writing normal functions?
What is the difference between normal function and custom hooks?

Many developers get a hard time understand the difference between both. Even finding answers online couldn't give the satisfactory answers but just the copy paste definition of react hooks you find on React official website.

It is important to know the actual reason why to write a hook before even how to write a hook!!

Before discussing main topic let's do some homework , shall we 🤓!!

Let me just copy paste what is custom hook, what is normal react hook and rules to define both react hook and custom hook.

What is React Hook?

React hooks are predefined JavaScript functions powered by React to do certain tasks. It will hook into a react state lifecycle and keep track of it. For example a useState hook bind to its variable which keep track that if anything changes for that variable it will trigger a re-render on its own.

What are the rules for React hooks?

Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional or cannot be called in conditional block.

What are custom hooks?

Customs hooks are user defined hooks that are JavaScript functions supercharged ⚡by React. You can use React predefined hooks, define functions ,states and variables.

Rules for custom hooks

Your custom hook should start with the keyword use, for example, useAuthState, useFetch, etc.
Must follow React hooks rule.
Must be a funtion.

These are the things you must've known about hooks in general and custom hooks and you already read about custom hooks are reusable, abstract etc etc.

Now let's get down to business, Why just why custom hooks!!

See the below code , one is normal function and other is custom hook.

** Normal js function **

import { useDispatch } from 'react-redux'
import { signOut } from 'firebase/auth'
import { auth } from '../utils/firebase';
import { removeUser } from '../redux/authSlice'
import { useNavigate } from 'react-router-dom';

export const handleSignout = (token) => {
    const disptach = useDispatch();
    const navigate = useNavigate();
    try {
        if (token) {
            signOut(auth)
                .then(() => {
                    disptach(removeUser());
                    navigate('/')
                })
                .catch(err => {
                    console.log(err)
                })
        }

    }
    catch (err) {
        console.log(err)
    }
}

** Custom hook **

import { useDispatch } from 'react-redux'
import { signOut } from 'firebase/auth'
import { auth } from '../utils/firebase';
import { removeUser } from '../redux/authSlice'
import { useNavigate } from 'react-router-dom';

const useSignout = () => {
    const disptach = useDispatch();
    const navigate = useNavigate();

    const handleSignout = (token) => {
        if (token) {
            signOut(auth)
                .then(() => {
                    disptach(removeUser());
                    navigate('/')
                })
                .catch(err => {
                    console.log(err)
                })
        }
    }

    return handleSignout;
}

export default useSignout;

If you observed carefully you see there's only minor difference but logic is exactly the same. But one will give error and other is not. Why is this?

*The answer is stateful functions. *

Yeah ....

But what is stateful functions ?

** Stateful ** functions are js functions that use reacts usestate to manage state on component level.

Why we write customs hooks?

We write custom hooks to leverage the power of react. A custom hook it that function which can use react built in hooks, respect the react hook rules and custom hook rules and able to manage states within own scope.

For example

Below is the logout button page and a normal javascript function is bind with it.

The function is same , which mentioned above.

ON click this will throw an error that complaining about rules have not been followed. See below

** Now see the below with sign-out hook **

This logout button is bind with useSignout() hook. It didn't returned any error and worked as expected.

Conclusion

If you still struggling to understand what are custom hooks just remember that the functions in which you use react predefined hooks and that function must follow the hook rules are customs hooks which used to change state or do sideEffects.

Return Statement in Coding Languages

Himanshupal0001 — Wed, 21 Jun 2023 08:24:04 +0000

This blog is for all the new comers in coding world. This article will cover the most common yet crucial part of any programing language that is The return statement

What is return statement

Return state is used in functions.

A return statement causes execution of the function to leave the current function and resume at the point in the code immediately after where the function was called. Return statements in many languages allow a function to specify a return value to be passed back to the code that called the function.

It is important to understand that a return statement is not stopping the execution of a whole code file but a certain function, because it is function scoped.

For example--


function printMsg() {
return 'hi'
}

printMsg();


//output
hi

Usecases

Return statement is useful in many cases. It is mostly used to get the desired output from a function.

It can be used to get a certain value out of a function or getting modified data.

For example--


function greetings(name){
return ('Hi'+name)
}

greetings('John');

}

//output
Hi John

In the above example the function it taking an argument and returning it with an appended string.

Conclusion

I hope you understand the very basic usecase of return statement. Please comment if you have any query or suggestions to improve the overall content deliveriness.

JWT for Beginners 🔐

Himanshupal0001 — Wed, 31 May 2023 13:16:29 +0000

In this post we'll discuss about jwt-web-token.

Introduction
JWT is a compact, URL-safe means of representing claims between two parties. It allows you to securely transmit information between a client and a server as a JSON object. JWTs are commonly used for authentication and authorization purposes.

To understand jwt better I recommend to understand how http works and the structure of http.

Main Parts of JWT to understand.

JWT has two major parts to understand.

sign()
verify().

sign()

jwt.sign() is use to generate token in the server. It accepts two parameters.

jwt.sign(payload, secret_key).

A token is nothing but a long hashed string generated by sign function. This string consists of three parts separated by dot[.]

{ headers.payload.secretket}

For the better understanding the above string please see the the below code and then read explanation.

const payload = { userId: 1234, username: 'john' };
const secretKey = 'your-secret-key';
const token = jwt.sign(payload, secretKey);

In the above code payload is the an object including id of the user and username.

You can also send the roles and permission object in the payload to achieve RBAC.

Secret-Key is a long complex string saved in the server secretly that only known by that server.

jwt.sign() function will accept those parameters along with req.headers and hashed the data into a string. Example as below

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6I
kpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

That srtring will be returned by the server and saved in localstroage of browser. Later during login server will get that string verify the string and if string is valid , allow the user to login the app.

verify()

The process of authenticating the token received by the client is done by jwt.verify() function. The syntax is as below
jwt.verify(token,secret_key,(err,decode))

It is important to understand that token is coming from the client aka browser local storage, secret key is from server and it return a callback including either err or decoded payload.

How this work is it will get the token that includes headers.payload.sercert_key .

If the hashed secret key is equal to the key present in server, it will authenticate.

See Below

Shallow Copy vs Deep Copy JS & Reference Part-3🚀

Himanshupal0001 — Fri, 27 Jan 2023 11:35:42 +0000

his post is continuation of the last post.

In last post we were discussing What is Reference and done with assign by reference. Now we discuss further.

Table of content

1 Primitive Data type
2 Non-primitive data type
3 What is Reference
4 Shallow copy
5 Deep Copy

What is Shallow Copy?

Shallow copy is creating new copy of an array to the variable. The goal is to just copy the values of an array assign to the new variable which make it a new array rather pointing to the same memory. It is crucial in crud operations because they are immutable.

See the example below.

const student = {
  name: 'Sid',
  class: 'KG',
  subject: 'JS',
  marks: '100'
}
console.log(student);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
*/

const studentCopy = {...student}
console.log(studentCopy);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
*/

studentCopy.name = 'Alic'
console.log('student -> ',student,'studentCopy =>', studentCopy)
/* student->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"

studentCopy ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
*/

What is Deep Copy?

Deep copy is when you copy a nested array/object to another object. Like object has object in it. See Below

const student = {
  name: 'Sid',
  class: 'KG',
  subject: 'JS',
  marks: '100',
  address:{
    street: '29b',
    city: 'honkong'
  }
}
console.log(student);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "honkong"
*/

const studentCopy = {...student}
console.log(studentCopy)
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "honkong"
*/

studentCopy.name = 'Peter'
console.log('student -> ',student,'studentCopy =>', studentCopy)

/* student->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy ->
name:"Peter"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"
*/

studentCopy.address.city = 'New York'
console.log('student -> ',student,'studentCopy =>', studentCopy)

/* student->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"
*/

There's nothing new in above three outputs.Nested object✅, Copy of nested object✅. Change the property of copy object will not affect the other ✅. But as soon as you hit the forth block of code , you head gonna 🤯.

The question is why this behavior?
In nested objects the copy is created for parent object nested objects are assign by reference. You can change the value of parent object and get two different array but if you change the value of nested array you'll see the parent array's value also change. So the question arises...

How to resolve the deep copy issue ?

Use JSON.parse() and JSON.stringifty()

See code below

const studentCopy2 = (JSON.parse(JSON.stringify(student)));
studentCopy2.address.city = 'Warsaw';
console.log('student -> ',student,'studentCopy =>', studentCopy,'studentCopy2 =>', studentCopy2)

/* student->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "New York"

studentCopy2 ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
address:
    street: "29b"
    city: "Warsaw"
*/

Source
stackoverflow

medium

dev.to

Thanks to @amanse
End.

Handling errors in react 👩‍🚀🚀

Himanshupal0001 — Tue, 24 Jan 2023 07:59:11 +0000

Read this article

Shallow Copy vs Deep Copy JS & Reference Part-2🚀

Himanshupal0001 — Tue, 24 Jan 2023 06:16:43 +0000

This post is continuation of the last post.

In last post we were discussing What is Reference and done with assign by value. Now we discuss furthur.

Table of content

1 Primitive Data type
2 Non-primitive data type
3 What is Reference
4 Shallow copy
5 Deep Copy

What is Reference

Assign by reference

When a non-primitive data type like array, objects or function assign to a variable and that variable point to a address of the data type is called assign by reference. We can say that non-primitive data type is basically a collection of primitive data type. Show get access to all that primitive values collectively an address is assign to the variable.
See the example below for clarification.

const student = {
  name: 'Sid',
  class: 'KG',
  subject: 'JS',
  marks: '100'
}
console.log(student);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
*/

const studentCopy = student
console.log(studentCopy);
/* output ->
name:"Sid"
class:"KG"
subject:"JS"
marks:"100"
*/

//will change the name for both variables
studentCopy.name = 'Alic'
console.log('student -> ',student,'studentCopy =>', studentCopy);
/* student->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"

studentCopy ->
name:"Alic"
class:"KG"
subject:"JS"
marks:"100"
*/

Observe the above code, a object has been created names student and it has some info about the student which is primitive data type. This data saved collectively in an object having a address on which the variable student is referencing to.

Student is assign to studentCopy variable .These two variables are pointing to the same address. If there's any change in the values it will reflect in both variables.

Suppose this as a match broadcasting live on multiple screens all at once.

Source
stackoverflow

medium

dev.to

Thanks to @amanse
to be continue...

Shallow Copy vs Deep Copy JS & Reference Part-1🚀

Himanshupal0001 — Fri, 20 Jan 2023 11:28:44 +0000

Programming is all about handling data and data structure. JavaScript do the same thing. It is very crucial to know the data structures and the behavior of that data structure. Below is the topic to that will over in this post.

Primitive data types
Non-primitive data types
Data reference
Shallow Copy
Deep copy

Primitive Data Types

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties. Some of the examples of primitive data type is below.

string.
number.
bigint.
boolean.
undefined.
symbol.
null.

Non-Primitive Data Type

Non-primitive data types are the objects and arrays which has methods and objects. The value in these data types is primitive data type. We can say that non-primitive data types use to handle primitive data type.

Array
Object

Data Reference

What is data reference? aka (=)
Data reference is a concept in which a address is assigned to a variable which contains any value. To deeply understand this concept first you'll need to understand

What is assign-by-value
What is assign-by-reference

What is assign by value?
Assign by value means a value is directly assigned to a variable rather assigning a reference(address). Assign-by-value is mostly used when primitive data is assigned to a variable . See results below for better understanding.


//YOU CAN DO
let a = 24; //24 assigned by value to a
console.log(a)
//output -> 24

let b = a;
console.log(a,b);
//output -> 24,24

b++
console.log(a,b);
//output -> 24,25

//YOU CANT DO
const a = 24;
console.log(a)
//output -> 24

const b = a;
//error: 'cannot assign to b because it's a constant

The above lines might be confusing for beginners. Let me explain.

Primitive values are assign by value means only the value assign to the variable. You can assign a variable to other which has primitive value and it will yield the same output. But these two variables has no relationship tp each other.
As you can see in the example a, b has same value since a is assigned to the b. But when b is increment the value of a remains the same.

Why error for constant variables?

The answer is const variables can point toa single address and are immutable. Although you can change the value of it but not the address.

const c  = 24;
console.log(c);

const d = c;
d++
console.log(a,b);

//const variables can only point to single memory address only.You can change the value but not the memory address that a const is pointing too.
//a const will return true from '===' operator if it points to the same primitive value.
//one cannot assign a const variable  having a premitive value to the another const because then they will point to the same memory which is not possible.

I hope the above explanation is clear on assign by value and const variable 'nature'.

Source
stackoverflow

medium

dev.to

Thanks to @amanse
to be continued...

How to handle re-renders in react forms? 🚀

Himanshupal0001 — Wed, 18 Jan 2023 08:21:54 +0000

Today we gonna learn about how to handle forms in react. We specifically focus on handling re-renders. Re-rendering is not a bad thing in react, after all it's the very nature of react. But you might want not to re-render a component every time when the state change. There are two ways you can avoid re-renders. Keep in mind that if a state is not affecting any other state or component it's ok that a component re-renders.

Create a basic form

I created a component called FormInput and a page called form. FormInput will be called in form page.

Form.jsx

import React, { useEffect, useRef, useState } from 'react'
import './Form.scss'
import FormInput from './FormInput'
function Form() {

    return (
        <form>
            <div className='form'>
                <FormInput placeholder='username' />
                <FormInput placeholder='email' />
                <FormInput placeholder='full name' />
            </div>
        </form>
    )
}

FormInput.jsx

import React from 'react'
import './FormInput.scss'
function FormInput(props) {

    return (
        <div className='formInput'>
            {/* <label>User Name</label> */}
            <input placeholder={props.placeholder}  />
        </div>
    )
}

See images below

As you can see there is no rendering going on. We need to give state to the input for make it happen.

Adding state in the form

Form.jsx

import React, { useEffect, useRef, useState } from 'react'
import './Form.scss'
import FormInput from './FormInput'
function Form() {

    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [fullname, setFullname] = useState('');
    console.log('re-rendering', username);
    console.log('re-rendering', email);
    console.log('re-rendering', fullname);
    return (
        <form>
            <div className='form'>
                <FormInput placeholder='username' input={setUsername} />
                <FormInput placeholder='email' input={setEmail} />
                <FormInput placeholder='full name' input={setFullname} />
            </div>
        </form>
    )
}

export default Form

FormInput.jsx

import React from 'react'
import './FormInput.scss'
function FormInput(props) {

    return (
        <div className='formInput'>
            {/* <label>User Name</label> */}
            <input placeholder={props.placeholder} onChange={e => props.input(e.target.value)} />
        </div>
    )
}

export default FormInput

See the images below

As you can see there are three states and all are rendering parallelly. Even if there's change in one state all states re-render. You might want to stop the re-rendering want to render the component only once. For this we will use below approches

Use useRef instead of useState.

Form.jsx

import React, { useEffect, useRef, useState } from 'react'
import './Form.scss'
import FormInput from './FormInput'
function Form() {
    const usernameref = useRef();
    const emailref = useRef();
    const fullnameref = useRef();


    const handleSubmit = e => {
        e.preventDefault();
        console.log(usernameref);
        console.log(emailref);
        console.log(fullnameref);
    }
    return (
        <form onSubmit={handleSubmit}>
            <div className='form'>
                <FormInput placeholder='username' refer={usernameref} />
                <FormInput placeholder='email' refer={emailref} />
                <FormInput placeholder='full name' refer={fullnameref} />
                <button>Submit</button>
            </div>
        </form>
    )
}

export default Form

FormInput.jsx

import React from 'react'
import './FormInput.scss'
function FormInput(props) {

    return (
        <div className='formInput'>
            {/* <label>User Name</label> */}
            <input placeholder={props.placeholder} ref={props.refer} />
        </div>
    )
}

export default FormInput

As you can see I removed useState() and used useRef(). UseRef() can only render once when page reload so I prevent form to refresh unless submit button pressed.

See images below

Check the console. All the inputs render only once.

Using Object method

Instead useRef we can also use Objects using new keyword. We can create object of the input from form.

Form.jsx

import React, { useEffect, useRef, useState } from 'react'
import './Form.scss'
import FormInput from './FormInput'
function Form() {


    const handleSubmit = e => {
        e.preventDefault();
        const data = new FormData(e.target);
        console.log(Object.fromEntries(data.entries()));
    }
    return (
        <form onSubmit={handleSubmit}>
            <div className='form'>
                <FormInput placeholder='username' name='username' />
                <FormInput placeholder='email' name='email' />
                <FormInput placeholder='full name' name='fullname' />
                <button>Submit</button>
            </div>
        </form>
    )
}

export default Form

FormInput.js

import React from 'react'
import './FormInput.scss'
function FormInput(props) {

    return (
        <div className='formInput'>
            {/* <label>User Name</label> */}
            <input placeholder={props.placeholder} name={props.name} />
        </div>
    )
}

export default FormInput

See images below

Arguments vs Parameters 🚀

Himanshupal0001 — Tue, 17 Jan 2023 08:03:03 +0000

Arguments vs Parameters is quite a confusing topic not only for beginners but experienced dev also. Even though they use this on daily basis but couldn't explain theoretically.
Today we gonna discus about it.

One thing you must know before reading further

Parameter --> variable
Arguments --> Data

One of the fundamental building blocks in JavaScript programming is a function. It's a block of code designed to perform a particular task.

Functions are reusable code which you can use anywhere in your program. They eliminate the need to repeat the same code all the time.

To use functions in a powerful way, you can pass values in a function to use them.

Here is an example of a function:

function add(){
return 2+3;
}

add()

This is a function declaration, the name of the function is add, and it was called after the function with add() . The result of the function will be 5.

How to use parameter and arguments in a function

Take a look at the function down below

function add(x,y){
return x+y;
}

add(2,3);

We have introduced x and y here and changed the location of the 2 and 3. x and y are the parameters while 2 and 3 are the arguments here.

A parameter is one of the variables in a function. And when a method is called, the arguments are the data you pass into the method's parameters.

When the function is called with add(2, 3) the arguments 2 and 3 are assigned to x and y, respectively. This means that in the function, x will be replaced with 2 and y will be replaced with 3.

If the function is called with a different argument, the same applies. Parameters are like placeholders for function arguments.

The Power of Arguments

We can use arguments more efficiently when we want to make functions more re-useable, or when we want to make calling functions inside another functions more powerful.

Here is an example:

function add(x, y){
    return x + y
}

function multiply(a, b, c){ // a = 1, b = 2, c = 3
    const num1 = add(a, b) // num1 = add(1, 2) = 3
    const num2 = add(b, c) // num2 = add(2, 3) = 5

    return num1 * num2 // 15
}

multiply(1, 2, 3)
// returns 15

The first function add() has two parameters, x and y. The function returns the addition of the two parameters.

The second function multiply() has three parameters: inside the function, two variables are declared in it, num1 and num2. num1 will store the value of the result of add(a, b), and num2 will store the value of the result of add(b, c). At the end the multiply function will return the value of num1 multiplied by num2.

multiply is called with three arguments which are 1, 2 and 3. add(a, b) will be add(1, 2) which will return 3. add(b, c) will be add(2, 3) which will return 5.

num1 will have the value of 3 while num2 will be 5. num1 * num2 will return 15.

Arguments are passed in the multiply function which are also used as arguments for the add function.

SearchBar component in react 🚀🌕🔥

Himanshupal0001 — Wed, 11 Jan 2023 10:56:52 +0000

This post is about creating a search bar component that can be used as a reusable component throughout the app. This is also important to not that component not only useful to reuse but also to intact same design to the app. Not to mention the seamless experience of the app.

Table of content

What are props.
What are components.
How to send data from child component to parent component
Code

What is props

Props are nothing but the data which can be send to child components as a property of that function. If you know a little to too much about coding you'd know that when we write simple code in any language we pass the arguments to that function. Not to mention that a component is a function itself and JSX superpowers 💪. So we actually writing a function but with an actual visualization. Props are the arguments that we can pass to a function. It can be variable, string, array or even a function.

What is component

As I mentioned above. Components are nothing but just plain js function if you exclude the jsx from it. If you include it it become component. We are writing a function and just visualizing it using html. We can create a bunch of boxes, buttons, inputs etc and all of it put in a function. As we know function can take arguments and use those arguments as their value. The fancy thing about component is just we are getting these arguments out of scope of that function in fact from another file. So to make sure those arguments work in other function scope we send them as props. Rest react handle in the background.

How to send data from child component to parent component

Normally in react apps data flow from parent to div like water flows down from a cliff of a waterfall.

BUT!!! what if we want that water to climb up to that cliff.

In that case we use props.

Lets understand this concept by an example.

parent component

import React,{useState} from 'react'
function parent(){
const [input, setInput] = useState('');
console.log(input);
return(
<div className='box'>
<input type = 'text' value={input || ''} onChange(e => setInput(e.target.value)/>
<p>{input}</p>
</div>
)

In the above code you can get the value from input tag to you input state. But what if you need search in multiple component. You have to write the same code multiple times not the mention the css properties.

But if you create a seach component you don't need to write same code again and again. See the below example

Same parent with SearcBar component

import React,{useState} from 'react'
import SearchBar from '../SearchBar/'
function parent(){
const [input, setInput] = useState(''); //error
console.log(input); //error
return(
<div className='box'>
<SearchBar/>
<p>{input}</p> //nothing will show on dom
</div>
)

But How the hell we get input value from search component?
We do by using props.

parent component with props

import React,{useState} from 'react'
import SearchBar from '../SearchBar/'

function parent(){
const [input, setInput] = useState('')


//function
const handleOnChange = value => {
setInput(value); 
}
console.log(input);
return(
<div className='box'>
<SearchBar handleOnChange={handleOnChange}/>
<p>{input}</p>
</div>
)

Cild component SeachBar

import React from 'react'

export default const SearchBar = props => {
return(
<input type='text' onChange={e => props.handleOnChange(e.target.value)}/>
)
}

And Thats how you fetch data from child component

Add dynamic class in react

Himanshupal0001 — Tue, 03 Jan 2023 08:33:03 +0000

Today we gonna see how to add classes dynamically in jsx to change design.

Suppose we have below line of code

-- js
import React from "react";
import "./App.css";

function App() {
const row=[
{status: 'approved'},
{status: 'pending'},
{status: 'approved'},
{status: 'pending'},
]
  return (
    <div className="App">
    <div className='list'>
    {row.map((item) => (
     <span className='listbatch'>
     {item.status}
    </span>
    ))}
    </div>
    </div>
  );
}

export default App;

You'll get something like this

Now you need just add class in literal and add state of that class

function App() {
const row=[
{status: 'approved'},
{status: 'pending'},
{status: 'approved'},
{status: 'pending'},
]
  return (
    <div className="App">
    <div className='list'>
    {row.map((item) => (
     <span className={`listbatch ${item.status}`}>
     {item.status}
    </span>
    ))}
    </div>
    </div>
  );
}

Below is the css file

.list{
    display: flex;
    flex-direction: column;
    height: 20vh;
    width: 20vw;
    box-shadow:2px 4px 10px 1px rgba(218,218,218,0.478); 
    border-radius: .5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0%, -50%);
    padding: 10px;
}

.listbatch{
padding: 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.approved{
background-color: green;
color: white;
}

.pending{
background-color: yellow;
color: black;
}