Best of Modern JavaScript — Catches 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 appeared first on The Web Dev.