Chapter 1: Let the Magic Begin

Introducing Variables and console.log

Welcome to your very first coding lesson at Codewarts! In this chapter, we'll start with the simplest of magical coding tools: variables and the console.log spell. Think of a variable as a magical chest where you can store anything – a number, a word, or any piece of data. And console.log is a handy incantation that lets us see what's inside those chests (by printing it out to the screen).

🧪 What is a Variable?

In the wizarding world, you might have a trunk to store your robes, wands, or Chocolate Frogs. In JavaScript, a variable is like that trunk – it's a labeled container for storing information. You can put a number or a piece of text into it, and you can come back later to see or change what's inside. We create (declare) a new variable using the word let (as if saying "let this be"). For example:

let housePoints = 10;

In this code:

• let – This keyword starts the creation of a new variable.
• housePoints – The name of our variable. We chose "housePoints" because maybe we're storing the number of House Points Gryffindor earned today.
• = – Think of this as the "assign" symbol. It puts the value on the right into the variable on the left.
• 10 – The value we are storing. This is a number (we won 10 points for answering a question in class!).

So the line let housePoints = 10; reads like: "Let there be a variable named housePoints and let it hold the value 10."

You can also store words or text (called strings in programming) in variables. Strings are always in quotes ("" or ''). For example:

let petName = "Hedwig";

This line creates a variable petName and stores the text "Hedwig" in it. Now petName holds the name of Harry's owl.

You can create as many variables as you need, to hold all sorts of magical information:

let wizardName = "Harry";
let wizardAge = 11;
let isBrave = true;

Here we have:

• wizardName holding the string "Harry".
• wizardAge holding the number 11.
• isBrave holding the value true (a boolean, which is a true/false value indicating yes/no or presence/absence of a quality).

📣 Using console.log – Revealing the Magic

Just declaring a variable won't show us anything on the screen. It's like writing down a spell but never casting it. To see output, we use console.log(). This is a built-in spell that tells JavaScript to print out whatever is inside the parentheses to the console (a special area where text output appears).

For example:

let house = "Gryffindor";
console.log(house);

When you run this code, you should see Gryffindor appear in the console output. We stored the text "Gryffindor" in the variable house, and then used console.log(house) to display it.

Where is this "console"? If you're using a web browser, you can open the JavaScript console to run these examples:

• On Chrome, press Ctrl+Shift+J (Windows) or Cmd+Option+J (Mac).
• On Firefox, press Ctrl+Shift+K (Windows) or Cmd+Option+K (Mac).

A panel will open in your browser where you can type JavaScript code or run your script and see console.log outputs. It's like your personal spell-testing laboratory!

🎉 Let's Try: Casting Simple Output Spells

Let's use what we've learned to cast a few simple spells:

let spell = "Alohomora";
console.log("Casting spell: " + spell);

In the second line, we combine the string "Casting spell: " with the contents of spell using the + operator. When run, it will print:

Casting spell: Alohomora

The + operator joins strings together (this is called concatenation). If spell contained another word, it would print that instead. We can change the variable's value and cast again:

spell = "Expelliarmus";
console.log("Casting spell: " + spell);

Output:

Casting spell: Expelliarmus

Notice we didn't write let again when changing spell. We only use let the first time to declare the variable. Afterwards, we can directly assign new values to it.

Try it yourself:

• Create a variable for your name, e.g. let studentName = "Hermione";.
• Create another variable for your favorite magical object, e.g. let favoriteMagicItem = "wand";.
• Use console.log to print a sentence like: "Hermione loves her wand." but instead of hardcoding the name and item, use the variables you created and the + operator to combine them in the output.

🔍 Variables Recap

• Variables store data (numbers, text, etc.) under a name so we can use them later.
• Use let to create a new variable and assign it a value.
• Use console.log(variableName) to print out the value of a variable (or any message) to the console.
• You can change a variable's value later in the code (this is why it's called a "variable" – its value can vary!).

📝 Comments – Notes to Your Future Self

Sometimes you want to leave notes in your code – reminders about what something does, or a message for another wizard who reads your spellbook later. These notes are called comments, and JavaScript will completely ignore them when running your code.

A single-line comment starts with //:

// This variable stores the number of O.W.L.s passed
let owlsPassed = 7;

For longer notes that span multiple lines, wrap them in /* */:

/*
  This program calculates the total house points
  earned during the first week of term.
  Written by a first-year Codewarts student.
*/
let totalPoints = 42;

Comments are incredibly useful for explaining why you wrote something, not just what it does. Get in the habit of leaving them early!

🔒 const – Values That Never Change

We've been using let to create variables, and that works great when the value might change later. But sometimes you have a value that should never change – like the number of houses at Hogwarts or the name of the school itself. For those, use const:

const hogwartsHouses = 4;
const schoolName = "Hogwarts";

If you try to reassign a const variable, JavaScript will throw an error:

const platform = "9¾";
platform = "10"; // Error! You can't change a const.

When to use which?

• Use const when the value won't change. This is actually the more common choice!
• Use let when you know the value will need to change later.

A good rule of thumb: start with const, and only switch to let if you find yourself needing to reassign it.

Great job! You've just conjured your first bits of JavaScript magic. In the next chapter, we'll learn how to cast actual spells (functions) to perform actions with our code, just like saying Wingardium Leviosa to levitate objects. Get your wands ready!