Interactive JavaScript Tutorial - Variables and Functions

1// Use const for values that won't change
2const siteName = "Learn2Code";
3const maxUsers = 1000;
4 
5// Use let for values that will change
6let currentUsers = 42;
7let isOnline = true;
8 
9// Update let variables
10currentUsers = currentUsers + 1;
11console.log(currentUsers); // 43

1// Good: const for things that don't change
2const API_URL = "https://api.example.com";
3const userConfig = { theme: "dark" };
4 
5// Good: let for counters and state
6let score = 0;
7let attempts = 3;
8 
9// Note: const objects can have their properties changed
10userConfig.theme = "light"; // This works!

1// Function declaration
2function greet(name) {
3  return `Hello, ${name}!`;
4}
5 
6// Arrow function (modern syntax)
7const greetArrow = (name) => {
8  return `Hello, ${name}!`;
9};
10 
11// Short arrow function (implicit return)
12const greetShort = (name) => `Hello, ${name}!`;
13 
14// All three do the same thing
15console.log(greet("Alice"));      // "Hello, Alice!"
16console.log(greetArrow("Bob"));   // "Hello, Bob!"
17console.log(greetShort("Charlie")); // "Hello, Charlie!"

1function calculateTotal(price, quantity, taxRate = 0.1) {
2  const subtotal = price * quantity;
3  const tax = subtotal * taxRate;
4  return subtotal + tax;
5}
6 
7// Using the function
8const total = calculateTotal(29.99, 3);
9console.log(total); // 98.97 (with 10% tax)
10 
11// Override default tax rate
12const totalCA = calculateTotal(29.99, 3, 0.0725);
13console.log(totalCA); // 96.49 (with 7.25% tax)

1// Configuration
2const DISCOUNT_THRESHOLD = 100;
3const DISCOUNT_PERCENT = 0.15;
4 
5// Function to calculate price with potential discount
6function calculateFinalPrice(items) {
7  let total = 0;
8 
9  // Sum up all items
10  for (const item of items) {
11    total += item.price * item.quantity;
12  }
13 
14  // Apply discount if over threshold
15  if (total >= DISCOUNT_THRESHOLD) {
16    const discount = total * DISCOUNT_PERCENT;
17    total = total - discount;
18    console.log(`Discount applied: -$${discount.toFixed(2)}`);
19  }
20 
21  return total;
22}
23 
24// Test it out
25const cart = [
26  { name: "Book", price: 25, quantity: 2 },
27  { name: "Pen", price: 5, quantity: 10 },
28  { name: "Notebook", price: 15, quantity: 3 }
29];
30 
31const finalPrice = calculateFinalPrice(cart);
32console.log(`Final price: $${finalPrice.toFixed(2)}`);
33// Output: Discount applied: -$14.25
34// Final price: $80.75