Best of Modern JavaScript — Catches for Classes and Module Basics
Tags: javascript, webdev
Published: 2020-07-31 01:32:16

---
title: Best of Modern JavaScript — Catches for Classes and Module Basics
published: true
date: 2020-07-25 19:39:16 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8acatches-for-classes-and-module-basics/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258acatches-for-classes-and-module-basics
---

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

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at how to define classes with JavaScript.

### Single Inheritance

We can only inherit from one class with the `extends` keyword.

However, we can generate a new class from existing classes and inherit from that.

This works since `extends` accepts an expression that returns a constructor.

### Classes Lock-In

If we want to instantiate a class, we’re forced to use the `new` keyword with ES6.

This means switching from a class to a factory function will mean we’ve to remove the `new` keyword from the existing code.

However, we can override what the constructor returns by return our own object with the `constructor` .

The module system and class syntax also make refactoring JavaScript code much easier than before.

### Classes can’t be called as a Function

Classes can’t be called as a function even though they’re functions underneath.

This keeps options open for the future to add ways to handle function calls with classes.

### Instantiate a Class Given an Array of Arguments

We can let our class constructor take an array of arguments with the rest syntax.

For instance, we can write:

```
class Foo {
  constructor(...args) {
    //...
  }
}

```

Then we can instantiate it by running:

```
new Foo(...args);

```

where `args` is an array of arguments.

We use the spread operator to spread the arguments into the `args` array as arguments.

We can then use them however we like.

Also, we can use the `Reflect.construct` method to create a class instance with an array of arguments.

For instance, we can write:

```
`const foo = Reflect.construct(Foo, ['foo', 'bar']);

```

We pass in our class or constructor as the first argument, and we pass in an array of arguments for the constructor as the 2nd argument.

### Modules

JavaScript doesn’t have a native module system until ES6.

However, there were many module systems implemented as libraries.

ES6 modules can ve accessed in the browser and Node.js.

In the browser, we add a script tag with the type attribute set to `module` to import a module.

Modules are in strict mode by default.

Top-level value os `this` is local to the module.

Modules are executed asynchronously.

The `import` keyword is also provided to import module items.

Programmatic imports are also available.

The `import` function returns a promise that resolves to an object with the module’s contents.

The file extension for modules is still `.js` .

This is different from old-style scripts.

Scripts are run synchronously unless specified otherwise.

And they default to non-strict mode.

However, they can be imported asynchronously.

Each module is a piece of code that’s run once it’s loaded.

In a module, there may be declarations of various kinds, like functions, classes, objects, etc.

A module can also import things from other modules.

They may be imported with a relative path like `'./foo/bar'` or an absolute path like `'/foo/bar'` .

Modules are singletons so all imports of a module are the same.

### Conclusion

Classes can’t be called as a function.

We can instantiate them with an array of arguments.

Modules are useful for dividing code into smaller chunks.

The post [Best of Modern JavaScript — Catches for Classes and Module Basics](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8acatches-for-classes-and-module-basics/) appeared first on [The Web Dev](https://thewebdev.info).