Lesson 1

Lesson 1 – Variables, Functions, and Other Magic 🧙‍♂️✨

Welcome to the very first step on your journey to mastering JavaScript! By the end of this lesson, you’ll have a solid understanding of variables and functions. And no, you don’t need a wizard’s hat or a PhD to follow along—just a curious mind and maybe a cup of coffee (or tea, if you’re feeling fancy).

What Are Variables? (Spoiler: Not That Scary)

Think of variables as little boxes where you can store information—like that drawer you have at home that’s filled with random things you swear you’ll need one day. In JavaScript, variables hold pieces of data that you can use and reuse in your code.

Declaring Variables

To declare a variable, you just have to introduce it to JavaScript. Think of it like saying, “Hey JavaScript, here’s something important I want to keep track of.” You can do this with var, let, or const. But which one should you use? Let’s break it down:

var wizardName = "Gandalf"; // Old school way. You might still use this, but it's kind of like using a typewriter in 2024.
let magicLevel = 100; // The modern, flexible way.
const staff = "Wooden"; // This is constant. Once you declare it, you can't change it. Like that friend who refuses to change their favorite pizza topping.

var: The OG way of declaring variables. Works, but not as cool as let and const.
let: The new kid on the block. Use this when you want to be able to change the value later.
const: The strong, silent type. Once you declare it, you can’t change it—perfect for things that should never change (like Gandalf’s epic beard).

Functions: Superheroes in Code Form 🦸‍♂️

Functions in JavaScript are like your personal superheroes—they save the day by performing tasks for you. You give them some work to do, and they do it (without complaining, unlike some superheroes we know).

How to Declare a Function

Here’s how you introduce a function in JavaScript:

function castSpell(spellName) {
  console.log("You cast the spell: " + spellName);
}

castSpell("Expelliarmus"); // Outputs: You cast the spell: Expelliarmus

In this example:

function is your way of telling JavaScript, “Hey, I want to do something!”
castSpell is the name of the function (you can name it anything, even “makePizza” if you want).
spellName is a parameter. Think of it as the magic ingredient your function needs to work.
console.log is the JavaScript equivalent of shouting into the void. Whatever is inside the parentheses gets printed in the browser’s console.

Arrow Functions (Because Why Write More?)

Arrow functions are a shorter way of writing functions. If JavaScript functions were text messages, arrow functions would be the emoji-packed version. They’re quicker, more concise, and perfect when you’re feeling a little lazy.

Here’s the same castSpell function, but using an arrow function:

const castSpell = (spellName) => {
  console.log("You cast the spell: " + spellName);
};

Same thing, less typing. It’s like upgrading from a bicycle to a sports car.

Time to Practice Your Magic! 🎩

Let’s put your new knowledge to the test with a little exercise:

Task: Create a Magic Potion

Declare a variable called potionName and set it to "Invisibility Potion".
Write a function called brewPotion that prints a message like "You have brewed the Invisibility Potion!".
Call your function and pass in the potionName variable.

Here’s a little nudge in the right direction:

let potionName = "Invisibility Potion";

function brewPotion(name) {
  console.log("You have brewed the " + name + "!");
}

brewPotion(potionName); // Outputs: You have brewed the Invisibility Potion!

Where Can You Write JavaScript Code?

Now that you’re eager to try your new JavaScript skills, you might be wondering: where do I actually write this code? One of the easiest places to test your JavaScript code is directly in your web browser.

Web Browser Console: Your First Stop for JavaScript Magic

Most modern web browsers (like Chrome, Firefox, and Edge) come with a built-in console where you can write and test JavaScript code instantly.

How to access the console:
- Right-click anywhere on a web page and select Inspect or Inspect Element.
- Switch to the Console tab.
- Now, you can type JavaScript code directly into the console and see the results right away.

For example, try this:

console.log("Hello, JavaScript!");

Open your browser’s console, type the above line, and hit Enter. You’ll see “Hello, JavaScript!” appear in the console—magic!

The browser console is a great way to quickly test your code while learning the basics.

What’s Next?

In this lesson, you’ve learned how to declare variables and create functions, which are the building blocks of JavaScript. In the next lesson, we’ll dive into loops and conditional statements—because, let’s face it, nobody likes repeating themselves (except maybe for Siri).

Ready for more JavaScript magic? Stay tuned for the next adventure: Lesson 2 – Loops and Conditionals: Making Decisions and Repeating Yourself Without Losing Your Mind.

Feel free to play around with the code and try different spells or potions. The more you experiment, the faster you’ll become a JavaScript wizard!