Maintainable JavaScript — Loops and Variables

Spread the love

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at various block statements and declaring variables.

The for-in loop is used for iterating over the properties of an object.

Instead of defining control conditions, the loop goes through each property and returns the property name in a variable.

For instance, we can use it by writing:

for (const prop in object) {
  console.log(prop, object[prop]);
}

object is the object, prop is the property key.

The for-in loop gets all the properties in the object itself and all its prototypes.

So we may end up with results that we don’t expect.

Therefore, we want to use the hasOwnProperty method to check if the property is in the method.

For instance, we can write:

for (const prop in object) {
  if (object.hasOwnProperty(prop)) {
    console.log(prop, object[prop]);
  }
}

Some style guides, like Douglas Crockford’s requires the hasOwnProperty in for-in loops.

Both ESLint and JSHint warns us when we use for-in loop without the hasOwnProperty method.

A common mistake is to use the for-in loop to iterate over an array.

For example, we shouldn’t use the for-in loop to loop through an array:

const values = [1, 2, 3, 4, 5];

for (const i in values) {
  console.log(values[i]);
}

This is because the order isn’t guaranteed.

And it’s not its intended purpose.

The for-in loop is for treating over keys of the object and its prototype.

The for-of loop lets us iterate through an iterable object.

This is the loop that we should loop through an array.

For instance, we can use it by writing:

const values = [1, 2, 3, 4, 5];

for (const val of values) {
  console.log(val);
}

val is the entry of the array.

We can loop through any iterable object, so we can loop through maps and sets.

For example, we can write:

const values = new Set([1, 2, 3, 4, 5]);

for (const val of values) {
  console.log(val);
}

and:

const values = new Map([
  [1, 'foo'],
  [2, 'bar'],
  [3, 'baz']
]);

for (const val of values) {
  console.log(val);
}

We can destructure the keys of a map:

const values = new Map([
  [1, 'foo'],
  [2, 'bar'],
  [3, 'baz']
]);

for (const [key, val] of values) {
  console.log(key, val);
}

This is the recommended loop by many style guides like ESLint and Airbnb.

Variable declarations can be done with the var , let or const keywords.

var is the old way to declare variables.

We should use let and const since they’re block-scoped and they’re only available after they’re defined.

const variables also can’t be reassigned.

For instance, instead of writing:

function doWork() {
  var result = 20 + value;
  var value = 30;
  return result;
}

We write:

function doWork() {
  const value = 30;
  const result = 20 + value;
  return result;
}

We use const as many as places as we can so the variables can’t be reassigned accidentally.

The for-in loop is only used for iterating through the keys of an object.

The for-of loop is for iterating through any iterable object.

Also, var should no longer be used for declaring variables.

By John Au-Yeung