Naming and Naming Conventions for JavaScript Variables

Let me ask you a question. Have you ever opened a kitchen drawer, looking for a spoon, only to find a jumbled mess of tools, batteries, rubber bands, and that weird key you’ve never used? You end up digging through everything, frustrated, wasting time. Now imagine if everything in that drawer was neatly organized and labeled. You’d find your spoon instantly.

Naming your JavaScript variables is exactly like that. In our last chat, we learned how powerful variables are and how to create them with var. But with that power comes a big responsibility: naming them well. Today, we’re going to clean out that messy drawer and set up a system that makes sense to you and to anyone else who might peek inside your code.

First, let’s clear our workspace. If your browser’s console is looking cluttered from last time, you can easily clean it up. On a Mac, hold Command and press K. On Windows, hold Control and press K. It’s like wiping down a whiteboard. But remember, this only clears the visual messages. The browser still remembers your data.

For example, if I’d stored myName as “Angela” before, typing myName after clearing the console would still give me “Angela.” To do a full factory reset—to make the browser forget everything—you need a hard reload. On a Mac, click and hold the reload button in your browser until you see a menu. Choose “Empty Cache and Hard Reload.” On a PC, right-click the reload button to get the same option. Now, if I type myName, it’s gone—undefined. It’s a completely fresh start.

So, with our slate clean, let’s talk about the most important part of this lesson: the name on the label.

Why Names Matter (A Lot)

JavaScript is incredibly forgiving. It doesn’t care if you name your variable myName or x or qjkwhefkj. You could write this:

var sjomli = "Angela";

And JavaScript would just say, “Okay, cool.” But you should care. And anyone who might read your code definitely cares.

What does sjomli mean? Is it a name? A secret code? Did I accidentally write an Icelandic word? If you’re working on a team, and your colleague names everything with random strings, you’d spend all day deciphering their work instead of building things. It’s like trying to be friends with someone when you only speak English and they only speak Mandarin—it’s just not going to work smoothly.

Always give your variables meaningful names. Think of it this way: if you name all the folders on your desktop “Untitled 1,” “Untitled 2,” you’ll waste hours searching. But “Holiday_Pictures_2024,” “Tax_Documents,” “Recipe_Book”—these tell you exactly what’s inside. Your variable names should do the same.

And remember this programmer’s proverb: The next person who has to look after your code could very well be an axe murderer. Don’t make them angry. Write clear code.

The Rules JavaScript Enforces

While JavaScript gives you freedom, it does have a few non-negotiable rules. You can’t break these, or you’ll get an error.

1. No Keywords: You cannot name your variable after JavaScript’s own reserved words. The biggest one? You can’t call it var.

   var var = "nope"; // This will cause an error!
   

   JavaScript sees that and gets hopelessly confused. However, you can include the word. myVar is perfectly fine.

2. Can’t Start with a Number: Your variable name cannot begin with a digit.

   var 123street = "main"; // Error!
   

   But numbers are allowed elsewhere.

   var street123 = "main"; // This is totally cool.
   

3. No Spaces Allowed: A space tells JavaScript you’re moving to new code.

   var my name = "Angela"; // Error!
   

4. Only Certain Symbols: The only special characters allowed are $ and _.

   var my-name = "Angela"; // Error!
   var my_name = "Angela"; // Valid.
   var $price = 9.99; // Valid.
   

The Conventions Good Programmers Follow

Now here are the soft rules—the best practices you should follow.

1. Use camelCase.

   • Start first word lowercase
   • Capitalize next words

   Examples:

   var userFirstName = "John";
   var totalCartPrice = 49.99;
   var isLoggedIn = true;
   

2. Be Descriptive, But Concise.

   • Bad: d, temp, val1
   • Good: counter, temperatureCelsius, isValid

3. Start with a Letter.

By sticking to these conventions, you’re not just writing code for the computer. You’re writing it for the human—for your future self at 3 AM trying to fix a bug.

So, your actionable takeaway for today is this: From this moment forward, name every variable with a meaningful, camelCase name.

In the next lesson, we’ll have a quick quiz to make sure these rules have stuck. Trust me, forming these good habits now will save you from countless headaches later. Happy coding, and I’ll see you soon

Lihat juga