Skip to main content

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!).

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!