Hello, and welcome to your JavaScript journey! Today's quest is to understand variables — our way of storing data, much like jars for keeping cookies. We'll see how to create these jars with labels (let and const), what to write on these labels (naming variables), how to fill them (assigning values), and then how to display our cookies (printing values). Let's dive in and start our delicious coding adventure!

In JavaScript, variables are the tags we create to track and use our data.

• For changeable data, such as the number of cookies in your jar, which is likely to change, we use let.
  • It’s like having a grocery bag that we can fill and empty often.
• For unchanging values, const is the go-to choice.
  • Imagine a piggy bank for a specific type of coin; once it’s in there, it’s intended to stay.

Here is an example:

JavaScript
Copy to clipboard
1let myAge; // Ready for an age that may change over time.
2myAge = 30; // Assigning my current age.
3const PI = 3.1415; // Like a coin, pi’s value won't change.

By the end of this lesson, you'll understand how to declare variables for dynamic and static values.

Variables should be clearly named to indicate the data they contain. Good naming is like a well-labeled spice rack: it allows you to find exactly what you need at a glance. Start variable names with letters, underscores (_), or dollar signs ($), and avoid reserved words like const, let, and similar.

In JavaScript, it's considered to be a good style to name variables in Camel Case: when the variable name consists of multiple words, the first letter in the first word is lowercase, and the first letter in every other word is uppercase. For example: customerName, myAge, temperature, veryLongVariableName.

JavaScript
Copy to clipboard
1let totalAmount; // Clearly, it's an amount, likely of money.
2let customerName; // A better fit for a shopping app than 'userName'.
3let temp; // Not descriptive; what does 'temp' signify - Temperature? Temporary?
4let $date; // Variable name can state with a dollar sign.
5let _99redBalloons; // Leading underscores are okay, but avoid starting with numbers.
6let 123number; // Invalid variable name - the name can't start with a digit.

Choose descriptive names to make your code as intuitive as a thoughtfully organized pantry: every item is clearly labeled and easy to reach.

Just as we fill jars with cookies, we assign values to variables using =. Feel free to change the contents of a let jar, but a const jar is sealed upon assignment.

JavaScript
Copy to clipboard
1let myFavoriteColor; // We're ready to assign a favorite color.
2myFavoriteColor = 'blue'; // Blue is the color for now.
3let daysUntilVacation = 7; // Counting down the days.
4daysUntilVacation = 6; // Each day, the number decreases: that's mutable data.
5const speedOfLight = 299792458; // This value is immutable, like the speed of light itself.

Here we’ve filled our jars and shown reassignment in action with daysUntilVacation. The concept is clear now: use let for variables like myFavoriteColor, whose values can change, and const for perpetual values like speedOfLight.

Displaying the contents of your jars is easy with console.log(). This command is like placing your jar in a glass cabinet for viewing without opening. You can mix the constant strings and variables or expressions in the console.log, just like in the example below:

JavaScript
Copy to clipboard
1let gadgetOfTheYear = 'Smartphone';
2console.log(gadgetOfTheYear); // Prints: 'Smartphone'
3console.log('The gadget of the year is', gadgetOfTheYear); // Prints: 'The gadget of the year is Smartphone'

Use console.log() to view a variable's current value — it's a quick and non-invasive way to check your code's correctness, akin to presenting your collection for all to admire while keeping the contents secure.

Fantastic work! You’ve now learned that variables are like jars with labels ready to be filled. Naming variables is crucial; think of meaningful labels that reflect the data within the jars. To show off your variables, console.log() is the perfect method to display.

Next, you'll put your newfound knowledge into practice, creating variables for a purpose. Like mastering recipes, each step solidifies your skill. Let's continue cooking in the code kitchen!