One of the most crucial steps in the development of a project is to write clean code. Not only will it be easy to read, but it will also have a nice structure, making your code understandable to everyone who looks at it.
How do we accomplish that?
There are various guidelines and syntaxes that will help you write less code, such as the D.R.Y. rule, which means developing reusable code and not duplicating code blocks that aren’t essential. This is the most crucial principle since it will help you rethink how you write your code and save some additional lines and KB when deploying your code to production. Performance is vital, and you’ll want to save every bit of memory available.
Another recommendation is to use ES6 syntax to reduce the amount of code you write by simplifying some syntaxes. The most used are exactly the ones we’re going to be talking in this article.
Arrow functions which allow you to write JavaScript functions in a more compact manner while solving the difficulty of accessing this property from callbacks. A simple arrow function looks like this:
const myFunction = (param1, param2) => {}When returning something, the “return” keyword is optional, and the curly brackets can become parentheses if you’re returning many lines, or they can disappear if you’re returning only one value, depending on what you’re returning:
const myFunction = (param1, param2) => param1 + param2The parentheses surrounding the variables can also be optional if you have only one parameter:
const myFunction = param1 => param1Then there is the object destructuring which allows you to rapidly assign particular fields from an object to a variable reducing the amount of code used for declarations:
const user = {firstName: “John”, lastName: “Doe”};Destructuring:
const {firstName, lastName} = user;Not destructuring:
const firstName = user.firstName;const lastName = user.lastName;Another trick is to use backticks (‘) to separate template literals when creating multiline strings and performing string interpolation:
const x = “Var”;const example = `Something ${x} something`;Instead of
const example = “Something” + x + “something”;There is another important ES6 syntax is the shorthand method that removes the if else syntax allowing us to write less and make more readable code:
condition ? doThisIfTrue : doThisIfFalseInstead of
If (condition) {
doThisIfTrue
} else {
doThisIfFalse
}Try avoiding callbacks and nested callbacks where possible and instead use promises and async / await to handle asynchronous functions.
Of course, there are many ES6 methods that can be used but these are the most used. You can learn more on here, if you wish.
Another key point to remember is data scarcity, which implies that you should not transfer data that you don’t require. Instead of passing an entire object when you only need a variable, rearrange your data and only send what is required for functionality. When you have several API calls to make, this is a great way to limit the amount of data you have to pass around.
If your code grows in size, it’s a good idea to split it up into numerous files to prevent large chunks of data that are difficult to understand and manage. Dividing the code into files and modules is a good idea as it helps organize your project and improves readability.