p5.js中setup内可省略变量声明？省略场景与弊端

Great question! This boils down to how JavaScript handles variable scoping, not just p5.js specifically—though p5's global mode can make this behavior more noticeable. Let's break this down step by step.

1. Why undeclared variables still work in p5.js #

When you assign a value to a variable without declaring it first (e.g., circleX = 200 instead of let circleX = 200), JavaScript automatically creates a global variable attached to the window object.

In p5.js's default global mode, functions like setup() and draw() run in the global scope. So any undeclared variable you assign in setup() becomes accessible everywhere else in your code—including draw(), other functions, or even the browser console. This is why your code keeps running without errors.

2. Scenarios where undeclared variables might be used (though not recommended) #

There are a few cases where you might encounter or accidentally use undeclared variables:

• Quick prototyping/testing: When you're throwing together a 5-minute sketch to test an idea, you might skip declarations to save time.
• Legacy code: Older JavaScript projects (pre-ES6) relied heavily on global variables, so you might see this in older p5.js examples.
• Accidental omission: It's easy to forget a let/const when you're focused on logic—this isn't intentional, but it still results in an undeclared global variable.

Important note: This behavior applies to all DOM elements, not just p5.js canvases. For example, if you write myBtn = document.getElementById('submit-btn') without declaring myBtn, it becomes a global variable just like your p5.js variables.

3. Major downsides of skipping variable declarations #

Undeclared variables might work in the short term, but they're a recipe for bugs and maintenance headaches:

• Global scope pollution: Every undeclared variable clogs up the global window object, increasing the chance of name collisions with other scripts (e.g., a library also using a variable named circleX would break your code).
• Harder debugging: It's tough to track where a global variable was first assigned—you'll spend extra time tracing its origin if something goes wrong.
• Strict mode errors: If you enable strict mode ('use strict'; at the top of your script), undeclared variables will throw a ReferenceError immediately, breaking your code.
• Unpredictable behavior: JavaScript's variable hoisting can make undeclared variables act in unexpected ways, especially if you reassign them later in your code.
• Poor readability: Other developers (or future you) won't know if a variable was meant to be global or if you just forgot to declare it.

Code Examples #

Undeclared variable example (works, but not recommended) #

function setup() {
  createCanvas(400, 400);
  // No declaration—automatically global
  circleX = 200;
  circleY = 200;
}

function draw() {
  background(220);
  // Can access global variables here
  circle(circleX, circleY, 50);
}

If you open your browser console and type window.circleX, you'll see it returns 200—proof it's a global variable.

Standard variable declaration example (recommended) #

Use let for variables that need to change, or const for variables that stay fixed. You can declare variables in the global scope (if shared across functions) or locally (if only used in one function):

// Global variables (shared between setup and draw)
let circleX;
let circleY;

function setup() {
  createCanvas(400, 400);
  circleX = 200;
  circleY = 200;
  
  // Local variable—only accessible inside setup()
  const canvasSize = width;
  console.log(`Canvas width: ${canvasSize}`);
}

function draw() {
  background(220);
  circle(circleX, circleY, 50);
}

Console example of undeclared vs declared variables #

• Undeclared in console: Type testVar = 123 and hit enter. Then run console.log(window.testVar)—it will return 123, since it's a global variable.
• Declared in console: Type let testVar = 456 and hit enter. Now console.log(window.testVar) returns undefined, because let scopes the variable to the console's local context instead of the global window.

Final Takeaway #

While undeclared variables work in p5.js (and JavaScript in general), they're a bad practice. Always use let or const to declare variables, and scope them appropriately (global only if necessary, local otherwise) to keep your code clean, maintainable, and bug-free.

内容的提问来源于stack exchange，提问作者Nikita Bogdanov