# I cannot declare and create an object in one line

**URL:** <https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879>\
**Category:** Beginners\
**Created:** [July 21, 2019, 9:36pm UTC](https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879 "2019-07-21T21:36:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![femke.blanco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/femke.blanco/32/3431_2.png) [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Post date:** [July 21, 2019, 9:36pm UTC](https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879/1 "2019-07-21T21:36:36Z")

</div>

I’ve come across two ways of defining classes in p5.js.

The first: [https://editor.p5js.org/femkeblanco/sketches/Vycw0YkNr](https://editor.p5js.org/femkeblanco/sketches/Vycw0YkNr)  
The second: [https://editor.p5js.org/femkeblanco/sketches/YXi8pCrRQ](https://editor.p5js.org/femkeblanco/sketches/YXi8pCrRQ)

I presume the second way, which I came across in the book “Getting Started with p5.js”, is legacy. Is that correct?

My main question is the following:

I cannot declare and create an object in one line at the top using the first way: [https://editor.p5js.org/femkeblanco/sketches/f7xH0mqRX](https://editor.p5js.org/femkeblanco/sketches/f7xH0mqRX)

I have to create the object in setup(): [https://editor.p5js.org/femkeblanco/sketches/Vycw0YkNr](https://editor.p5js.org/femkeblanco/sketches/Vycw0YkNr)

But I can declare and create an object in one line at the top using the second way: [https://editor.p5js.org/femkeblanco/sketches/YXi8pCrRQ](https://editor.p5js.org/femkeblanco/sketches/YXi8pCrRQ)

Why, why and why?

Your help is appreciated and thanks 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:** [July 22, 2019, 12:25am UTC](https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879/2 "2019-07-22T00:25:59Z")

</div>

> [@femke.blanco](#):
>
> Why, why and why?

JS got 6 keywords that can be used to declare variables:

1. `var` → [var - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
2. `function` → [function - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
3. `let` → [let - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
4. `const` → [const - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
5. `class` → [class - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)
6. `import` → [import - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)

Outta those 6 declaration keywords, the primeval 1s `var` & `function`, which existed since the very beginning of JS, got an exotic behavior called hoisting:

- [var - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting)
- [function - JavaScript | MDN](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function#Function_declaration_hoisting)

Variables declared via `var` or `function` already exist from the top, even when they’re declared much further down!

For a more detailed explanation about hoisting, go to the article’s link below:

> **[Unpacking hoisting](https://2ality-com.onrender.com/2019/05/unpacking-hoisting.html)**
>
> Quoting a recent tweet by ES6 spec author Allen Wirfs-Brock: Hoisting is old and confused terminology. Even prior to ES6: did it mean “moved to the top of the current scope” or did it mean “move from a nested block to the closest enclosing...

> [@femke.blanco](#):
>
> I cannot declare and create an object in one line at the top using the first way:

Given keyword `class` doesn’t hoist like `function` does, as a workaround, move the whole `class` to the top, before it’s used by anything else.