Default export new instance of class

Question

Will the snippets below produce new instance every time it's imported?

// 1st implementation

class ConnectionManager {
...
}

export default new ConnectionManager();

// 2nd implementation

class ConnectionManager {
...
}

const connectionManager = new ConnectionManager();
export default connectionManager;

If yes, how can I get the same instance in every import?

Answer 1

ES6 modules follow single instance pattern. That is, the instance is created when the module is loaded.

Here is an article about it.

// File: yolo.js

class Yolo {}
export let yolo = new Yolo();

// File: laser.js

import { yolo } from "./yolo.js";
// yolo is a single instance of Yolo class


// File: cat.js

import { yolo } from "./yolo.js";
// same yolo as in laster.js

Answer 2

It should be the same.

The following example uses both the implementations, imports them into 2 different files, and imports them all into single index file. Everytime an instance is created, we generate a random value for the class, and log its creation.

// ConnectionManagerImpl1.ts
class ConnectionManagerImpl1 {
    public value;

    constructor() {
        this.value = Math.random().toString(36).substring(7);
        console.log(`New ConnectionManagerImpl1 instance created: ${this.value}`)
    }
}

export default new ConnectionManagerImpl1();

---

// ConnectionManagerImpl2.ts
class ConnectionManagerImpl2 {
    public value;

    constructor() {
        this.value = Math.random().toString(36).substring(7);
        console.log(`New ConnectionManagerImpl2 instance created: ${this.value}`)
    }
}

const connectionManagerImpl2 = new ConnectionManagerImpl2();
export default connectionManagerImpl2;

---

// import1.ts
import connectionManagerImpl1 from './ConnectionManagerImpl1';
import connectionManagerImpl2 from './ConnectionManagerImpl2';

export { connectionManagerImpl1, connectionManagerImpl2 };

---

// import2.ts
import connectionManagerImpl1 from './ConnectionManagerImpl1';
import connectionManagerImpl2 from './ConnectionManagerImpl2';

export { connectionManagerImpl1, connectionManagerImpl2 };

---

// index.ts
import * as import1 from './import1';
import * as import2 from './import2';

console.log(import1)
console.log(import2)
console.log("Done")

Ran the above setup using tsc --module 'commonjs' * && node index.js

Output:

New ConnectionManagerImpl1 instance created: ddt3re
New ConnectionManagerImpl2 instance created: uv5z6
{ connectionManagerImpl1: ConnectionManagerImpl1 { value: 'ddt3re' },
  connectionManagerImpl2: ConnectionManagerImpl2 { value: 'uv5z6' } }
{ connectionManagerImpl1: ConnectionManagerImpl1 { value: 'ddt3re' },
  connectionManagerImpl2: ConnectionManagerImpl2 { value: 'uv5z6' } }
Done

As you can see, only 1 instance of ConnectionManagerImpl1 and ConnectionManagerImpl2 were created. So, both the implementation should create only 1 instance.

Answer 3

The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.

There are two different types of export, named and default. You can have multiple named exports per module but only one default export.

export default class ConnectionManager { .. }

Or

class ConnectionManager {
   ...
}
export default connectionManager;