Setup

  • Join Discord Server
  • Login to https://classroom.codeable.la/
  • Install tools:
    • Google Chrome
    • Visual Studio Code

JavaScript

Fundamentals

Data Types

  • number
  • string
  • boolean
  • null
  • undefined
  • object / function

 

bigint

symbol

Variables

  • const, let, var
  • naming conventions
  • reserve words

Operators

  • Math
    • +, -, *, /, %, **
  • String concatenation
  • Increment/decrement
  • String interpolation

Comparisons

  • >, >=, <, <=
  • ==, ===, !=, !==

Logical operators

  • AND (&&)
  • OR (||)
  • NOT (!)

Logical operators

A B A && B A || B !A
true true true true false
true false false true false
false true false true true
false false false false true

Truth table

Control Flow

if (condition) {
	// execute if condition is true
}
if (condition) {
	// execute if condition is true
} else {
	// execute if condition is false
}
if (condition1) {
	// execute if condition is true
} else if (condition2) {
	// execute if condition2 is true
} else {
  // execute if condition1 and condition 2 are false
}

Loops

while (condition) {
  // execute while condition is true (truthy)
}

"while" loop

do {
  // execute once and while condition is true (truthy)
} while (condition)

"do-while" loop

Loops

for (begin; condition; step) {
  // execute while condition is true (truthy)
}

for (let i = 0; i < 10; i++) {
  console.log(i) // prints from 0 to 9 on the console
}

"for" loop

Loops

let number = 0;

while (true) {
  if (number > 10) break;
  number++;
}

"break" a loop

for (let i = 0; i <= 10; i++) {
  if (i % 2 === 1) continue;
  console.log(i);
}

"continue" to the next iteration

Arrays

// New Array
const colors = ["red", "blue", "green"];

// Acces elements
colors[0] // "red"
colors[2] // "green"

// Replace an element
colors[0] = "yellow"
colors // ["yellow", "blue", "green"];

// Array size
colors.length // 3

// Add elements at the end
colors.push("black") // ["yellow", "blue", "green", "black"];

// Remove the last element
colors.pop() // ["yellow", "blue", "green"];

Objects

// create empty object
const object1 = {};

// create object with values
const object2 = { key1: "value1", key2: "value2", key3: "value3" };

// access values
object2.key1; // "value1"
object2["key2"]; // "value2"

// create or modify values
object2.key1 = "new value1";
object2.key4 = "value4"

// access value with a variable key
let myKey = "key2";
object2[myKey]; // value2

myKey = "key3";
object2[myKey]; // value3

Objects

const pokemon = {
  id: 25,
  name: "Pikachu",
  height: 0.4,
  weight: 6.0,
  type: ["electric"],
  baseExperience: 112,
}

Iterate Objects

for in loop

const pokemon = {
  id: 25,
  name: "Pikachu",
  height: 0.4,
  weight: 6.0,
  type: ["electric"],
  baseExperience: 112,
}

for (let property in pokemon) {
  console.log(property);
}

Methods

const pokemon = {
  id: 25,
  name: "Pikachu",
  height: 0.4,
  weight: 6.0,
  type: ["electric"],
  baseExperience: 112,
  run() {
    console.log("Pikachu is running")
  },
  speak() {
    console.log("Pikachu!!!!")
  }
}

deck

By Codeable