# Strange access to data class

**URL:** <https://discourse.processing.org/t/strange-access-to-data-class/40063>\
**Category:** Beginners\
**Created:** [December 8, 2022, 11:22am UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063 "2022-12-08T11:22:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gaspard](https://avatars.discourse-cdn.com/v4/letter/g/ee7513/32.png) [@gaspard](https://discourse.processing.org/u/gaspard)\
**Post date:** [December 8, 2022, 11:22am UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063/1 "2022-12-08T11:22:26Z")

</div>

Hi,  
I’ve noticed a strange behavior through the setup() et draw() method in a classical p5.js sketch.

here is a brief example :

file **classTest.js** :

class classTest{  
constructor(c1, c2, c3){  
this.groupe = [c1, c2, c3];  
}

permute(){  
this.groupe.unshift(this.groupe.pop());  
}

}

file **sketch.js** :

let myTest = new classTest(1,2,3);  
function setup() {  
createCanvas(400, 400, WEBGL);

console.log(myTest.groupe);  
myTest.permute();  
console.log(myTest.groupe);  
}

the console output should be :

> [1,2,3]  
> [3,1,2]

but in my case it is :

> [3,1,2]  
> [3,1,2]

the first output is already altered by the method permute() but it shouldn’t be and I don’t know why.  
Notice that the right output occurs when using javascript not with p5.js i.e :

```
<meta charset="utf-8" />

```

```
<script>

```

class classTest{  
constructor(c1, c2, c3){  
this.groupe = [c1, c2, c3];  
}

permute(){  
this.groupe.unshift(this.groupe.pop());  
}

}

let myTest = new classTest(1,2,3);

console.log(myTest.groupe);  
myTest.permute();  
console.log(myTest.groupe);

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 8, 2022, 11:56am UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063/2 "2022-12-08T11:56:26Z")

</div>

> [@gaspard](#):
>
> function setup() {  
> createCanvas(400, 400, WEBGL);
> 
> console.log(myTest.groupe);  
> myTest.permute();  
> console.log(myTest.groupe);  
> }

Instead

```auto
function setup() {
    createCanvas(400, 400, WEBGL);

    console.log(myTest.groupe);

}

```

What happens now???

---

<div class="post-metadata">

**Author:** ![gaspard](https://avatars.discourse-cdn.com/v4/letter/g/ee7513/32.png) [@gaspard](https://discourse.processing.org/u/gaspard)\
**Post date:** [December 8, 2022, 12:06pm UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063/3 "2022-12-08T12:06:49Z")

</div>

I would like to have the **both** output in the console, before the permute() method and after.

```auto
let myTest = new classTest(1,2,3);
function setup() {
createCanvas(400, 400, WEBGL);

console.log(myTest.groupe); // should print [1,2,3] -> values get from constructor class. it doesn't
myTest.permute();
console.log(myTest.groupe); // should print [3,1,2] and it does
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 8, 2022, 12:11pm UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063/4 "2022-12-08T12:11:35Z")

</div>

Understood

Just as a test

What does my example give you in the console?

You can just comment the lines out.

---

<div class="post-metadata">

**Author:** ![gaspard](https://avatars.discourse-cdn.com/v4/letter/g/ee7513/32.png) [@gaspard](https://discourse.processing.org/u/gaspard)\
**Post date:** [December 8, 2022, 12:19pm UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063/5 "2022-12-08T12:19:09Z")

</div>

Right, I didn’t mentionned that

alone, the first outup work well and reply [1,2,3] but the same line when followed by the method call and an second output doesn’t work as expected.

By the way, at the end of the code, the values are correct but I don’t understand the behavior and it might be usefful to when debbuging.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 8, 2022, 12:32pm UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063/6 "2022-12-08T12:32:28Z")

</div>

> [@gaspard](#):
>
> , the values are correct but I don’t understand the behavior…

Both outputs in my browser got the expected values: `[1, 2, 3]` & `[3, 1, 2]`.

But b/c you’re printing an array, if a browser by chance delays the actual printing to the console, it’s possible that you’ll see the array’s most current values for all outputs.

As a workaround you can extract the arrays values when printing it using the spread `...` syntax:  
`console.log(...myTest.groupe);`

> **[Spread syntax (...) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)**
>
> The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the...

---

<div class="post-metadata">

**Author:** ![gaspard](https://avatars.discourse-cdn.com/v4/letter/g/ee7513/32.png) [@gaspard](https://discourse.processing.org/u/gaspard)\
**Post date:** [December 8, 2022, 12:48pm UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063/7 "2022-12-08T12:48:09Z")

</div>

It appears that false output occurs only in the p5js editor. If I run the same code by simply editing files and opening the index.html directly with my browser it work perfecly well !

so, is this a fail in the p5js editor ? and by the way the problem seems to be fixed ?