Variables are used for storing values. In Javascript var and let are used for variable declaration. There is also a const, which is similar to let but defines a constant, which cannot be reassigned once it is declared. The difference between the variables is that var is function scoped and let/const is block scoped. This means that a variable declared with var is defined throughout the program, while let/cost is only accessible within a block. 

The name of the variable is case-sensitive and it must start with a letter, but it may contain numbers within the name.

...

// variable Declaration 
var x1 = 15; // an integer i.e a whole number 
var valF = 0.323; // a floating point number i.e a numbers with a decimal point
let bFlag = false; // a true or false value i.e a single bit value
const threshold = 5; // a collection of characters 
let character = 'g'; // a single character. Note the different quotation marks
 

console.log(x1);
print('The value of valF is ' + valF);
console.log(typeof bFlag);
print('The value of threshold is ' + threshold);
console.log(typeof character);

Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:

let foo = 42;    // foo is now a number
foo = 'bar'; // foo is now a string
foo = true;  // foo is now a boolean

...

Example

Almost the same as the first introductory exercise, but now with variables.

//global variables
var length1 = 150;
var length2 = 200;
 
function setup(){
	createCanvas(300,300);// define window size 
	stroke(255,255,255);// define line colour
}

function draw() {
	let strokeWeight = 5 //define a local variable accessible only within the block
	background(0); // define background colour
	line(100,10,100,length1); // draw a line 
	line(150,10,150,length2);
	line(200,10,200,250);
	fill(0,0,0); // fill colour
	strokeWeight(strokeWeight); // line thickness 
	ellipse(100,length1,50,50); // draw an ellipse
	ellipse(150,length2,50,50); // draw an ellipse
	noFill(); // turn off fill
	ellipse(200,250,50,50); // draw an ellipse
}

Example: Mouse Interaction

Some functions within p5.js are predefined and enable a fast graphical interaction e.g. mouseX and mouseY, which contain the current horizontal and vertical position of the mouse, relative to (0, 0) of the canvas.

var length1 = 0;
var length2 = 0;

function setup() {
  createCanvas(300, 300); // define window size
  background(0); // define background colour
  stroke(255, 255, 255); // define line colour
}
function draw() {
  background(0);
  length1 = mouseX;
  length2 = mouseY;
  line(100, 10, 100, length1); // draw a line
  line(150, 10, 150, length2);
  line(200, 10, 200, 250);

  fill(0, 0, 0); // fill colour
  strokeWeight(5); // line thickness
  ellipse(100, length1, 50, 50); // draw an ellipse
  ellipse(150, length2, 50, 50); // draw an ellipse
  noFill(); // turn off fill
  ellipse(200, 250, 50, 50); // draw an ellipse
}

Exercise :

Make a copy of an early exercise and modify it to include variables and mouse movement

Javascript Data Types 

JavaScript’s data types are as follows:

...

Boolean are either true or false values, represented by a single bit in memory, either a 1 for true or a 0 for false in binary.

Null’s value in JavaScript is an Object, but it is not an actual object that can have properties added to it. It is a reference to a variable that is defined in memory but has no value.

Undefined, unlike Null, means that the variable is not known to exist. This can be represented by a variable that is declared but never given a value.

Numbers in JavaScript are unlike many programming languages that define numbers by type (integers, floating-point, short, long, etc.) Instead they are defined as 64-bit double-precision floating numbers, where the value itself is stored in bits 0 to 51, the exponent in bits 51 to 62, and the sign in bit 63. JavaScript also has a reserved keyword NaN which indicates that a number is a not a legal number, but is itself of type Number.

Strings represent a series of characters and can consist of multiple characters or single characters.

Symbols are a primitive data type i.e. tokens which that serve as unique id’s.

Objects are mutable , and are not stored as continuous buffers, but instead are represented by a variety of data structurestructures.

Operators 

An operator is a symbol that tells the computer to perform a particular math or logic operation. Some of the most common operators are:

...

var x1 = 10;

x1++; // increment value by one 
x1--; // decrement value by one
 
x1 += 2; // Add assign, this is the same as writing x1 = x1+2; 
x1 -= 2; // Subtract assign, this is the same as writing x1 = x1-2; 
x1 /= 2; // Divide assign (less common), this is the same as writing x1 = x1/2; 

Exercise :

Expand and modify the examples with new or combined drawing commands (Arc, Point, Triangle, etc.). Look in the documentation for the respective function. Create variable X and variable Y that can be used to position your graphic on the screen. Try to play Play with var, let and const using console.log() and print() to see differences in their accessibility.

...