Maintainable JavaScript — with and for Loop
Tags: javascript, webdev, beginners, codequality
Published: 2020-10-19 00:55:14

---
title: Maintainable JavaScript — with and for Loop
published: true
date: 2020-07-29 19:56:25 UTC
tags: javascript,webdev,beginner,codequality
canonical_url: https://thewebdev.info/2020/07/29/maintainable-javascript%e2%80%8a-%e2%80%8awith-and-for-loop/?utm_source=rss&utm_medium=rss&utm_campaign=maintainable-javascript%25e2%2580%258a-%25e2%2580%258awith-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](https://thewebdev.info/2020/07/29/maintainable-javascript%e2%80%8a-%e2%80%8awith-and-for-loop/) appeared first on [The Web Dev](https://thewebdev.info).