We've seen a lot of code through the years both good and bad. Here's a list of things that you should definitely use and things that cause issues and you should avoid.

This guide is geared toward Junior developers or developers that are completely unfamiliar with JavaScript.

A common issue that we see today is that a lot of developers will do things just because a blog post told them to - like we're doing here.

However, we want to encourage you to find your own answers, ask yourself: "why are they saying do this", read the documentation, understand the core problem of the example. Don't just take our word for it, do it because it's the right thing to do.

If you have any questions about why something is listed here, try looking up the documentation!

General

Things you can do right in JavaScript and coding in general.

✅ DO

Take advantage of JavaScript's Truthy and Falsy.

const matchDog = 'cool dog'.match('dog')
if (matchDog) {
  console.log('this will execute', matchDog[0])
}

❌ DON'T

Don't compare a variable to true/false or null/undefined

const matchDog = 'cool cat'.match('dog')
if (matchDog !== undefined) { // bad
  console.log('this will execute', matchDog[0])
}

foo !== undefined                 // bad
foo !== null                      // bad
foo !== undefined && foo !== null // bad

The code above won't even work, because the result of match is null and not undefined.

✅ DO

Use const for values that won't change.

const arr = []
arr.push(1)

const thisWontChange = 1

❌ DON'T

Don't use let or var for values that won't change.

let arr = [] // bad
arr.push(1)

let thisWontChange = 1 // bad

✅ DO

Understand what you're doing.

array.map(({ name }) => name)

/dog/.test('any doggers?')

'abc'.charCodeAt(0)

foo['bar'] = { count: 1 }

if (foo) {
  /* ... */
  return true
}

return false

❌ DON'T

Don't just do it because "it works".

array.map(x => array2.push(x.name)) // bad

new RegExp('dog').exec('any doggers?') ? true : false // bad

'abc'.substring(0, 1).charCodeAt(0) // bad

foo['bar'] = true
foo['bar'].count = 1 // bad

if (foo) {
  /* ... */
  return true
} else {
  return false
}

✅ DO

Avoid using await if you're only returning a Promise.

function foo() {
  return apiCall()
}

❌ DON'T

Don't await a promise just to return it.

async function foo() {
  return await apiCall() // bad
}

✅ DO

Use an async function to execute async operations.

async function foo() {
  const result = await apiCall()
  /* ... */
  
  return result
}

❌ DON'T

Don't use async with a Promise if that's not needed at all.

function foo() {
  return new Promise(async (resolve) => { // bad
    const response = await apiCall()
    resolve(response)
  })
}

✅ DO

Export named elements.

export const foo = ...

❌ DON'T

Don't export default.

export default Foo // bad

✅ DO

Follow the library/framework patterns (e.g. Angular has a dedicated page to tell you how to organize things).

❌ DON'T

Don't create your own pattern. Don't use patterns that were not made for the thing you're using (e.g. don't use a MVC pattern in React).

✅ DO

Write what the function does.

Widget
  ✓ contains a button
  ✓ dispatches an event on click
  ✓ shows the name of the user
  ✓ shows the type of widget

❌ DON'T

Don't write "should" on your test cases.

Widget
  ✓ should contain a button // bad
  ✓ should dispatch an event on click // bad
  ✓ should show the name of the user // bad
  ✓ should show the type of widget // bad

Git

Things you can do right in Git.

✅ DO

Create descriptive commits in present imperative tense. Commits should only do one thing.

Add user login page
Add forgot password link
Enable https in config
Change profile link

When you're doing something complicated it's also a good thing to add a description to a commit, like:

Change image rendering

The current package to handle images does not support cropping. This installs package X that will replace Y and allow support to install plugins for cropping.

❌ DON'T

Don't use past tense, don't create commits that do multiple things, don't just write anything.

Added login page                              // bad
Added forgot password link and profile page   // bad
.                                             // bad
link                                          // bad

React

Things you can do right in React.

✅ DO

Separate logic from your components.

class App extends Component<AppProps, AppState> {
  click = () => {
    /* dispatch an action or call a service.doSomething */
  }

  render() {
    return (
      <button onClick={this.click}>click me</button>
    );
  }
}

❌ DON'T

Don't make API calls or parse/handle data in the component code.

class App extends Component<AppProps, AppState> {
  click = async () => {
    const response = await axios.get('http://...') // bad
    const data = response.data                     // bad
    /* ... */
    this.setState({ name, email, age })
  }

  render() {
    return (
      <button onClick={this.click}>click me</button>
    );
  }
}

Express

Things you can do right in express for Node.js.

✅ DO

Stop execution after sending a response in express.

app.use('/foo', (req, res) => {
  if (/* bad condition */) {
    return res.status(400).json({})
  }
  
  return res.status(200).json({})
})

❌ DON'T

Don't allow the code to execute after sending a response

app.use('/foo', (req, res) => {
  if (/* bad condition */) {
    res.status(400).json({}) // bad
  }
  
  res.status(200).json({})
})

✅ DO

Use routes to get data and handle the logic intended for that route.

app.get('/users', (...) => ...)
app.post('/users', (...) => ...)

❌ DON'T

Don't use middlewares as a mean to handle code that should be a route.

app.use((req, res) => {
  /* if users res.json({}) */
})

Hope you enjoyed the challenge

Just doing something because it works or because someone told you to is pretty easy, but it's not necessarily the best thing to do. When you get enough practice and start using things they way they were designed to work your code will get cleaner, faster and will be much more pleasant to work on!

No one works with an agency just because they have a clever blog. To work with my colleagues, who spend their days developing software that turns your MVP into an IPO, rather than writing blog posts, click here (Then you can spend your time reading our content from your yacht / pied-a-terre). If you can’t afford to build an app, you can always learn how to succeed in tech by reading other essays.