Writing modern JavaScript code
Posted on May 17, 2017
Remember when JavaScript was a language used to make elements change on the page when the cursor was over them? These days are over, every language evolves over time, and so does the way wa use them. Look at the code you wrote one or two years ago: do you feel ashamed? If yes, this post is for you π
I'll try here to list some good practices to make your JavaScript code easier to write, read and maintain.
Use a linter that can format your code
The first advice I'm giving you is to use a linter that will check you respect
some rules that make your code consistent from a file to another, especially if
you're several developer to work on the same project: indentation, spaces in
parenthesis, replace ==
by ===
β¦
But more important, make your linter fix automatically your code for you when
possible. ESLint does that very well (with the --fix
option), and it's well-integrated with all major IDEs to auto-fix files on save.
You can also use Prettier which is more focused on formatting than linting, but the result is basically the same π
Next point will help you chose what rules to use with your linter:
Use modern rules for your linter
If you wonder what rules to want for your code, here is a hint: StandardJS. It's a very strict linter that won't give you any choice in the rules, but each of them is more and more admitted by the community. Here are some examples:
- use 2 spaces for indentation (I used to use 4 spaces, but actually using 2 is quite nice)
- no semi-colon (very weird at the beginning, but few days later I couldn't go back)
- spaces after keywords (like
if
) and in curly braces, not inside parenthesis - and a lot more.
StandardJS is a standalone Node module that can lint and fix your code, but if you want to use it in a big existing project and deactivate some rules (because some would need a lot of modifications), you can also use the ESLint predefined config. For instance I deactivated the rules no-mixed-operators and import/no-webpack-loader-syntax.
Use ES2015+ new features
If you develop with JavaScript there's no way you haven't heard of ES2015+ (or ES6, ES7β¦) features. Here are the ones I couldn't live without anymore:
- arrow functions: writing functions like
x => x * 2
is very useful with functional programming (see next point) - classes: stop using prototype functions, classes are so much cooler π (but don't abuse, JavaScript is so much better than any object-oriented language)
- operations with arrays and objects:
function doSomething() {
const a = doSomethingElse()
const b = doSomethingWithA(a)
const otherResults = { c: 'πΊ', d: 'πΆ' }
return { a, b, ...otherResults } // equivalent to { a: a, b: b }
}
const { a, c, ...rest } = doSomething() // Also works with arrays!
// `rest` looks like { b: ..., d: 'πΆ' }
- making promises easier to use with
async/await
:
// Please try to write the same code with classic promises ;)
async function doSomething() {
const a = await getValueForA()
const b = await getValueForBFromA(a)
const [c, d] = await Promise.all([
// parallel execution
getValueForC(),
getValueForDFromB(b),
])
const total = await calculateTotal(a, b, c, d)
return total / 1000
}
Wonder how to use these fantastic features? One of my articles gives you some advice! (By the way, with latest version of Node.js you probably won't need Babel anymore to use the greatest new features π)
Use functional programming
Very hype right now, functional programming is gaining a lot of success recently, not only in JavaScript. The reason? It makes the code more predictible, safer, deterministic, and a lot easier to maintain when you're used to it. Here are some simple advices:
First stop using for loops. In most (every?) case you don't need them. For instance:
const arr = [
{ name: 'first', value: 13 },
{ name: 'second', value: 7 },
]
// Instead of:
const res = {}
for (let i = 0; i < arr.length; i++) {
const calculatedValue = arr[i].value * 10
if (calculatedValue > 100) {
res[arr[i].name] = calculatedValue
}
}
// Prefer:
const res = arr
.map((elem) => ({ name: elem.name, calculatedValue: elem.value * 10 }))
.filter((elem) => elem.calculatedValue > 100)
.reduce(
(acc, elem) => ({
[elem.name]: calculatedValue,
...acc,
}),
{}
)
Okay I admit this is a very extreme example, and if you're not used to functional programming it may look more complicated. Maybe we can simplify it:
const enrichElementWithCalculatedValue = (elem) => ({
name: elem.name,
calculatedValue: elem.value * 10,
})
const filterElementsByValue = (value) => (elem) => elem.calculatedValue > value
const aggregateElementInObject = (acc, elem) => ({
[elem.name]: calculatedValue,
...acc,
})
const res = arr
.map(enrichElementWithCalculatedValue)
.filter(filterElementsByValue(100))
.reduce(aggregateElementInObject, {})
Here we defined three functions that basically exactly what their names say. Second advice: create local functions (even in existing functions) to document your code without comments!
Note that the three local functions don't modify context they're executed in. No external variable is modified, no other service is called⦠In functional programming they're called pure functions. They have some great advantages:
- they're easilly testable because from given parameters, there is only one possible result, even if we call the function several time;
- they're guaranteed to give the same result no matter the actual state of the application;
- the application state stays the same before and after the function call.
So my third advice: use pure functions a lot!
Some other advices to finish
- get used to work with asynchronous code, use promises a lot, look at observales with RxJS (there is a great tutorial about functional programming leading to reactive programming)
- write tests! Should seem obvious, but I know a lot of projects have untested code, although testing JavaScript (front or backend) is not as difficult as it seems.
- use latests features of the language: for instance stop writing
arr.indexOf(elem) !== -1
in favor ofarr.includes(elem)
. - read a lot of technical articles: the JavaScript subreddit is a very good source to know the coolest practices in the ecosystem.
Oh and to conclude, the greatest advice I can give you: always refactor your
code! Making improvements to a module you wrote one year ago? Take the
opportunity to replace var
with const
, to use arrow functions or
async/await
to simplify the code⦠It's always nicer to work on code you like
π
Check my latest articles
- π A better learning path for React with server components (May 26, 2023)What if we took advantage of React Server Components not only to improve how we use React, but also how we help people learn it from the beginning?
- π Display a view counter on your blog with React Server Components (April 24, 2023)A short tutorial with a cool use case for React Server Components, Streaming and Suspense with Next.js: adding a view counter on a blog, calling the Plausible analytics API.
- π Using Zod & TypeScript for more than user input validation (March 8, 2023)If you have ever created an API or a form accepting user input, you know what data validation is, and how tedious it can be. Fortunately, libraries can help us, such as Yup or Zod. But recently, I realized that these libraries allow patterns that go much farther than input validation. In this post, Iβll show you why I now use them in most of my TypeScript projects.