DEV Community: Ashish Singh Rawat

hola

Ashish Singh Rawat — Thu, 25 Nov 2021 06:57:44 +0000

Constructor is no more | React

Ashish Singh Rawat — Thu, 25 Nov 2021 06:45:37 +0000

Yes, you read it right! There is no more constructor in class component in react.js. You must have seen the traditional react code similar to below


class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      toggle: true,
    };
  }
}

as per new react(v0.13.0-beta), this can be written in a new format


class App extends Component {
    state = {
      toggle: true,
    };
}

This was inspired by TypeScript’s property initializers.

Advantages:

Much cleaner way to write

References

Commenting Code | Good Practices

Ashish Singh Rawat — Sun, 26 Sep 2021 15:43:05 +0000

Imagine, you have joined a new company and given access to their source code. Now it's your sole responsibility to maintain the code and you cannot go to the guy who has written this code.

As a developer, regardless of speciality, we tend to spend more time on reading others' code. Writing comments can help other developers understand the complex logic you were thinking while building it.

Here are some tips that can be used while writing comments.

Single line comments

This starts with // and then the description of the code
It’s a good idea to comment code that someone else might consider unneeded.

// execute only if array has some value
if(arr.length) { // inline comment
..
}

Multiline Comments

These comments are generally written when you have developed a complex feature.
It helps in documenting the project.
It starts with a blank line starting with /**
each line starts with *
Ends with with a blank line starting with */


/**
 * @description This function generates the button required for Action Bar
 * @author Ashish
 * @param { Function } t => translation function
 * @param { Object } history => contains previous state
 * @param { Function } print => property passed from parent to print
 * @returns { Array } buttons array of Objects
 * @see {@link https://stackoverflow.com/users/5282407/ashish-singh-rawat }
 * @todo Performance optimisation, removing multiple loops
 * * BELOW ARE SOME MORE META DATA, that can be used
 * @argument @async @borrows @class @classdesc @constant
 * @constructor @copyright @default @deprecated @emits
 * @enum @event @example @extends @external @field @file
 * @fileoverview @fires @function @generator @global
 * @hideconstructor @host @ignore @implements @inheritdoc @inner
 * @instance @interface @kind @lends @license @listens @member @memberof
 * @method @mixes @module @name @namespace @override @param @private @property
 * @protected @public @readonly @returns @see @since @static @summary @template
 * @this @throws @tutorial @type @typedef @var @variation @version @virtual 
 * @yields 
 **/
export const getButtons = (t, history, print) => {
...
}

Adding a metadata

Add a preface/ description to your comment, keep it short and what it does. No one wants to read a novel.
parameter or arguments, it is accepting and the type of it
Author this tells who has written this
return what exactly the function is returning
link a reference to other web link
todo if have written a hackfix, or you want to change the code in later stage
There are other metadatas, which you can use. Just @ in your multi comments will the rest
Eg: example, methodof, private, public, protected ...

Note:

type to be in uppercase Boolean, Object.

Now if somebody is using your functions with comments it will also help them write their code. Eg:

Don'ts

Writing comments for each line. Yes I have seen code where comments are written for each line or self explanatory.

Compnent.propTypes = {
  /** translation function */
  translation: PropTypes.func,
  /* history received as props for navigation purpose */
  history: PropTypes.object,
  /** data from graphql response */
  data: PropTypes.object
}

Writing inappropriate description to your comment. Swearing in code. Yes, developer does that.
Not writing comments at all in your file.

References

There are multiple good libraries that have good comments like lodash, React, Angular.
Please to refer their comment style for more.
Funny comments

Object destructuring in Javascript | Real time example | Good Practice

Ashish Singh Rawat — Tue, 21 Sep 2021 17:11:45 +0000

I was working on my project and got a review comment from my colleague to put the default value for the nested object, as it could break the app.

Below was the response object structure that I was getting from an API call.

response = {
  data:
   someData: {
     name: 'Ashish',
     number: 9876543210
    }
  }
}

only name and number were getting used in the code. The code I had written previously for which I have received the comment looked as below.

const { name, number } = response.data.someData;

PROBLEM

Now the problem with above code is,

if Backend doesn't share the data object. Then JS the engine will try to find someData in undefined. This could have broke the application
I wanted to write everything in one line, instead of destructuring multiple times

So to avoid the above problem, I had to google and search for a good practice for javascript multilevel destructuring with default values. And here is what I got

SOLUTION

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

code doesn't break, as we are setting default values for the response object in the frontend.
Clean code
Readable (This point is argued, depends on developer perspective)

EXPLANATION

If you haven't tried multilevel destructuring, above code might look little confusing, let's break the above code into multiple statements

1. Destructuring Multilevel

const { 
  data: 
    { someData: 
      { 
        name,
        number
       }
     }
   } = response;

//OR
// In one line

const { data: { someData: { name, number } } } = response;

This is how we destructure a multilevel object. With parent object data outside pointing to the child object someData and then the child object someData referring to the child object having values nameand number.

2. Assigning default value

if data doesn't exist in the response object, assign a default value to it

const { data = {} } = response;

If data doesn't exist in response, then data with empty object is created inside the response

Note:

Default values go to the right hand side and = is used to assign the value.

const {
        data: { 
           someData: { 
             name,
             number
           }
       } = { someData: { name: '', number: null } } } = response;
// OR
// in 1 line

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

This creates an object with someData with name default value is '' empty string and number's default value as null.

Note:

'' empty string and null are falsy values.