JavaScript cheat sheet

// A comment starts with two slashes.
console.log('Good morning!');
console.log("Two kinds of quotes work");

• console.log writes a line to the console.
• A string is text in quotes.
• Names are case-sensitive: console and Console are different names.
• A semicolon ; ends an instruction.

const city = 'Lisbon'; // does not change
let score = 10;        // can change
score = 12;

A new value for a const name stops the program with an error.

Template strings

const name = 'Sam';
console.log(`Hello, ${name}!`); // Hello, Sam!
console.log(`Sum: ${2 + 3}`);   // Sum: 5

A template string uses backticks. ${ } puts a value into the text.

Operator	What it does	Example	Result
+	add	7 + 2	9
-	subtract	7 - 2	5
*	multiply	7 * 2	14
/	divide	7 / 2	3.5
%	remainder	7 % 2	1
**	power	7 ** 2	49

* and / come before + and -. Parentheses change the order: (1 + 2) * 3 is 9.

Code	Result
Math.round(4.6)	5
Math.floor(4.6)	4
Math.ceil(4.2)	5
Math.max(3, 9, 5)	9

Positions start at 0. A method gives a new string. It does not change the old one.

Code	Result
'hello'.length	5
'hello'[0]	'h'
'hello'.toUpperCase()	'HELLO'
'HELLO'.toLowerCase()	'hello'
' hi '.trim()	'hi'
'hello'.slice(1, 3)	'el'
'hello'.indexOf('l')	2
'hello'.includes('ell')	true
'a-b-c'.split('-')	['a', 'b', 'c']
'ha'.repeat(3)	'hahaha'
'Hi, ' + 'Sam'	'Hi, Sam'

if (score >= 90) {
  console.log('Great');
} else if (score >= 50) {
  console.log('Pass');
} else {
  console.log('Try again');
}

JavaScript runs the first block whose condition is true.

Operator	Meaning
===	is equal to
!==	is not equal to
> <	greater than, less than
>= <=	greater or equal, less or equal
a && b	and: true when the two sides are true
a || b	or: true when one side or the two sides are true
!a	not: true becomes false, false becomes true

One = stores a value. Three === compare two values.

// start; condition; step
for (let i = 1; i <= 3; i++) {
  console.log(i); // 1, 2, 3
}

let n = 3;
while (n > 0) {
  console.log(n); // 3, 2, 1
  n--; // without this line, the loop never ends
}

A running total

let total = 0;
for (let i = 1; i <= 3; i++) {
  total += i; // the same as total = total + i
}
console.log(total); // 6

i++ adds 1. i-- subtracts 1. i += 2 adds 2.

const colors = ['red', 'green', 'blue'];
console.log(colors[0]);      // red
console.log(colors.length);  // 3

// The last item is at length - 1.
console.log(colors[colors.length - 1]); // blue

// Each item, in order
for (const color of colors) {
  console.log(color);
}

Code	What it does
colors.push('pink')	adds an item to the end
colors.pop()	removes the last item and gives it back
colors.includes('red')	true when the item is in the array
colors.indexOf('blue')	the index of the item, or -1
colors.join(', ')	one string from all items
colors.reverse()	reverses the order in the array

A const array can change. const only keeps the name on the same array.

// a and b are parameters.
function add(a, b) {
  return a + b;
}

// 2 and 3 are arguments.
console.log(add(2, 3)); // 5

return gives a value back to the code that called the function, and it stops the function.

Arrow functions

// One expression: no braces and no return
const double = (n) => n * 2;

const isEven = (n) => {
  return n % 2 === 0;
};

console.log shows a value to a person. return gives a value to the program. Use return when other code needs the result.

const pet = { name: 'Biscuit', age: 4 };

console.log(pet.name);   // Biscuit
console.log(pet['age']); // 4
pet.age = 5;             // change a property
pet.color = 'brown';     // add a property

console.log(Object.keys(pet));
// [ 'name', 'age', 'color' ]
console.log('name' in pet); // true

Use the brackets when the name of the key is in a variable.

A list of objects

const pets = [
  { name: 'Biscuit', age: 4 },
  { name: 'Pepper', age: 2 },
];

for (const pet of pets) {
  console.log(`${pet.name} is ${pet.age}`);
}