Tutorial: Making interactive CPMs in the browser with Artistoo

Comments

//one-liner

/* 
A comment that spans
multiple lines.
*/

Declaring variables: const, var, let

In JavaScript, you have to declare a variable before you can give it a value:

let myVariable = "Hello World"

Once you have declared a variable using "let", you can always change it:

let myVariable = "Hello World"
myVariable = "Something else"

If you are sure your variable will not change, you can use "const" instead to avoid surprises:

const myVariable = "Hello World"

// the following will not work
myVariable = "Something else"

In older code you may encounter variable declarations with "var". This is still supported but "let" or "const" are preferred; see this page to learn more about the differences.

Arrays

You can make an array like so:

// numbers
let arr = [1,2,3]

// or something else, like strings
let str_arr = ["hello", "world"]

And access its elements by index (0-based):

let arr = [1,2,3]

arr[1]
//returns 2

Add an element to an existing array:

let arr = [1,2,3]

arr.push(4)
//now [1,2,3,4]

Remove first or last element:

let arr = [1,2,3]

arr.shift()
//now [2,3]

arr2 = [1,2,3]
arr2.pop()
//now [1,2]

Apply a function to every element in an array

let arr = [1,2,3]

add1 = function( x ){ return x + 1 }

arr.map( add1 )
// returns [2,3,4]

If you assign an existing array to a new variable, note that this will not truly copy the array but only create a pointer, such that both variables point to the same array. This can cause unexpected behavior if you are not aware of this:

let arr = [1,2,3]
let arr2 = arr

arr2.push(4)

arr
// arr has now also been modified and returns [1,2,3,4]

Objects

Instead of arrays, if you quickly want to look up a specific element or check whether it is there, it can be convenient to use objects:

// empty object
let empty = {}

// object with key-value pairs
let obj = {
	name : "Jane Doe",
	age : 10,
	favorite-fruits : [ "bananas", "apples" ]
}

Access elements by key:

let obj = {
	name : "Jane Doe",
	age : 10,
	favorite-fruits : [ "bananas", "apples" ]
}
obj["name"]
//returns "Jane Doe"

Add or remove an element:

let obj = {}

obj["newKey"] = "some value"

obj["secondKey"] = 2

delete obj["newKey"]

List all keys:

// object with key-value pairs
let obj = {
	name : "Jane Doe",
	age : 10,
	favorite-fruits : [ "bananas", "apples" ]
}

Object.keys( obj )
// ["name","age","favorite-fruits"]

Check if key exists:

// object with key-value pairs
let obj = {
	name : "Jane Doe",
	age : 10,
	favorite-fruits : [ "bananas", "apples" ]
}

obj.hasOwnProperty( "age") // true
obj.hasOwnProperty( "favorite-color" ) // false

Note that the same note on pointers applies here as for arrays.

Loops, functions, if-else

Some examples that speak for themselves:

// a loop
for( let i = 0; i < 5; i++ ){
	console.log(i)
}

// a function
function myFunction( arg1, arg2 ){
	const answer = arg1 + arg2
	return answer
}

// if-statement one-liner
if( true ) console.log( "Hello World!")

// more lines or with an else
const a = 1
const b = 1
if( a == b ){
	console.log( "a and b are equal: " + a )
} else {
	console.log( "a and b are different!" )
}

Looping over arrays:

// option 1
const arr = [ "Apples", "Pears", "Bananas" ]
for( let i = 0; i < arr.length; i++ ){
	console.log( arr[i] )
}

// shorthand
for( let i in arr ){
	console.log( arr[i] )
}

// even shorter hand
for( let el of arr ){
	console.log( el )
}

Looping over objects:

// option 1
const obj = { apples: 0, pears: 5, bananas : 1 }
for( let i = 0; i < Object.keys( obj ).length; i++ ){
	const key = Object.keys( obj )[i]
	console.log( obj[key] )
}

// shorthand
for( let i in arr ){
	console.log( i, obj[i] )
}

// this does not work
for( let el of obj ){
	console.log( el )
}