cart253-2018

Core / CART 253 / Fall 2018 / Pippin Barr

Variables and scope

---

In this module

• Where to declare variables in your program
• When to assign values to variables

---

Where to declare variables?

• Where we declare our variables matters
• For now we will focus on two places we can use:
  • At the top of the script outside all the functions
  • Or inside functions

---

var x;
var y;
var speed;
var circleSize = 50;

function setup() {
  createCanvas(500,500);
  x = width/2;
  y = height/2;
  speed = random(1,10);
  var circleColor = random(255);
  fill(circleColor);
}

function draw() {
  x += speed;
  ellipse(x,y,circleSize,circleSize);
}

---

At the top

• In the previous script we see there are three variables declared at the top of the script, which are x, y, and circleSize
• This is a standard place to put variables you’re going to use everywhere in your program
• Variables declared outside any function are called global variables because they can be used inside any function
• We needed to do this in part because both setup() and draw() use x and y
• But we also put circleSize up there because it’s something about the circle we want to remember and be able to change
• Note how much easier it is to change the circle’s size when it’s declared at the top!

---

Inside a function

• In the script we see that circleColor is declared inside setup()
• Variables declared inside a function can only be used inside that function
• If we try to use circleColor inside draw(), for example, it won’t exist!
• When you declare a variable inside a function you should imagine it popping out of existence when the program reaches the bottom of that function
• So after setup() finishes, circleColor is gone forever
• We do it this way because we only need to calculate circleColor right at the beginning, we don’t need it again in this program

---

Declared at the top, assigned later

• Notice how both x and y are declared at the top of the program with no value

• We wait to assign their values until setup() - why?

• Because it’s only in setup() that width and height actually have values (thanks to createCanvas() which specifies them)

• It’s common to declare variables at the top of the program but only assign values later on

???

• The same thing goes for speed - we wait until setup() to calculate its random value

---

Declaring variables without var

• Very unfortunately, JavaScript lets us declare variables without using var

function setup() {
  createCanvas(500,500);
  x = width/2;
  y = height/2;
  circleColor = random(255);
  fill(circleColor);
}

function draw() {
  x = x + 1;
  ellipse(x,y,50,50);
}

• That’s because if you don’t use var to create a new variable, JavaScript creates it as a global variable (like the ones declared at the top of the script)
• Don’t do this, it can lead to a lot of confusion

---

Fin.