JS Clean Code

Saurabh — Tue, 20 Apr 2021 07:46:22 +0000

Intro

Today's Agenda

Our today's agenda is how to write clean code with javascript.

Avoid Magic Numbers

Don't use random numbers in your code because your teammates may not be able to figure out what they are.

You should name them as descriptive constants.

Example

// bad
if (num >= 8 && num <= 20) {
  // ...
}

// Good
const MIN_PASSWORD_LENGTH = 8;
const MAX_PASSWORD_LENGTH = 20;

if (num >= MIN_PASSWORD_LENGTH && num <= MAX_PASSWORD_LENGTH) {
  // ...
}

Avoid taking Boolean Flags in Function

When your function requires a boolean parameter to do something it means your function is doing more than one thing which not a good practice.

You can split your function into different functions. This way your code is easy to test and debug.

Example

const TAX =  0.05;
const PRO_TAX = 0.01;

// bad
function getPrice(item, isPro) {
  if (isPro) {
    return item.price + item.price  * PRO_TAX;
  } else {
    return item.price + item.price  * TAX;
  }
}

// good
function getPrice(item) {
  return item.price + item.price  * TAX;
}

function getProPrice(item) {
  return item.price + item.price  * PRO_TAX;
}

Avoid Extra Context

When you create an object, then you should avoid adding additional context to it.

Example

// bad
const user = {
  userName: 'foo',
  userID: 'bar',
  isUserPro: false
}

// good
const user = {
  name: 'baz',
  ID: '443',
  isPro: true
}

Declaring Variables

You can declare variables on the same line by separating them with a ,.

Example

// bad
let a = 'baz';
let b = 'foo';

// good
let a = 'baz', b = 'foo';

Using Async/Await

Promises are a very clean way of dealing with asynchronous code (if compared to callbacks).

But in modern JavaScript, we have an even cleaner way to handle asynchronous code i.e, Async/Await.

Async/Await is just syntactic sugar over the promise API.

const API_URL = 'https://jsonplaceholder.typicode.com/todos/1';

// bad
fetch(API_URL)
  .then(res => res.json())
  .then(json => show(json))

// good
async function showTodo() {
    const data = await (await fetch(API_URL)).json()
    show(data)
}

Conclusion

Here is a Github repo having tons of tips for writing clean with javascript.

ryanmcdermott / clean-code-javascript

Clean Code concepts adapted for JavaScript

JavaScript does not enforces us to write good code. Due to this we often write that just works nobody knows how, but it just works.

But with tools like eslint and typescript, we prevent it to some extent. Here is a post to help write good code with eslint.

Article No Longer Available

Share your favorite tips for writing clean code below.

Add Eslint, Prettier, and Airbnb Style Guide to Your Project.

Saurabh — Mon, 19 Apr 2021 06:11:54 +0000

Why even use ESLint.

As we all know Javascript is a dynamic language i.e, there is a lot of room to make errors and write bad code. So to prevent some of these errors we have ESLint with us.

Creating a Project

I assume you have nodejs installed on your system.
Now open your terminal.

Let's create a sample vite project in which we are going to install ESLint (NOTE: You can add ESLint in any javascript project).

You can create a vite project by running the following commands.

npm init @vitejs/app eslint-app --template vanilla
cd eslint-app
npm i

ESLint

ESLint is a Javascript tool used for linting common errors and anti-patterns in your code. It is used by javascript devs all around the world.

Here is a graph from npmtrends.com

After reading this post you are going to be one of those devs.

Installing ESLint

Now we can add ESLint to our app. It is as easy as running

npx eslint --init

Now ESLint will ask you some questions related to your app.

Eslint has generated a .eslintrc.js file, this file is the file used to configure ESLint.

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};

Airbnb

When we set ESLint in our app we can choose to use the Airbnb style guide.

So what is the Airbnb style guide. Airbnb style guide is a set of guidelines and some common best practices for writing good code.

The Airbnb style guide is one of the most stared style guides on Github.

NOTE: eslint-config-airbnb-base does not comes with linting rules for react, if you do want rules for react consider using eslint-config-airbnb

Now finally let's add prettier

Prettier another tool used by developers to format their code.

Don't get confused between ESLint and prettier, ESLint is a linter that finds errors in your code on the other hand prettier is a code formatted.

Installing Prettier

So to add prettier to our project run the following commands

npm i eslint-config-prettier eslint-plugin-prettier prettier -D

Now let's add prettier to .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base", "prettier"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

Some Pro tips:

Here are some tips to make your experience better.

1: Install prettier and ESLint extension for VSCode

2: Add the following lines in your setting.json (VSCode only).

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

This automatically formats and fixes all fixable errors in your code on save.

3: Add a lint and format script in package.json

  // ...
  "scripts": {
    "lint": "eslint --fix main.js",
    "format": "prettier -w ."
  }
  // ...

NOTE for React Apps

You might have some problem (I had some) if you choose to use react as a framework while setting up ESLint and then add prettier then.

It is because both react style guide and prettier try to format and lint your code.

So, I recommend removing the react plugin from the .eslintrc.js (don't remove prettier) because the eslint-config-airbnb (Airbnb's style guide) also has rules and guidelines for React.

Conclucsion

Writing maintainable javascript is hard but with help tool
like ESLint, prettier, and typescript, we can make it a lot easier.

Had any problem comment down below?

DEV Community: Saurabh

JS Clean Code

Intro

Today's Agenda

Avoid Magic Numbers

Example

Avoid taking Boolean Flags in Function

Example

Avoid Extra Context

Example

Declaring Variables

Example

Using Async/Await

Conclusion

ryanmcdermott / clean-code-javascript

Clean Code concepts adapted for JavaScript

Article No Longer Available

Add Eslint, Prettier, and Airbnb Style Guide to Your Project.

Why even use ESLint.

Creating a Project

ESLint

Installing ESLint

Airbnb

Now finally let's add prettier

Installing Prettier

Some Pro tips:

1: Install prettier and ESLint extension for VSCode

2: Add the following lines in your setting.json (VSCode only).

3: Add a lint and format script in package.json

NOTE for React Apps

Conclucsion