Maintainable JavaScript — with and for Loop

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

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.

The with Statement

The with statement should never be used.

It was used for manipulating objects within its own context by creating a with block.

For instance, we could write:

var book = {
  title: "javascript for beginners",
  author: "james smith"
};

with(book) {
  message = `${title} by ${author}`;
}

to add the message property to book .

However, this isn’t allowed in strict mode because of its confusing scope.

We don’t know for sure from the code whether message is a global variable or a property of book .

The same issue prevents optimizations from being done since JavaScript engines may guess wrong.

Therefore, we should never use this.

It’s also forbidden in all style guides.

Linters can check for this so we won’t write with statements accidentally.

The for Loop

The for loop is one kind of loop in JavaScript that’s inherited from C and Java.

There’s also for for-in and for-of loop that lets us iterate through a property of an object and entries of iterable objects respectively.

For instance, we can write:

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

for (let i = 0; i < len; i++) {
  console.log(values[i]);
}

We created a for loop to loop through some numbers by defining the values array and setting its length to len to cache it.

There’re 2 ways to change how the loop proceeds.

One if to use the break statement.

break will end the loop and not continue to the next iteration.

For instance, we can write:

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

for (let i = 0; i < len; i++) {
  if (i === 2) {
    break;
  }
  console.log(values[i]);
}

to end the loop when i is 2.

Another way to change the loop behavior is with the continue keyword.

This lets us skip to the next iteration of the loop.

for instance, we can write:

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

for (let i = 0; i < len; i++) {
  if (i === 2) {
    continue;
  }
  console.log(values[i]);
}

Then when i is 2, we’ll skip to the next iteration.

Some style guides like Doug Crockford’s style guide forbids the use of continue .

His reason is that it can be written better with conditions.

For instance, instead of writing:

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

for (let i = 0; i < len; i++) {
  if (i === 2) {
    continue;
  }
  console.log(values[i]);
}

We can write:

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

for (let i = 0; i < len; i++) {
  if (i !== 2) {
    console.log(values[i]);
  }
}

He says that it’s easier for programmers to understand conditionals than continue .

continue isn’t used very often as a loop control statement, so we can probably live without it and use conditionals.

Conclusion

with statement should never be used. It’s also disabled in strict mode.

Before using the continue keyword in loops, we should think twice.

The post Maintainable JavaScript — with and for Loop appeared first on The Web Dev.