← Back to Hub

📜 JavaScript Basics & Syntax

Foundation concepts every JS developer must know

🎯 What You'll Learn

  • Variables (let, const, var)
  • Data types (strings, numbers, booleans)
  • Operators (arithmetic, comparison, logical)
  • Conditionals (if/else, switch)
  • Loops (for, while, do-while)
  • Basic input/output

📚 Core Concepts

1. Variables - Storing Data

Variables are containers for storing data values.

// Modern way (use these!) let age = 18; // Can be changed const name = "Alex"; // Cannot be changed let isStudent = true; // Boolean // Old way (avoid) var oldWay = "don't use this"; // You can change 'let' variables age = 19; // ✅ Works! // You CANNOT change 'const' variables // name = "Bob"; // ❌ Error!
✏️ Try it: Create variables for your name, age, and whether you like pizza. Print them to console.

2. Data Types - Different Kinds of Values

// String (text) let greeting = "Hello World"; let quote = 'Single quotes work too'; let template = `My age is ${age}`; // Template literal // Number let integer = 42; let decimal = 3.14; let negative = -10; // Boolean (true/false) let isRaining = false; let hasLicense = true; // Check type console.log(typeof greeting); // "string" console.log(typeof age); // "number" console.log(typeof isStudent); // "boolean"

3. Operators - Doing Math and Comparisons

// Arithmetic operators let sum = 10 + 5; // 15 let diff = 10 - 5; // 5 let product = 10 * 5; // 50 let quotient = 10 / 5; // 2 let remainder = 10 % 3; // 1 let power = 2 ** 3; // 8 // Comparison operators 10 > 5 // true 10 < 5 // false 10 >= 10 // true 10 == "10" // true (converts types!) 10 === "10" // false (strict comparison - better!) 10 != 5 // true // Logical operators true && true // AND: true true || false // OR: true !true // NOT: false
💡 Tip: Always use === instead of == to avoid weird type conversion bugs!

4. Conditionals - Making Decisions

// If statement let temperature = 25; if (temperature > 30) { console.log("It's hot! 🔥"); } else if (temperature > 20) { console.log("Nice weather! ☀️"); } else { console.log("It's cold! ❄️"); } // Ternary operator (shorthand) let canVote = age >= 18 ? "Yes" : "No"; // Switch statement let day = "Monday"; switch(day) { case "Monday": console.log("Start of week"); break; case "Friday": console.log("Almost weekend!"); break; default: console.log("Regular day"); }
✏️ Try it: Write a program that checks if a number is positive, negative, or zero.

5. Loops - Repeating Actions

// For loop - when you know how many times for (let i = 0; i < 5; i++) { console.log(`Count: ${i}`); } // Output: 0, 1, 2, 3, 4 // While loop - when you don't know how many times let count = 0; while (count < 3) { console.log(count); count++; } // Do-while - runs at least once let num = 10; do { console.log(num); num--; } while (num > 0); // Break and continue for (let i = 0; i < 10; i++) { if (i === 5) break; // Stop loop at 5 if (i % 2 === 0) continue; // Skip even numbers console.log(i); }

🛠️ Practice Projects

Project 1: Temperature Converter

Build a program that converts Celsius to Fahrenheit and vice versa

Features to add:
  • Input temperature value
  • Choose conversion type (C to F or F to C)
  • Display result with proper formatting
  • Add validation (check if input is a number)
// Hint: // Celsius to Fahrenheit: (C × 9/5) + 32 // Fahrenheit to Celsius: (F - 32) × 5/9

Project 2: Number Guessing Game

Create a game where the computer picks a random number and you guess it

Features to add:
  • Generate random number between 1-100
  • Give "higher" or "lower" hints
  • Count number of attempts
  • Display success message when correct
// Hint: let random = Math.floor(Math.random() * 100) + 1;

Project 3: Grade Calculator

Calculate final grade based on multiple test scores

Features to add:
  • Input scores for 5 tests
  • Calculate average
  • Determine letter grade (A, B, C, D, F)
  • Show if student passed or failed