Modules vs Classes in Javascript

Question

I’m starting to work with Javascript Classes. But I see that some people use and recommend the construction of a project separated by modules. As I still have no experience working in these formats, I would like to know:

What are the advantages of working using modules and not classes in Javascript?

Some of the ways is better or it’s just a question of the programmer’s choice?

Answer 1

Before ES6 introduced class syntax 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 rather than classes.

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

Nowadays it is possible to use the syntax of class in ES6, if the platform you are using does not support you, you can use projects that transpose your code like Babel, to support this new Javascript feature. Behind the scenes a class will create something similar to modules Pattern to give you similar features 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 better give the resources you want to use for the project.

Answer 2

Modules and Classes are different concepts that are not necessarily alternative. In other words, to use Classes does not mean that "so you don’t use modules" and vice versa.

What is a module?

It is possible through development tools and/or in Node.js environment (Javascript server version) to create modules. Each module is a different file where all declared variables are restricted to the scope of that module. That is, nothing is automatically exported to the global space.

This is very useful for creating watertight components that can easily be 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 widely used), or export in Javascript of the future that through said tools like Webpack, Babel, Browserify allow today to use this syntax.

When classes are used 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 modules and classes have in common. Otherwise it is very common to have classes declared within modules, one or more.

An example of an 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 imports classes from other modules. The line import React, { Component } from 'react'; imports exactly two different classes of the same module. That is, this module react is an object in which many of its properties are Classes that can be imported to other modules.