シェアする
Using Variables (Part 1) - Images: Japanese
Hey everyone!
Next up, let's learn about variables.
Variables are a fundamental concept found in virtually every programming language — which makes them absolutely essential. That said, the concept can be hard to wrap your head around at first.
It's pretty common to see beginners just starting out with programming say things like "I just don't get variables!!" Don't worry — it's a well-known stumbling block. Even if it takes a little time, once it clicks, you're good. Hang in there.
In this article, we'll cover how to declare a variable. The next article will move on to assigning values to variables, and after that, we'll actually put them to use — which is where the concept and the convenience really start to make sense.
Let's get into it.
First, a variable is basically a named area where data is temporarily stored, and can be modified or copied. The key things here are that it has a unique name, and that the data in it can be changed or copied — both of which are incredibly powerful.
Think back to equations in math class — you know, the ones with x and y.
x + y = 3
Variables in programming are very similar to those x and y concepts.
If you search for "variable," you'll find lots of explanations describing it as "a box for storing data." That's a pretty good way to put it — a named box that holds data and lets you modify or copy what's inside. It's a bit tricky to put into words, but once you actually start using variables, you'll get a feel for what they are.
So for practice, let's load an external JS file and run it.
First, create an HTML file with the following contents.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Practice</title> </head> <body> <script src="./script.js"></script> </body> </html>
Then, in the same directory, create a JS file named script.js. Make sure to use UTF-8 encoding. After that, you can write your JavaScript in it as normal.
If you want to confirm that the external JavaScript file is loading correctly, try putting a simple alert in it and checking in the browser. If an alert dialog pops up, the file is loading just fine.
All set with the external file setup?
Great, let's start writing some code.
Before you can use a variable, you need to do what's called a variable declaration.
A variable declaration is how you create the variable. You need to tell the computer in advance: "Hey, this is a variable!"
In JavaScript, you declare a variable by writing var, followed by a single space, and then the variable name.
The "variable name" is exactly what it sounds like — the name you give to the variable. Write var followed by whatever name you choose, and a variable with that name will be declared.
Here's what it looks like. Let's call back to our math example and use x as the variable name.
var x;
And that's it — a variable named x is now declared. Variable declaration done.
By the way, while we said "one space," extra spaces, tab characters, and line breaks are all fine in any quantity.
var
x;
That said, there's no point in doing that — it just makes your code harder to read — so stick with:
var x;
On the flip side, leaving out the space entirely is a problem.
varx;
Without a word boundary, the browser can no longer recognize this as a variable declaration.
You can also declare multiple variables at once. Just separate each variable name with a comma.
var x, y, z;
This declares variables x, y, and z all at once. Don't forget the semicolon ; at the end.
Variable names are sometimes referred to as identifiers.
In everyday conversation, "variable name" is the more common term, but in more technical reference books you'll sometimes see "identifier" instead.
Note that "identifier" is actually a broader term — it refers to any name that uniquely identifies something within a set, including not just variable names but also function names, parameter names, and so on. Good to keep in mind.
In JavaScript, variable declaration isn't strictly required. You can jump straight into using a name as a variable without declaring it first.
// You can assign to a variable directly like this a = "test";
However, doing so causes the variable to be treated as a global variable rather than a local variable, which can lead to unexpected bugs. Because of this, it's standard practice in JavaScript to always use var for variable declarations. In fact, the real purpose of var is to declare a variable as a local variable.
This gets a bit complex, so we'll cover it in more detail in a later article. For now, just remember: always declare your variables with var.
Still with us so far?
Now, there are a few rules to be aware of when it comes to variable names. In JavaScript, you can't just use any name you like — there are naming rules to follow. Here's what they are:
- Allowed characters: Unicode characters,
$(dollar sign), and_(underscore) - The first character cannot be a digit
- Names are case-sensitive
- Reserved words cannot be used
Let's go through each one.
First, allowed characters: _ (underscore) and $ (dollar sign) are both fine to use as-is.
"Unicode characters" might be unfamiliar. Unicode is a standard that encodes all the characters used in the world into a single character set — in plain terms, that means everyday characters like English letters and Japanese characters. If you're typing in UTF-8, you're already using Unicode characters, so there's nothing special to worry about when writing JavaScript.
Next, the first character rule. For example:
var 8test;
This is invalid — a digit can't be the first character. Note that _ and $ are both allowed as the first character:
var _x; var $;
These are perfectly valid. That said, using $ as a variable name is best avoided — the extremely popular library jQuery uses $ as a function name, so naming conflicts are possible.
Next up, case sensitivity. Here's an example:
var oBj; var obJ;
In JavaScript, oBj and obJ are treated as two completely separate variables. Whether a language is case-sensitive or not varies by language — for instance, MySQL (a type of database) does not distinguish between uppercase and lowercase by default unless you configure it to. As you pick up more languages, this can get confusing, so it's worth keeping in mind.
Finally, reserved words. Reserved words are names set aside for features that may be added to the language in the future. All reserved words are off-limits as identifiers like variable names, to prevent conflicts.
Here's why that matters: take class — a keyword used for implementing inheritance, a feature found in virtually every other object-oriented language. If JavaScript later adds inheritance support using class, but older code already used class as a variable name, running that old code in a newer environment would produce completely different behavior than originally intended — and all that old JavaScript would effectively break. That's why reserved words can't be used as variable names.
Here are some reserved words in JavaScript. You can't use these as variable names. Note that this list isn't exhaustive.
- class
- enum
- export
- extends
- import
- super
For the full list of reserved words, the Mozilla Developer Network (MDN) is a good reference — the folks behind Firefox.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
If you're not sure whether a name is reserved, a quick search before using it is a good habit. Over time, you'll build an intuition for what's okay and what isn't. Keeping notes can help.
JavaScript variable names are written in Unicode, and Unicode includes Japanese characters.
So — somewhat surprisingly — you can actually use Japanese in JavaScript variable names.
var 変数;
This works without any issues.
That said, using Japanese in JavaScript is considered a novelty, and variable names should use half-width alphanumeric characters in practice. Delivering JavaScript with Japanese variable names to a client would likely raise some eyebrows. Think of it as a fun bit of trivia rather than something to use in real code.
And that covers variable declaration. This article ran a bit long, so let's wrap up here. Next time, we'll continue with an overview of variables.
See you in the next one!
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
