Chapter 2: Casting Your First Spell

Functions with No Parameters

Variables are like magical ingredients, but functions are the spells themselves. A function is a reusable piece of code that performs a specific task. You can think of it as a spell in a spellbook: you say the magic words (call the function) and boom! something happens.

In JavaScript, we have a special way to create a function using an arrow (=>). This arrow syntax might remind you of a wand 🪄 casting a spell – and that's exactly how we'll use it.

🕯 Why Functions?

Imagine you often need to cast Lumos to light up your wand. You could write console.log("The room is bright!") every time you need light, but that's repetitive. Instead, you can create a function called lumos once, and then just call lumos() whenever you need it. Functions help us avoid repetition and organize our code into logical pieces (spells).

📝 Defining an Arrow Function

Let's create our first spell function without any parameters (we'll get to parameters in the next chapter). We'll make a simple function that announces a spell:

let castLumos = () => {
  console.log("Luminosity!");
};

Let's break down this magical incantation:

• let castLumos = – We're creating a variable named castLumos that will hold our function (just like how we put a number or string in a variable before, now we're putting a whole function!).
• () => { ... }; – This is the arrow function syntax. The () means the function doesn't need any input (no ingredients yet). The => can be read as "does" or "results in". The curly braces { ... } contain the spell's body – the code that runs when the function is called.

Inside the braces, we have console.log("Luminosity!");. So whenever we cast castLumos(), it will print "Luminosity!" to the console (as if the wand lights up).

But defining the function alone doesn't run it, just like writing a spell in your notebook doesn't cast it. To execute (cast) the function, we must call it by using its name followed by parentheses:

castLumos(); // calling the function
castLumos(); // we can call it again, as many times as we want

Each time you call castLumos();, the message Luminosity! will be printed. Try it out in your console!

✨ More Fun Spells

Let's create a couple more example functions:

let greetWizard = () => {
  console.log("Greetings, young wizard!");
};

let castExpelliarmus = () => {
  console.log("*woosh!* The wand flies out of your opponent's hand.");
};

Now we have two new spells:

• greetWizard() – when called, it prints a friendly greeting.
• castExpelliarmus() – when called, it prints a description of the disarming spell action.

We can call them like so:

greetWizard();
// Output: Greetings, young wizard!

castExpelliarmus();
// Output: *woosh!* The wand flies out of your opponent's hand.

Notice each function has its own name and its own code inside. We used different messages in each. Functions help organize code by what they do.

🧙‍♀️ Choosing Good Names

We named our functions in a way that describes what they do (e.g., castExpelliarmus clearly is about casting that specific spell). In programming, it's a good habit to name your functions and variables so that their purpose is obvious. It's like labeling your potion bottles correctly – you don't want to mix up your Sleeping Draught with your Skele-Gro!

A few rules for naming in JavaScript:

• Use letters, numbers, $ or _ (but don't start with a number).
• No spaces are allowed in names; we use camelCase for multi-word names (e.g., greetWizard or myPetOwl).
• Be descriptive: attackEnemy is better than doThing.

🎭 Practice: Your Own Incantation

Try it yourself: Define a new function spell of your own:

• Pick a fun name for your function, like makePotion or startFeast.
• Inside the function, use console.log to print a creative message. For example, startFeast might print "The dining hall fills with delicious smells!".
• After defining it, call your function a couple of times to see the message appear.

By doing this, you've effectively written your own little spell in code and cast it at will!

🔗 Functions Recap

• Functions are reusable pieces of code, like spells you can cast anytime.
• Define a function using the arrow syntax: let name = () => { ... };.
• Call (invoke) the function by writing its name followed by ().
• Functions help avoid repeating code and make programs easier to understand.

You've just cast your first custom spells in JavaScript! That's a huge step. Next, we'll learn to add ingredients to our spells – allowing our functions to be even more powerful and flexible.