JavaScript #6 — Defining Variables

These JavaScript articles are written for people who are interested in coding and are meant to provide an introduction to the programming world.

We are going to learn how to define, modify and use variables using the JavaScript programming language in this article. In other words, you are going to learn about the syntax of JavaScript that relates to variables.

Variables

Variables are containers for storing data values. Variables have to have a name and have to follow specific rules.

Do not try to run the code samples in this section, just read and try to understand how variables are defined in the JavaScript programming language.

Here is a simplified syntax of JavaScript for creating variables. First, you need to specify your intent to create a variable. This is done by JavaScript keyword let. let keyword is saying to JavaScript — I want to create a variable, so expect space and then the name of a variable, as follows let myVariable. It is allowed to create variables without a value because we might not have the value yet, but we are going to get it later in the code.

let myVariable;

If you create a variable like above, it has no value assigned. The assignment of a value to a variable is done by using = symbol that is followed by the value we want to store in the variable.

let myVariable = 1;

The last thing we can provide is ; symbol. ; is an optional symbol, you can omit it in case every variable is on its own row. That means that it is OK to do the following.

let myVariable1 = 100
let myVariable2 = 200

But our code would fail to run if we would put the two lines mentioned above on the same line.

let myVariable1 = 100 let myVariable2 = 200

; tells JavaScript that we are done with the variable declaration. If you would like to define multiple variables on one line you would need to put ; between them. This is just hypothetically speaking because this is not something you would like to do normally as it makes the code less readable.

let myVariable1 = 100; let myVariable2 = 200; 

Hands-on

We are going to look into how to create and print out a numeric variable.

Let’s open VS Code editor and get into it.

Click on “New file” inside VS Code.

Let’s save the file and give it a name. Press Cmd+S (for Mac) or Control+S (for Windows). Then select or create a folder where do you want to keep your code. I have created a folder “programming”. Then type the name of the file variables.html. and click on the Save button.

A variable is something like a value holder we can give a name. Let’s say we would like to work with the age of a person called John in our code. We would want to create a variable named johnAge that we would assign a number that equals John’s age. Let’s say John is 24 years old in the following code sample.

<script>
  let johnAge = 24
</script>

Now we want to see what is John’s age in the web console, so we are going to print it out.

<script>
  let johnAge = 24
  console.log(johnAge)
</script>

Have a look at how to write and run the code described above.

Rules for creating variables

Congrats on your first numeric variable! Let’s look at the rules for creating variables to learn more about the JavaScript syntax (a.k.a grammar). Remember, if you want to use a programing language to write programs, you need to learn its grammar.

You do not need to put the code below into your code editor yet. Just have a look and try to remember what you can and cannot do.

Variables must be identified with unique names.

let a = 1
let b = 2

let a = 1
let a = 2

Variables can be short names (like x and y) or more descriptive names (age, sum, totalVolume).

let x = 1
let age = 25

Names can contain letters, digits, underscores, and dollar signs.

let number1_000 = 1000
let _fancyVariable = 123
let $isCanDoThis = 14

let this will not work = 1
let this.will-not?work = 2

Names must begin with a letter

let number1 = 100

let 1number = 1

Names are case sensitive

For example, y and Y are different variables.

let y = 1
let Y = 2

Reserved words (like JavaScript keywords) cannot be used as names.

For example, let is a reserved JavaScript keyword to define a variable and thus a variable cannot have such a name

let x = 2

let let = 1

IMPORTANT: If you create a variable with an invalid name, then VS Code editor is going to underline the invalid code to help you. VS Code is saying, “Look, this underlined code does not comply with JavaScript grammar. It will NOT run for 100%”. Try to put an invalid code from above into the script and see how the editor underlines invalid variable names with red color.

Final words

Congrats, you have learned a lot today!

The next step is to learn how to work with variables. We are going to look at an example, so you will be able to decide, on your own, when you need to create a variable in your code.

Next Steps

JavaScript #7 — Using Variables