# Correct way to use ES6 modules and import classes
**URL:** https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386
**Category:** Coding Questions
**Created:** [May 28, 2020, 10:54pm UTC](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386 "2020-05-28T22:54:08Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [May 28, 2020, 10:54pm UTC](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386/1 "2020-05-28T22:54:08Z")
Hi,
I am making a project in p5.js where I have a simple class called `Stone` that I want to import into another file using ES6 modules. So I used `export default` :
```auto
// js/src/Stone.js
export default class Stone {
constructor(x, y, is_white) {
this.x = x;
this.y = y;
this.is_white = is_white;
}
}
```
And I have a main file called `main.js` which is included in the HTML as a module like this :
```auto
// index.html
```
And I import my previous class :
```auto
// js/main.js
import Stone from './src/Stone.js';
```
Now, the problem is that p5 doesn’t recognize the functions `draw()` and `setup()` because they are in a different module not in the global namespace.
I found this video explaining that :
[ ](https://www.youtube.com/watch?v=P0bkwncSJag)
But I wanted to know if there was a better solution to achieve this than doing (and passing a reference of p5 to any of the class functions that uses p5 functions or variables):
```auto
new p5(function(p5){
p5.setup(){
//...
}
p5.draw(){
//...
}
});
```
Any suggestions are welcome ! 🙂
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 28, 2020, 11:12pm UTC](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386/2 "2020-05-28T23:12:01Z")
> [@josephh](#):
>
> … because they are in a different module not in the global namespace.
> [@How to access p5js functions when using ES6 modules](https://discourse.processing.org/t/how-to-access-p5js-functions-when-using-es6-modules/21359/2):
>
> That “p5.voronoi” library is meant for sketches using the “global mode” approach only: It means at the very least your main “sketch.js” file gotta use the “global mode” approach as well. If p5.js is loaded via \, it dumps itself on the global namespace & thus it can be accessed even by ES6 module files, as long as it finds setup() and/or draw() on the global namespace as well, like this: window.setup = function () {} Here’s a p5.js global mode sketch example using ES6 module files…
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [May 28, 2020, 11:28pm UTC](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386/3 "2020-05-28T23:28:10Z")
Thanks a lot @GoToLoop, I should have checked before on the forum 🤗
I am now able to use p5 global functions in my classes without passing an instance of p5 in the constructor which is great compared to Java 👍
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 28, 2020, 11:47pm UTC](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386/4 "2020-05-28T23:47:07Z")
> [@josephh](#):
>
> ```auto
> // js/src/Stone.js
>
> export default class Stone {
> constructor(x, y, is_white) {
> this.x = x;
> this.y = y;
> this.is_white = is_white;
> }
> }
>
> ```
If you want your “p5.js”-depended classes to work for both global & instance mode sketches, you’re gonna need to require the sketch’s p5 reference on their constructor: 👷♂️
```auto
export default class Stone {
constructor(x, y, is_white, p) {
this.x = x;
this.y = y;
this.is_white = is_white;
this.p = p;
}
}
```
But to make global instance user’s lives easier, we can turn the p5 _p_ parameter optional by assigning the “secret” property p5._instance_ as its default value: 🕵️♂️
```auto
export default class Stone {
constructor(x, y, is_white, p = p5.instance) {
this.x = x;
this.y = y;
this.is_white = is_white;
this.p = p;
}
}
```
Take a look at class Ball’s **construtor()** from file “ball.mjs” as an example of it: 👓
https://glitch.com/embed/#!/embed/matter-js-bouncing-colorful-balls?path=classes/ball.mjs&previewSize=0&sidebarCollapsed=true
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [May 29, 2020, 8:34am UTC](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386/5 "2020-05-29T08:34:18Z")
All right thanks for the example.
I noticed that in JavaScript, we must use the keyword `this` to refer an attribute inside a class that’s why you say (in your example) :
```auto
const { p, c } = this;
```
but it’s not efficient at all isn’t it? It means that at each method call, you are going to create a variable.
In the same time, saying :
```auto
this.p.ellipse(...);
this.p.random();
this.p.fill();
// ...
```
is quite heavy when writing ☹