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

...

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 bit 63. JavaScript also has a reserved keyword NaN which indicates that a number is 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 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 structures.

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; 
x1 = 25 % 7; // Modulo Operator (less common), gives you the remainder of an integer division. This equation would give you a value of 4 (7 goes into 25 three times, with the value of 4 left over)   

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. Play with var, let and const using console.log() and print() to see differences in their accessibility. Use operators in cour code to create some simple animations.