Object-Oriented JavaScript — Errors and Iterables

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/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the error object and iterables.

Error Objects

JavaScript throw Error objects when an error is encountered.

They include various constructors.

They include EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError.

All of these constructors inherit from Error .

We can put code that may throw errors within the try block.

And we can catch the error in the catch block.

For instance, we can write:

try {
  foo();
} catch (e) {
  //...
}

If foo throws an error, then the catch block will catch the error.

e has the error object thrown.

We can get the name with e.name and the message with e.message .

We can add a finally clause to run code regardless of whether an error is thrown.

For instance, we can write:

try {
  foo();
} catch (e) {
  //...
} finally {
  console.log('finally');
}

ES6 Iterators and Generators

Iterators and generators are new constructs with ES6.

They let us create various types of iterable objects and use them.

For…of Loop

The for…of loop lets us iterate through any kind of iterable objects.

For instance, we can loop through an array with it by writing:

const iter = [1, 2];
for (const i of iter) {
  console.log(i);
}

Then we get:

1
2

We used const in the loop heading so that we can’t reassign the loop variable i to something else.

We can do the same thing for other iterable objects like strings:

for (const i of 'foo') {
  console.log(i);
}

then we get the individual characters as the values of i .

The for…of loop is used for iteration.

Iterators and Iterables

Iterators are objects that expose the next to get the next entry of a collection.

We can create an iterator with a generator function.

For instance, we can write:

function* genFunc() {
  yield 1;
  yield 2;
  yield 3;
}

yield returns the next item we want to return in the iterator by calling next.

Once we called next , then the generator function will be paused.

We can use it by writing:

const gen = genFunc();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

Then we get:

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}

We get each item that’s yielded with each next call.

The value has the yielded value, and done tells us whether the generator is done generating values.

An iterable is an object that defines its iteration behavior.

They can used with the for…of loops for iteration.

Built-in iterables include arrays and strings.

All iterable objects have the @@itrerator method, which has the property with Symbol.iterator as the key.

It must return an iterator with the next method.

So the simplest way is to use generators so that we can call next and return the values.

We can create an iterable by writing:

const obj = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
}

Then we can use the for…of loop by writing:

for (const i of obj) {
  console.log(i);
}

Then we get:

1
2
3

logged.

Conclusion

ES6 iterable objects like arrays and strings use iterators to return the values that it has.

They can also be iterated through with a for…of loop.

Error objects can be thrown by any code and we can catch them with try-catch-finally.