# We have to claim variables in advance?

**URL:** <https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [April 17, 2021, 1:42am UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431 "2021-04-17T01:42:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![turtle](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@turtle](https://discourse.processing.org/u/turtle)\
**Post date:** [April 17, 2021, 1:42am UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/1 "2021-04-17T01:42:53Z")

</div>

Interestingly, if I claim variable like

```javascript
function setup() {
  createCanvas(100,100);
  let pg = createGraphics(100,100); // claim variable like this
}

function draw() {
  pg.background(100);
  image(pg, 0, 0);
}

```

when I call `pg.background(100)`, the error occurs “pg is not defined”.

But if I claim it in advance like

```javascript
let pg;

function setup() {
  createCanvas(100,100);
  pg = createGraphics(100,100); // claim variable like this
}

function draw() {
  pg.background(100);
  image(pg, 0, 0);
}

```

it works.

You know these two claim methods are both right in Javascript, but one fails in p5.js, why? after all javascript is the foundation of p5.js。

So we must claim variables in advance?

---

<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:** [April 17, 2021, 4:08am UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/2 "2021-04-17T04:08:08Z")

</div>

Variables declared inside a function are local to that function and cease to exist once that function returns; unless they also become closures. 🤓

Alternatively you can opt to turn a variable into a global property instead, via _window_ or _globalThis_: 🌐  
[developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/globalThis](http://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)  
`let pg = createGraphics(100, 100);` —\> `globalThis.pg = createGraphics(100, 100);`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 17, 2021, 10:32am UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/3 "2021-04-17T10:32:29Z")

</div>

Hello,

See:  
[Variable Scope](https://p5js.org/examples/data-variable-scope.html)

You are using the term “claim variables”; I am not familiar with this in this context.

I am familiar with “declare variables”.

`:)`

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 17, 2021, 11:17am UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/4 "2021-04-17T11:17:22Z")

</div>

also a funny thing is that this works too

```javascript

function setup() {
  createCanvas(100,100);
  pg = createGraphics(100,100); // claim variable like this
}

function draw() {
  pg.background(100);
  image(pg, 0, 0);
}

let pg;

```

as written above, it’s about the scope and not necessarily “in advance”.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [April 17, 2021, 3:49pm UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/5 "2021-04-17T15:49:58Z")

</div>

The code that @micuat posted [here](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/4) works because the `setup()` and `draw()` functions get defined, but do not actually get called, until after `pg` gets declared, because the statement that declares `pg` is in the outer scope, even though it is situated below the code that defines the functions.

We can display output to observe the order of execution, as follows:

```auto
function setup() {
  createCanvas(100,100);
  pg = createGraphics(100,100); // claim variable like this
  console.log("setup() was called.");
  noLoop();
}

function draw() {
  pg.background(100);
  image(pg, 0, 0);
  console.log("draw() was called.");
}

let pg = "I declare pg, and execute before setup() and draw() are called().";
console.log(pg);

```

Output:

```
I declare pg, and execute before setup() and draw() are called().
setup() was called.
draw() was called.

```

_EDITED on April 17, 2021 to revise the output statements slightly._

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 17, 2021, 5:46pm UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/6 "2021-04-17T17:46:23Z")

</div>

Also be careful because there’s the concept of hoisting in JavaScript :

> **[Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)**
>
> JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code.

> Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the _compile_ phase, but stay exactly where you typed them in your code.

And the example:

> JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined. For example:

```javascript
console.log(num); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage
var num; // Declaration
num = 6; // Initialization

```

It means you can reference a variable that is declared later in your code because its declaration is moved to the top of the program. The initialization itself is at the same place in your code 😉

In other languages, it gives you an error like variable xxx was not declared in this scope…

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [April 17, 2021, 6:59pm UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431/7 "2021-04-17T18:59:43Z")

</div>

The following experiment was performed with the Processing Development Environment and the Chrome browser.

So as to focus on the declaration, and leave the issue of assignment of a value to the variable out of the picture for now, let’s try this:

```auto
function sycamore() {
  console.log(tree);
}
let tree; // variable declared prior to function call
sycamore();

```

The JavaScript console displayed:

```
undefined

```

Now let’s do this:

```auto
function sycamore() {
  console.log(tree);
}

sycamore();
let tree; // variable declared after the function call

```

The JavaScript console displayed:

```
Uncaught ReferenceError: Cannot access 'tree' before initialization
at sycamore (p5js-temp-p5js_2021_04_17a5267812242042862675.js:2)
at p5js-temp-p5js_2021_04_17a5267812242042862675.js:5

```

So, at least in the environment where this experiment was performed, it did matter where in the global scope the variable was declared.

_EDITED (April 17, 2021) to adjust the wording of the final paragraph._