JavaScript Basics

Console and Comments

console.log('JavaScript is working');

// This is a single-line comment

/*
   This is a multi-line comment
*/

Data Types

console.log(42);
console.log('Hello');
console.log(true);
console.log(null);
console.log(undefined);

Operators, Properties and Methods

Arithmetic Operators

Properties and Methods

console.log('JavaScript'.length);
console.log('hello'.toUpperCase());
console.log(Math.floor(4.9));

Conditional Statements

For a full description of conditional statements and comparison operators, see W3Schools Operators Reference | W3Schools Comparison Operators Reference

let age = 18;

if (age >= 18) {
    console.log('Adult');
} else {
    console.log('Minor');
}

let result = age >= 18 ? 'Adult' : 'Minor';
console.log(result);

let day = 'Monday';

switch (day) {
    case 'Monday':
        console.log('Start of the week');
        break;
    case 'Friday':
        console.log('Nearly the weekend');
        break;
    default:
        console.log('A normal day');
        break;
}

Functions

Function Declaration

function greetWorld() {
    console.log('Hello, World!');
}

greetWorld();

Parameters and Arguments

function calculateArea(width, height) {
    return width * height;
}

console.log(calculateArea(5, 4));

Default Parameters

function greetUser(name = 'Guest') {
    return `Hello, ${name}!`;
}

console.log(greetUser());
console.log(greetUser('Alan'));

Function Expression

const calculateArea = function(width, height) {
    const area = width * height;
    return area;
};

Arrow Function

const calculateAreaArrow = (width, height) => {
    const area = width * height;
    return area;
};

Concise Arrow Function

const doubleNumber = number => number + number;

console.log(doubleNumber(5));

Short Hand

// Longhand (function expression)
const robot = {
  greet: function() {
    console.log('Hello');
  }
};

// Shorthand (cleaner)
const robot = {
  greet() {
    console.log('Hello');
  }
};

KEY:
Blue    = Function name
Orange  = Parameter / argument
                    

Scope

const city = 'London'; // Global variable

function showCity() {
    console.log(city);
}

showCity();

if (true) {
    let message = 'Inside the block';
    console.log(message);
}

// console.log(message); // This would cause an error

Variable shadowing — a local variable with the same name as a global one
hides the global inside that function. The global is not changed.

const greeting = 'Hello'; // global

function sendGreeting() {
    const greeting = 'Hi'; // local — shadows the global
    console.log(greeting); // 'Hi' — local takes priority
}

sendGreeting();           // 'Hi'
console.log(greeting);   // 'Hello' — global is unchanged

Watch out: if you expect to use the global but declared a local with the
same name, you will get the local value — not the global.
                    

Arrays

slice for portions:
array.slice(0, lastIndex) returns items up to but NOT including lastIndex

['a', 'b', 'c', 'd'].slice(0, 2)  →  ['a', 'b']
                    

const fruits = ['apple', 'banana', 'pear'];

console.log(fruits[0]);       // apple
console.log(fruits.length);   // 3

fruits[1] = 'grape';
fruits.push('orange');        // standalone array
this.values.push(inputValue); // inside a class method
fruits.pop();

const nested = [[1, 2], [3, 4]];
console.log(nested[1][0]);    // 3

arr.splice(start, deleteCount, newItem)

arr.join()     // default = comma
arr.join(' ')  // space (sentence)

For less common array methods, see MDN Array Reference or W3Schools Array Reference .

Strings

Strings share some behaviours with arrays and can be looped through and accessed by index.

const word = 'hello';

console.log(word[0]);       // h
console.log(word[1]);       // e
console.log(word.length);   // 5

// Loop through a string with a for loop
for (let i = 0; i < word.length; i++) {
    console.log(word[i]);
}

Loops

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

let i = 0;
while (i < 3) {
    i++;
}

do {
    i++;
} while (i < 5);

// break → exit loop early
for (let item of arr) {
    if (item === 'stop') {
        break;
    }
    console.log(item);
}

// continue → skip one iteration
for (let item of arr) {
    if (item === 'skip') {
        continue;
    }
    console.log(item);
}

For more loop details, see MDN Loops Guide .

Loop Debugging

// Check loop is running
console.log('loop started');

// Check counter value
console.log('i is ' + i);

// Check values inside loop
console.log(arr[i]);

Tip: Use console.log inside loops to track how many times they run and what values change.

Objects

// Create object
let spaceship = {
  'Fuel Type': 'Turbo Fuel',
  homePlanet: 'Earth',
  crew: {
    captain: { 
      name: 'Lily',
      degree: 'Computer Engineering'
    }
  }
};

// Access
let crewCount = spaceship.numCrew;
let isActive = spaceship['Active Mission'];

// Update / Add
spaceship.color = 'glorious gold';
spaceship.numEngines = 9;

// Delete
delete spaceship['Secret Mission'];

// Method
let alienShip = {
  takeOff() {
    console.log('Spim... Borp... Glix... Blastoff!');
  }
};

alienShip.takeOff();

// Pass by reference
let greenEnergy = obj => {
  obj['Fuel Type'] = 'avocado oil';
};

greenEnergy(spaceship);

// Loop through object (for...in)
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

// Array inside object
spaceship.passengers = [{ name: 'Alan' }];
console.log(spaceship.passengers[0].name);

// Array method from object
let planetArray = spaceship.flightPath;
console.log(planetArray.join('|'));

Array of Objects

const users = [
    { name: 'Alan' },
    { name: 'Debs' }
];

// Bridge → [0] gets into the object
// Key → .name gets the value
console.log(users[0].name);

Tip: [0] gets you into the object, then use .key to access data.

For more details, see MDN Object Reference or W3Schools Objects .

Advanced Objects

// this
const robot = {
  model: '1E78V2',
  energyLevel: 100,
  provideInfo() {
    return `I am ${this.model} and my current energy level is ${this.energyLevel}`;
  }
};

// Method shorthand vs longhand
const obj = {
  greet: function() {},
  sayHi() {}
};

// Getter / Setter
const machine = {
  _power: 10,

  get power() {
    return this._power;
  },

  set power(value) {
    if (value > 0) {
      this._power = value;
    }
  }
};

// Factory function
const robotFactory = (model, mobile) => {
  return {
    model,
    mobile,
    beep() {
      console.log('Beep Boop');
    }
  };
};

// Destructuring
const { model } = robot;

// for...in
for (let key in robot) {
  console.log(key);
  console.log(robot[key]);
}

// Built-in methods
Object.keys(robot);
Object.entries(robot);
Object.assign({}, robot);

Key Notes

• this → refers to the current object
• get → no parameters, used to read
• set → one parameter, used to update
• for...in → gives keys, use obj[key] for values
• Destructuring → variable name must match key
• Object.assign(target, source) → copies properties

Underscore properties

In  _name: name

_name  → the key (left of colon) — the stored property used internally by the getter and setter
name   → the value (right of colon) — the parameter passed in from outside

The underscore is a convention to signal: "don't access this directly, use the getter/setter."
                    

Setter validation examples

// Check it is a string
set name(value) {
    if (typeof value === 'string') {
        this._name = value;
    }
}

// Check it is a non-empty string
set name(value) {
    if (typeof value === 'string' && value.length > 0) {
        this._name = value;
    }
}

// No validation — set directly
set name(value) {
    this._name = value;
}
                    

Useful Links

MDN Objects | MDN this | MDN Destructuring | W3Schools Objects

Classes

Classes are templates for creating objects. They reduce duplicate code by defining shared properties and methods once. Class names use PascalCase.

Class Example

class Animal {
  constructor(name) {
    this._name = name;      // _ signals: use getter, don't access directly
    this._behavior = 0;     // fixed default — not a constructor parameter
  }

  get name() { return this._name; }
  get behavior() { return this._behavior; }

  incrementBehavior() { this._behavior++; }  // no comma after methods

  static generateName() {
    const names = ['Angel', 'Spike', 'Buffy'];
    return names[Math.floor(Math.random() * names.length)];
  }
}

// ── Inheritance ──────────────────────────────────────
// Subclass — inherits all Animal properties and methods
class Cat extends Animal {
  constructor(name, usesLitter) {
    super(name);               // must be first — sets this._name via Animal
    this._usesLitter = usesLitter;
  }

  get usesLitter() { return this._usesLitter; }
}

const bryceCat = new Cat('Bryce', false);
console.log(bryceCat.name);         // 'Bryce' — inherited getter
bryceCat.incrementBehavior();       // inherited method
console.log(Animal.generateName()); // static — called on class, not instance
bryceCat.generateName();            // TypeError — static methods don't work on instances

Watch out:
→ No commas between methods in a class (unlike object literals)
→ constructor() parameters = values passed in only
   Fixed defaults (e.g. _behavior = 0) go in the body, not the parameter list
→ super() must be the first line in a subclass constructor
→ Static methods can only be called on the class — not on instances
→ Use . not , when accessing properties: instance.property not instance,property
                    

MDN Classes Reference

Higher-Order Functions

// Function stored in variable
const greet = () => {
  console.log('Hello');
};

// Function passed as argument (callback)
const callFunction = (fn) => {
  fn();
};

callFunction(greet);

// Higher-order function returning a function
const multiplier = (x) => {
  return (y) => x * y;
};

const double = multiplier(2);
console.log(double(5)); // 10

KEY:
Blue    = Function name
Orange  = Parameter / argument
Pink    = Callback function
                    

Key Notes

• Functions can be treated like data
• Callback = function passed into another function
• Higher-order = takes or returns a function

Useful links: MDN Callbacks | MDN First-Class Functions

Iterators

Iterators are built-in array methods that loop through items and do something with each one. They replace manual for loops for most common tasks.

const numbers = [1, 2, 3, 4, 5];

// forEach — do something with each item
numbers.forEach(num => console.log(num));

// map — transform each item into something new
const doubled = numbers.map(num => num * 2);
// [2, 4, 6, 8, 10]

// filter — keep only items that pass the test
const evens = numbers.filter(num => num % 2 === 0);
// [2, 4]

// reduce — combine all items into one value
const total = numbers.reduce((acc, num) => acc + num, 0);
// 15  (acc starts at 0, adds each num)

// find — first item that matches
const firstBig = numbers.find(num => num > 3);
// 4

// some — is at least one item true?
const hasEven = numbers.some(num => num % 2 === 0);
// true

// every — are all items true?
const allPositive = numbers.every(num => num > 0);
// true

Rule:
Use map  → when you want a new transformed array
Use filter → when you want a subset of the array
Use reduce → when you want one value from the array
Use forEach → when you just want to do something (no new array needed)
                    

.sort() with numbers

.sort() without a compare function sorts as text, not numbers:
[10, 9, 2].sort()  →  [10, 2, 9]  (wrong for numbers)

Always pass a compare function for numbers:

ascending  (smallest first): arr.sort((a, b) => a - b)
descending (largest first):  arr.sort((a, b) => b - a)
                    

.forEach() in Detail

.forEach() executes the same code for each element of an array. It takes a callback function as its argument.

const groceries = ['brown sugar', 'salt', 'cranberries', 'walnuts'];

groceries.forEach(function(groceryItem) {
  console.log(' - ' + groceryItem);
});

// Arrow function version (same result)
groceries.forEach(groceryItem => {
  console.log(' - ' + groceryItem);
});

// Output:
//  - brown sugar
//  - salt
//  - cranberries
//  - walnuts

KEY:
Yellow  = Iterator method
Pink    = Callback function
                    

Key points:
→ forEach does not return anything (returns undefined)
→ Cannot be stopped early — it always runs on every item
→ The callback receives each item one at a time
→ Use arrow functions to keep it concise
                    

findIndex() guard rule

findIndex() returns -1 if the item is not found.
Always check before using the index:

let index = arr.findIndex(item => item === target);
if (index !== -1) {
    arr[index] = 'replacement';
}

→ skipping the check risks replacing arr[-1], which is undefined
→ always guard findIndex() results before acting on them
                    

Regular Expressions

Regular expressions (regex) are patterns used to match sequences of characters in a string. They are widely used in form validation, search, and string manipulation.

Syntax:  /pattern/flags

const re = /hello/i;   // matches "hello" case-insensitively
                    

// test() — returns true or false
const re = /^\d{5}$/;
re.test('12345');   // true
re.test('1234x');   // false

// match() — returns matches or null
'hello world'.match(/\w+/g);  // ['hello', 'world']

// replace() — replaces matches
'hello world'.replace(/world/, 'there');  // 'hello there'

Common validation patterns:

Email:        /^[^\s@]+@[^\s@]+\.[^\s@]+$/
Digits only:  /^\d+$/
Letters only: /^[A-Za-z]+$/
                    

JavaScript Form Validation

Client-side JavaScript validation gives more control than HTML attributes alone — you can check multiple fields, show custom error messages, and prevent submission until all rules pass.

const form = document.querySelector('form');
const emailInput = document.getElementById('email');
const errorMsg = document.getElementById('error');

form.addEventListener('submit', function(event) {
    if (!emailInput.value.includes('@')) {
        event.preventDefault();
        errorMsg.textContent = 'Please enter a valid email address.';
    }
});

Validation pattern:

1. Listen for the submit event on the form
2. Read each input's .value
3. Check conditions (length, regex, required fields)
4. If invalid → call event.preventDefault() and show an error message
5. If valid → let the form submit (or handle it with fetch)

Back-end validation is always required in addition to client-side checks.
Client-side validation can be bypassed — it is for user experience only.
                    

Modules (ES6)

Modules are reusable pieces of code in a file that can be exported and imported elsewhere. They keep code separated, prevent naming collisions, and make it easier to find and fix bugs.

// ── Named export / import ────────────────────────────
// module.js
export const greetEspanol = () => console.log('hola');
export const greetFrancais = () => console.log('bonjour');

// main.js
import { greetEspanol, greetFrancais } from './module.js';

// Rename to avoid collision
import { greet as greetEs } from './greeterEspanol.js';
import { greet as greetFr } from './greeterFrancais.js';

// ── Default export — single function ─────────────────
// module.js
export default function greet() {
  console.log('hello');
}

// main.js — no curly braces, any name works
import greet from './module.js';

// ── Default export — multiple functions ──────────────
// module.js  (option 1 — inline object, no extra variable needed)
export default { greetEspanol, greetFrancais };

// module.js  (option 2 — build object first, then export)
const resources = { greetEspanol, greetFrancais };
export default resources;

// main.js — import the object, then access functions from it
import myModule from './module.js';
myModule.greetEspanol();

// or destructure on import:
const { greetEspanol, greetFrancais } = myModule;

Named vs Default import — spot the difference:
  import { funcName } from './module.js'   ← named   (curly braces, exact name)
  import anyName from './module.js'        ← default (no curly braces, any name)

CommonJS (Node) vs ES6 (browser):
  Node uses:    module.exports = ...  /  require('./module')
  Browser uses: export / import  (ES6)
  ES6 modules also work in Node with some extra setup.
                    

MDN JavaScript Modules Guide