For a good reason, JavaScript is one of the most popular programming languages in the world. It’s versatile, easy to learn, and can be used for various applications, from web development to server-side programming. However, as with any language, there are best practices that developers should follow to ensure that their code is efficient and performs well. This article will review some best practices for writing efficient JavaScript code, updated for ES6.

Photo by Sam Dan Truong on Unsplash

1. Use let and const instead of var.

With the introduction of ES6, developers now have two new ways to declare variables: let and const. These two new keywords provide a more precise and consistent way to declare variables and have a more strict scoping behavior than var. Generally, it would be best to use let when you need to reassign a variable and const when you don’t. This can help you write more maintainable code and avoid subtle bugs.

2. Use arrow functions

Arrow functions are a new feature in ES6 that provide a more concise syntax for writing functions. They’re also more efficient than traditional function expressions since they don’t create a new scope for this keyword. Arrow functions are handy for writing small, anonymous functions passed as arguments to other functions.

If you want to read more about functions, you can read this article I wrote: https://medium.com/p/f38f578cedc1

Photo by Tim Mossholder on Unsplash

3. Use template literals

Template literals are a new feature in ES6 that provide a more concise and readable way to concatenate strings. They allow you to embed variables and expressions directly into a string using the ${} syntax. This can make your code more readable and maintainable, especially if you need to concatenate many strings.

4. Use destructuring

Destructuring is a new feature in ES6 that allows you to extract values from arrays and objects into individual variables. This makes working with complex data structures easier. For example, instead of writing:

const firstName = person.firstName;
const lastName = person.lastName;

You can write:

const { firstName, lastName } = person;

5. Use default parameter values

Default parameter values are a new feature in ES6 that allow you to specify default values for function parameters. Makes it easier to handle optional arguments.

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, World!
greet('Alice'); // Hello, Alice!

6. Use the spread operator

This new feature in ES6 allows you to spread an array into individual arguments or combine multiple arrays into a single array.This gives you many advantages to working with arrays. The spread operator is widely used in JS Libraries like ReactJS.

const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

const combined = [...numbers, 4, 5, 6];
console.log(combined); // [1, 2, 3, 4, 5, 6]

7. Avoid unnecessary variable bindings

In general, it’s a good practice to avoid creating unnecessary variable bindings. This helps to avoid subtle bugs. Instead of writing:

const foo = getFoo();
const bar = foo.bar;

You can write:

const bar = getFoo().bar;

8. Avoid using for…in loops for arrays

For…in loops should generally be avoided when iterating over arrays since they can be slow and can also iterate over non-enumerable properties. Instead, you should use for…of loops or the forEach method.

This was one of the most beloved (by me) changes of ES6. I hate for loops since day 1.

const numbers = [1, 2, 3];

for (const number of numbers) {
  console.log(number);
}

numbers.forEach(number => {
  console.log(number);
});

9. Use object shorthand syntax

Object shorthand syntax is a new feature in ES6 that provides a more concise way to create object literals. This is another awesome feature; shorthand syntax makes you save time and write more readable and concise code.

Instead of writing:

const foo = 'foo';
const bar = 'bar';

const obj = { foo: foo, bar: bar };

You can write:

const foo = 'foo';
const bar = 'bar';

const obj = { foo, bar };

10. Minimize the use of global variables

Global variables can be a source of bugs, making it harder to reason about your code. You should avoid using global variables instead of local variables or object properties. If you need to use global variables, minimize their use and ensure they’re properly scoped.

Finally…

By following these tips and tricks, you can write faster, more efficient code that’s easier to read and maintain. It is never too late to remember them. I know most JS developers know them, but if some are not at the top of your mind, you can save this article and review them any time you need.

And remember, don’t over-code an app. If it works as it should in the simplest way, that’s the one. Don’t be THAT developer. Be simpler, be clear.

💡 An open-source toolchain like Bit would allow you to share and reuse components of your code across multiple projects. This reduces the amount of code you need to write and making your codebase more maintainable, ultimately resulting in faster development time and more efficient JavaScript code. Learn more here, here, and here.