Don't let people tell you DO's and DON'Ts for JavaScript, Git, React, Node (but here are some anyway)
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 // badThe 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)) // badnew RegExp('dog').exec('any doggers?') ? true : false // bad'abc'.substring(0, 1).charCodeAt(0) // badfoo['bar'] = true
foo['bar'].count = 1 // badif (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
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 linkWhen 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 // badReact
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!