Modules vs Classes in JavaScript

Modules and Classes are different concepts that are not necessarily alternative. In other words, using Classes does not mean that "then you do not use modules" and vice versa.

What is a module?

It is possible through development tools and / or Node.js (JavaScript server version) to create modules. Each module is a different file where all declared variables are restricted to the scope of this module. In other words, nothing is automatically exported to the global space.

This is very useful for creating watertight components that can be easily modified, used in other projects and easy to read / understand what they do.

The only port of contact with the rest of the application is via module.exports in Node.js (native and heavily used), or export in future JavaScript that through such tools as Webpack, Babel, Browserify allow already today use this syntax.

When using classes one of the advantages is also to reduce the number of variables that are exported to the global scope. This good idea is perhaps the only thing in which modules and classes have in common. For the rest it is very common to have classes declared within modules, one or more.

An example of a React.js application:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

This module exports a Class. And it imports classes from other modules. The import React, { Component } from 'react'; line imports exactly two different classes of the same module. In other words, this module react is an object in which many of its properties are Classes that can be imported into other modules.

Before ES6 introduced the syntax for classes in JavaScript, there was a great discussion of what would be the best way to simulate this behavior of object-oriented languages in JavaScript which is a language that despite having objects, uses prototyping and non-classes .

Modules pattern which is probably what you are comparing to classes, is a way to start a scope, so you can have only accessible variables within this scope and access them by your instance methods.

Nowadays it is possible to use the class syntax in ES6, if the platform you are using does not support you, you can use projects that transpilate your code like Babel to support this new JavaScript feature . Underneath the wrappers, class will create something similar to the modules pattern to give you features similar to lingaugens that do not use prototypes.

Knowing this, it is the choice of the developer to choose what will be compatible with the project, or rather will give the resources that one wants to use for that.