Personal Reminders for Writing Clean Code

THINK.md

Things to Remember When Trying to write Clean JavaScript

Prefer Multiple Paramaters Over Single Object Paramaters

Why?

It's easier to read!

// Good
const displayUser = (firstName, lastName, age) => {
  console.log(`Why hello there ${firstName}, or should I say Mr./Mrs. ${lastName}. You look oh so young for being ${age}.`)
}

// Bad
const displayUser = (user) => {
  console.log(`Why hello there ${user.firstName}, or should I say Mr./Mrs. ${user.lastName}. You look oh so young for being ${user.age}.`)
}

Destructuring

Destructuring let's you grab specific fields from an object and assign them to a variable immediately.

// Example for modules
const { add, substract } = require('./calculations.js');

Makes sense to only import functions yuo need to use in the file instead of the entire module.

Another Use Case

If you need an object as a function paramater, you should destructure as well. This will give us the overview of what is needed INSIDE of the function

const logCountry = ({name, code, language, currency, population, continent}) => {
  let msg = `The offical language of ${name} `
  if (code) msg += `(${code}) `
  msg += `is ${language}. ${population} inhabitants pay in ${currency}`
  if (continent) msg += ` The country is located in ${continent}`
}

logCountry({name:'El Salvador', code: '503', language: 'Spanish', currency: 'Bitcoin?/Peso/Dollar', population: '6.5 Million'});

Use Default Values

Meaningul Variable Names

Functions

Functions are typically an action. VERBS are a solid choice. Such as:

• convertCurrency
• displayUsername

Arrays

Typically hold a list of items, so make it plural and add an s

• Example: const students = ['John', 'Cleo', 'Leo'];

Booleans

Should start with is or has. As if you were asking a question: Is that person a baseball player?

• Example: const isBaseballPlayer = true;

Array Functions

forEach, map, reduce, filter, etc are native JS functions to handle arrays and perform some actions. Instead of passing el or element as aparamater to the callback function - name it according to its' value.

• Example:

const cities = ['Berlin', 'San Francisco', 'Tel Aviv', 'Seoul'];
cities.forEach(function(city) { ... });

IDs

Often timnes we have to keep track of Unique IDs to keep track of specific datasets and objects. Some common practices include prepending the type of object if extracting an ID from an object.

• Example: const studentId = student.id; or const { id: studentId } = student;

Use Async Await When Possible

Callbacks are tough to read, especially when nested. Promises are okay, but still async/await is easier to read.

Module Import Order

// 3rd Party packages
import fetch from 'node-fetch'

// Stores
import Store from '~/Store'

// Reusable Components for front end
import Button from '~/components/Button'

// Utility Functions
import pluck from '~/utils/helpers.js'

// Submodules
import Intro from './Intro';
import Selector from './Selctor'