# Questioning the function of "let" when declaring a variable

**URL:** <https://discourse.processing.org/t/questioning-the-function-of-let-when-declaring-a-variable/47083>\
**Category:** Beginners\
**Created:** [September 5, 2025, 1:22am UTC](https://discourse.processing.org/t/questioning-the-function-of-let-when-declaring-a-variable/47083 "2025-09-05T01:22:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mugudeli601](https://avatars.discourse-cdn.com/v4/letter/m/db5fbb/32.png) [@mugudeli601](https://discourse.processing.org/u/mugudeli601)\
**Post date:** [September 5, 2025, 1:22am UTC](https://discourse.processing.org/t/questioning-the-function-of-let-when-declaring-a-variable/47083/1 "2025-09-05T01:22:24Z")

</div>

Hello! I was following through this tutorial [Variables and Change](https://p5js.org/tutorials/variables-and-change/) and learned about “let” when declaring a variable. However, I didn’t have to declare the variable outside the draw() with “let” in order to define a variable with changed values every frame. Now I am confused what it means by a “custom variable”. If I declare a variable with let, does it mean I can also put in values with different datatypes?

---

<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:** [September 5, 2025, 1:42am UTC](https://discourse.processing.org/t/questioning-the-function-of-let-when-declaring-a-variable/47083/2 "2025-09-05T01:42:41Z")

</div>

By default, JS code run by a browser uses the “sloppy mode”, which doesn’t require a variable to be declared before using it:

> [@Let or nothing?](https://discourse.processing.org/t/let-or-nothing/46937/2):
>
> That behavior is nicknamed “sloppy mode”: In order to activate [“strict mode”](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode), place "use strict"; as the 1st non-comment statement in a JS file. We can also activate “strict mode” by loading a JS file as an [“ECMA script module (ESM)”](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type#module).

BtW, JS got various keyword commands which can be used to declare a variable:  
var, let, const, function, class, import.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [September 5, 2025, 12:52pm UTC](https://discourse.processing.org/t/questioning-the-function-of-let-when-declaring-a-variable/47083/3 "2025-09-05T12:52:06Z")

</div>

As you have discovered it is not necessary to declare variables with `let` before using them. As @GoToLoop pointed out you can change this by activating ‘strict mode’, so the question you might ask is why bother with strict mode or `let` declarations.

If you are learning JS then the answer is not obvious and many examples found on the web don’t bother, giving the impression it doesn’t matter, but there are reasons to do so. One of the most important is that it controls the ‘scope’ of the variable, the scope defines the parts of your code that can see and use the variable.

Your code runs inside a web browser which maintains its own variables, constants, functions etc. and these are visible to and usable by your entire code. JS provides the [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) property so you can access or modify (not recommended) the global state.

Since the global state is shared by all scripts running in the browser then it is important that your script does not try to share variables with other scripts. This means do not create global state variables in you code.

Try the following code

```javascript
var aaa = 1;
let bbb = 2;
ccc = 3;

console.log(aaa, bbb, ccc);
console.log('aaa', globalThis.hasOwnProperty('aaa'));
console.log('bbb', globalThis.hasOwnProperty('bbb'));
console.log('ccc', globalThis.hasOwnProperty('ccc')); 

```

and you will get the following results

```auto
1 2 3 
aaa true
bbb false
ccc true

```

Notice that only the variable declared with `let` did not hoist itself onto the global state 👍😁

For your information `let` came with ES6 and is generally used and is a better alternative to the older `var` declaration.

My answer just scratches the surface of the topic but it is generally considered good practice to declare variables before using them. There are other benefits but I think I have gone far enough to wet your appetite.

---

<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:** [September 5, 2025, 1:19pm UTC](https://discourse.processing.org/t/questioning-the-function-of-let-when-declaring-a-variable/47083/4 "2025-09-05T13:19:47Z")

</div>

> [@quark](#):
>
> ```auto
> console.log('aaa', globalThis.hasOwnProperty('aaa'));
> console.log('bbb', globalThis.hasOwnProperty('bbb'));
> console.log('ccc', globalThis.hasOwnProperty('ccc'));
> 
> ```

Shorter alternative syntax using operator `in`:

```js
console.log('aaa', 'aaa' in globalThis);
console.log('bbb', 'bbb' in globalThis);
console.log('ccc', 'ccc' in globalThis);

```

Notice though the operator `in` is less strict than method **hasOwnProperty()**; but for most cases, they’re interchangeable:

> **[in - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in)**
>
> The in operator returns true if the specified property is in the specified object or its prototype chain.

> **[Object.prototype.hasOwnProperty() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)**
>
> The hasOwnProperty() method of Object instances returns a boolean indicating whether this
> object has the specified property as its own property (as opposed to inheriting
> it).

---

<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:** [September 5, 2025, 1:25pm UTC](https://discourse.processing.org/t/questioning-the-function-of-let-when-declaring-a-variable/47083/5 "2025-09-05T13:25:58Z")

</div>

> [@quark](#):
>
> Notice that only the variable declared with `let` did not hoist itself onto the global state 👍😁

Out of the various JS keywords for declaring variables, only `var` & `function` also append themselves to the _globalThis_ if 1 doesn’t exist there yet.

Also, both `var` & `function` hoist themselves to the top of a file or function; and they’re function-scoped.

On the other hand, `let`, `const` and `class` don’t hoist the variable they declare; and are block-scoped.

**Warning** : if a script is run as an ECMA module, the whole file is in “strict mode”; and besides that, not even `var` & `function` can auto-append themselves to the _globalThis_!!!