EN

JavaScript・First steps

What is a variable?

The "variable" is the first thing you meet in programming. It's not hard. It's just a box you've given a name.

Once you start learning JavaScript, you quickly meet the word “variable.” No need to tense up. A variable is a box you’ve given a name.

Let’s write one

let name = "Shima";
PartMeaning
letThe signal “I’m setting up a box”
nameThe name you gave the box
"Shima"The contents you put in the box

From now on, writing name calls up the “Shima” inside. For example, in a spot where you use the same name over and over, instead of writing it out each time you just call name—that’s the joy of tucking it away in a box.

You can put numbers in too

It’s not only text that fits in a box. Numbers go right in as well.

let age = 3;
let city = "Hokkaido";

Wrap text in " ", and write numbers as they are. Remembering just this difference is enough. If you keep a number in there, you can later use it for calculations like “add 1.”

The contents can be swapped later

The word “variable” comes from “able to vary.” True to the name, the contents can be swapped later.

let count = 0;
count = 1;

A box that first held 0 now has 1 put back in. It’s exactly because this “swap” is possible that you can build movement like “the number goes up each time you press.”

There are a few rules for naming

I said “you can name it however you like,” but there are just a few promises.

  • You can use plain letters and numbers (and _). You can’t start with a number, like 1st
  • You can’t put a space in the middle (my name is an error)
  • Uppercase and lowercase are treated separately (name and Name are different boxes)

Since you can’t use spaces, when you want to join two or more words, you capitalize the first letter of each word from the second onward and connect them. It looks like thanksMessage (thanks + message). Because the uppercase parts look like a camel’s humps, this is called camelCase, a classic way of writing in programming.

The box you don’t swap: const

A close cousin of let is const. It’s written the same way, but a box made with const can’t have its contents swapped later.

const city = "Hokkaido";

“Use const for a value you don’t plan to swap, and let for a value you do plan to change”—that’s the guideline for choosing. In real code, situations where you use const come up more often than let. When in doubt, try const first.

Summary of this lesson

  1. Variable = a box you’ve given a name
  2. Set up a box with let name = contents;
  3. The contents can be swapped later (that’s exactly why it’s called a “variable”)
  4. For a box you don’t swap, use const. When in doubt, start with const

Try it: tuck a thank-you message into a variable

Set up a script.js on Shima’s page, and tuck away, in a variable, the thank-you message you’ll use later. Create a new file in the same folder as index.html and style.css.

(working folder)
├─ index.html
├─ script.js   ← the one we make this time
└─ style.css
const thanksMessage = "Thanks for your message! It reached Shima.";

Then make index.html load the script.js you just created. Add this one line right before </body> (forget it, and nothing you write from here on will make the page react at all).

  <script src="script.js"></script>
</body>

Notice we’re using const, not let. const is also a “named box,” but you use it when you want to make a box whose contents you won’t swap later. The thank-you message stays the same from here on, so const fits perfectly here.

Nothing happens on the screen yet. We’ll use this message when we actually show it on the screen in a later lesson. For now, get a feel for this: “tucking a word you’ll use later into a variable ahead of time.”

FAQ

Should I use let or const?
When in doubt, const. Think in this order—switch to let only when you later want to swap the contents—and you'll cut down on 'oops, I overwrote it by accident' mistakes.
Can I use Japanese for variable names?
You actually can, but it's not common. Since code all over the world is written with English names, it's best to get used to English-word names like age or name.