Teaching JavaScript Fundamentals

JavaScript
// Complete beginner example - a simple number guessing game
let secretNumber = 7;
let guess = 5;

if (guess === secretNumber) {
    console.log("Correct!");
} else if (guess < secretNumber) {
    console.log("Too low!");
} else {
    console.log("Too high!");
}

Progressive Learning Path

Progress:

• 1. Variables & Data Types
• 2. Operators
• 3. Control Flow
• 4. Functions
• 5. Practice Integration

Step 1: Variables & Data Types

JavaScript
// Variable declarations
let name = "John";           // mutable
const age = 25;              // immutable
var city = "NYC";            // avoid in modern JS

// Data types
let text = "Hello World";    // string
let number = 42;             // number
let isActive = true;         // boolean
let items = [1, 2, 3];       // array

Step 2: Operators

JavaScript
// Arithmetic
let sum = 10 + 5;           // 15
let remainder = 10 % 3;      // 1

// Comparison
let isEqual = (5 === 5);     // true
let isGreater = (10 > 5);    // true

// Logical
let canVote = (age >= 18) && (hasID === true);

Step 3: Control Flow

JavaScript
// if/else
if (score >= 90) {
    grade = "A";
} else if (score >= 80) {
    grade = "B";
} else {
    grade = "C";
}

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

let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

Step 4: Functions

JavaScript
// Function declaration
function greet(name) {
    return "Hello, " + name + "!";
}

// Function call
let message = greet("Alice");
console.log(message); // "Hello, Alice!"

Example 1: Simple Calculator Input: Create a function that adds two numbers Output:

JavaScript
function add(a, b) {
    return a + b;
}

let result = add(5, 3);
console.log(result); // 8

Example 2: Grade Calculator Input: Determine letter grade from numeric score Output:

JavaScript
function getGrade(score) {
    if (score >= 90) return "A";
    if (score >= 80) return "B";
    if (score >= 70) return "C";
    if (score >= 60) return "D";
    return "F";
}

console.log(getGrade(85)); // "B"

Example 3: Array Processing Input: Find largest number in array Output:

JavaScript
function findMax(numbers) {
    let max = numbers[0];
    for (let i = 1; i < numbers.length; i++) {
        if (numbers[i] > max) {
            max = numbers[i];
        }
    }
    return max;
}

let nums = [3, 7, 2, 9, 1];
console.log(findMax(nums)); // 9

• Use const by default, let when reassigning - avoid var
• Use === instead of == - strict equality prevents type coercion bugs
• Name variables descriptively - userAge not x
• Keep functions small - one responsibility per function
• Use camelCase - JavaScript convention for variables and functions

• Forgetting semicolons - while optional, they prevent subtle bugs
• Confusing = and === - assignment vs comparison
• Off-by-one errors in loops - remember arrays start at index 0
• Not handling empty arrays - check array.length > 0 before accessing elements
• Mixing data types unintentionally - "5" + 3 equals "53", not 8