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.