JavaScript #7 — Using Variables

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

You are going to learn why and when you should use variables.

Why and when to use variables

Let’s start with a generic statement about variables: “We want to define a variable and set a value into a variable whenever we need to keep that value, so we can use it later on”.

It is tricky to understand this statement because it is too generic. Continue reading and when you are done with this chapter, come back and read the statement again. The statement should make more sense.

We are going to break down the statement about variables into multiple parts and explain it using an example.

Example

Imagine we need to build a program that greets the user. For example, if the user’s name is Barbora, the program needs to greet that user with a “Hello Barbora” message. To greet the user, the program needs to know the user’s name. That means we need to write some code that is going to ask the user for the name.

Never start coding if you are not completely sure what you want to do. It is more efficient and effective to think ahead and then, with the end goal in the mind, take small interactive steps to achieve it. First, design what is user going to see and how the user is going to interact with your program. Second, create the file for the code. Third, write the first line. Fourth, try to run it. Fifth, add one more line and try to run it. And so on and on, until you end up with the final product.

Let’s think about what is the user going to see first. When we refresh the page in the web browser, the program is going to ask the user for the name. The form to enter the user name is going to look something like this.

After the user inserts his name, we are going to display the greeting in the web browser console.

Now we know what we want to achieve, which means that we can start coding.

Let’s open VS Code editor and get into it. Click on “New file” inside VS Code and save the file as greeting.html.

First, we are going to ask a user for the name. We are going to use something we didn’t use yet, the prompt function. The prompt function is going to tell the browser to open an input window with the “What’s your name?” message.

Read more about prompt function here.

<script>
  prompt("What's your name?")
</script>

Before moving on, run the code in the browser and observe what it does.

The browser opened a window and you were able to insert the name. The prompt function returned that name. But then, the program ended and we lost the name. But we don’t want to lose the name, we want to use the name to construct the greeting message!

This only means one thing. This is the situation we need to define a new variable where we can store the name provided by the user.

Watch the video before you start defining the new variable. It is going to show you what exactly happened, step by step.

Here is the code from the previous video, type it into your greeting.html file and try to run the code yourself.

<script>
  let name
  name = prompt("What's your name?")
  console.log(name)
</script>

We are almost there, we can see the user’s name in the web browser console. But it is not exactly what we wanted. We want to see “Hello Barbora”. That means we need to construct the greeting message now.

Watch the following video that is going to show you how to connect “Hello “ text with the name variable, while variable name holds (a.k.a stores) the name provided by the user.

Here is the code for your reference. Rewrite the code into your greeting.html file and run the code. Instead of typing Barbora, try to insert your’s or any other name.

<script>
  let name
  name = prompt("What's your name?")
  console.log(name)
  let message = "Hello " + name
  console.log(message)
</script>

Final words

Congratulations! You have successfully created a variable that you used to store the name of a user.

Here is how you could do the whole example from the begging to the end, watch it for your convenience.

Here is the code from the previous video in case you need to double check its correctness.

<script>
  let name = prompt("What's your name?")
  let message = "Hello " + name
  console.log(message)
</script>

You are going to learn more about the capabilities and syntax of variables in the next article.

Next Step

JavaScript #8 — Mastering Variables