How can I export static function in ES6?

Question

Basic codes main.js:

class Something {
  static ThisIsStaticFunction () { ... }
}

export default Something;

Other file xxx.js:

import xxx;

// I want to call `ThisIsStaticFunction()` without having to
// write `Something.ThisIsStaticFunction()` how can I achieve this?

I want to call ThisIsStaticFunction() without having to write Something.ThisIsStaticFunction() how can I achieve this?

Assign `Something.thisIsStaticSomething` to a `window` property (or anything else for that matter) — Pointy, Nov 20 '17 at 00:04
@Pointy Please do not assign it to `window`, global variable is usually bad idea. — Bryan Chen, Nov 20 '17 at 00:07
@BryanChen right I wouldn't do it but the point is it's just a reference to an object. — Pointy, Nov 20 '17 at 00:21
[Don't ever make a `class` with only static methods, and don't export such an object!](https://stackoverflow.com/q/29893591/1048572) — Bergi, Nov 20 '17 at 01:16
The file itself is already a namespace, so generally static methods on classes don't come up often in JS. — loganfsmyth, Nov 20 '17 at 02:37
Hmmm, I am not convinced yet. What if I have two functions (let say, `SampleFunction()`) in two different files (Test1.js and Test2.js). How can I import the functions from Test1.js and Test2.js without having `Test1` and `Test2` as classes? — notalentgeek, Nov 20 '17 at 10:02

Bryan Chen · Accepted Answer · 2017-11-20T00:26:07.680

9

You can alias the static function as a normal function

export const ThisIsStaticFunction = Something.ThisIsStaticFunction;
export default Something;

import {ThisIsStaticFunction}, Something from 'xxx';

Usually in Javascript (unlike Java) you can use plain function over static function.

export function ThisIsAFunction() {}

export default class Something {
    instanceMethod() {
        const result = ThisIsAFunction();
    }
}

import {ThisIsAFunction}, Something from 'xxx';

const foo = ThisIsAFunction();
const bar = new Something()
const biz = bar.instanceMethod();

edited Nov 20 '17 at 00:26

answered Nov 20 '17 at 00:08

Bryan Chen

45,816
18
112
143

I choose your answer for now. What I am concerning is: If I have so many static functions to export, then I need to assign the values one-by-one which is very tedious. – notalentgeek Nov 20 '17 at 00:14
2

What are the reason for them to be static function? You are not writing Java – Bryan Chen Nov 20 '17 at 00:16
I have OOP background, and just learning ReactJS. And why there is `static` key if not to be used anyway? Additionally, I bet there is no different between exporting `static` and normal function. – notalentgeek Nov 20 '17 at 00:19
@notalentgeek there is a **huge** difference between exporting a static function vs. a "method" in a class. – Pointy Nov 20 '17 at 00:22
Can you please give me an example on how can I export `static` function and normal function? – notalentgeek Nov 20 '17 at 00:23
Most of the time a plain js function is equivalent to static function. A instance method is a different story – Bryan Chen Nov 20 '17 at 00:23

ramin · Answer 2 · 2023-06-17T09:53:18.243

If we call it in the constructor() of the same file, there is no need to call it in another file.

app.js:

class Something {
  constructor()
  {
     this.number = 0;
     this.ThisIsStaticFunction(); // answer: 0
     this.ThisIsStaticFunction(); // answer: 1
     this.ThisIsStaticFunction(); // answer: 2
  }
  ThisIsStaticFunction ()
  { 
     console.log(this.number++)
  }
}
export {Something};

loader.js:

import {Something} from "./app.js";
class loader
{
    constructor()
    {
        new Something;
    }
}
new loader();

index.html:

 <script type="module" src="./loader.js"></script>

How can I export static function in ES6?

2 Answers2