Categories
JavaScript Best Practices

JavaScript Best Practices — Objects and Variables

Spread the love

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at the best ways to work with objects and variables.

Use Bracket Notation When Accessing Properties with a Variable

We should use the bracket notation when we access properties with variables.

For instance, we can write:

const getVal = (prop) => {
  return foo[prop];
}

const bar = getProp('jedi');

The code above has a getVal function to pass prop into the object foo .

Use Exponentiation Operator When Calculating Exponentiations

Instead of using Math.pow , we should use ** for exponentiation.

For instance, we can write:

const result = 2 ** 5;

instead of writing:

const result = Math.pow(2, 5);

Variables

There are some things to think about when we’re declaring JavaScript variables.

Always Use let or const to Declare Variables

We should always use let or const to declare variables.

Otherwise, we end up with global variables.

For instance, instead of writing:

foo = 1;

or:

var foo = 1;

We write:

let foo = 1;

or:

const bar = 2;

const values can’t be reassigned but whatever is assigned is still mutable.

Use One const or let Declaration Per Variable or Assignment

We should declare variables all on their own line.

This way, we know the type of each variable exactly.

For instance, instead of writing:

const foo = 1, bar = 2;

We write:

const foo = 1;
const bar = 2;

Group All const and let Statements Together

Grouping them together makes reading them easier.

For instance, instead of writing:

let foo = 1;
const bar = 2;
let baz = 3;
const qux = 4;

We write:

let foo = 1;
let baz = 3;

const bar = 2;
const qux = 4;

Assign Variables Where we Need Them

We should assign variables close to where we need to use them.

This way, we don’t have to follow many lines of code to see where they’re used.

For instance, instead of writing:

let x = 1;
// 50 lines of code that doesn't change x ...
x = 2;

We write:

let x = 1;
// 5 lines of code that doesn't reference x...
x = 2;

Don’t Chain Variable Assignments

We shouldn’t chain variable assignments.

This is because we’ll create global variables out of it.

For instance, if we have:

let a = b = c = 2;

Then b and c are global variables.

So we should write:

let a = 2;
let b = a;
let c = a;

instead.

Avoid Using Increment or Decrement Operators

The increment and decrement operators both update the value and return them at the same time.

Depending on the placement of the operator, it may return the updated value or the old value.

If we place ++ or -- before the operand, then the new value is returned.

Otherwise, the old value is returned.

For instance, if we write:

let x = 1;
const y = ++x;

Then y is 2 since the updated value of x is returned.

On the other hand, if we write:

let x = 1;
const y = x++;

Then y is 1 since the old value of x is returned.

This also applies to --

Therefore, we should use the += and -= operators instead and make the increment and decrement operators a statement.

For example, we can write:

x += 1;

or:

x -= 1

instead.

Avoid Line Breaks Before or After = in an Assignment

We can use parentheses to wrap a long JavaScript expression so that we can see what we’re assigning to a variable clearly.

For instance, instead of writing:

const foo =
  longExpression;

We can write:

const foo = (
  longExpression
);

Conclusion

We should always use let or const to declare variables.

Also, we should use += or -= operators instead of ++ or -- for increment and decrement respectively.

If we have long expressions, we should wrap them in parentheses before assigning them.

We should use the dot notation as much as possible for accessing properties.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *