Variables JavaScript

In this article we will talk about variables in JavaScript and we will also introduce the concept of constant. These are some basic concepts that are important to learn right away.

Variables and constants JavaScript – first example

Let’s take an example by creating a simple script where we insert:

• the pigreco constant where we store the constant value 3.14;
• a variable radius where we store the value of the radius;
• and the variable area where we store the result of the operation.

After making the calculations, the result will be displayed on the web page.

We have chosen to use the variable data for the radius as it is generally a value that is entered in input and from time to time it can vary, but in this example it could also be a constant. Recall that a constant value theoretically cannot be changed and in fact it is so in some programming languages. In fact, in JavaScript, the use of the const keyword has a broader sense of the term, as we will see in more detail further on in the tutorial.

For convenience, we use the JavaScript write method to write in the html page, as in the example below:

//input
const pigreco = 3.14;
var r = 4, area;

//operations
area = pigreco * r * r;

//output

document.write('The area of ​​the circle of radius ' + r + ' is: ' + area);

As you can see in this example I have declared in the same line the variable r and area, this only to compact the code, it could in fact also be written in this way:

var r = 4;
var area;

Variables and constants JavaScript – second example

In this second example we have the user enter the radius value and, after clicking on the ok button, the program will calculate the area of ​​the circle.

However, this method assumes knowledge of the getElementById method, explained in this lesson: getElementById method.

Then we create an input for the text and a button that calls the function calculate when clicked.

The compute() function initially takes care of declaring the lazy constant. Then it detects the radius input data through the getElementById method which returns the element of the HTML page, having the id equal to what is specified in brackets.

Once this value is obtained, the function calculates the value of the area. Then, again using the same method, getElementById, we display the value obtained in paragraph p.

So here is the complete code written in a separate JavaScript file:

function compute() {
      const pigreco = 3.14;
      var r = document.getElementById("r").value;
      var area = pigreco * r * r;
      document.getElementById("result")
       .innerHTML ="The area of ​​the circle of radius " + r +' is:' + area;
}

In the html page, therefore, we insert this code, in addition to the link to the javascript file:

<h1>Varaible example</h1>
<input type="text" id="r">
<input type="button" id="ok" value="ok" onclick="compute()">
<p id="result"></p>

Variables and constants JavaScript – third example

In this example we store integer values ​​in two variables (a and b) and then calculate the average.

So we need the variables a, b, sum and mean. So here’s the example JavaScript code:

var a = 5, b = 6;
var sum = a + b;
var average= sum / 2;
document.write('Average of  ' + a + ' e ' + b + ' is '  + average);

We could also not use the sum variable as we no longer use the sum value within the program. So I use a generic variable called operation.

So we could also write like this:

var a = 5, b = 6;
var operation = a + b;
var operation = operation / 2;
document.write('Average of  ' + a + ' e ' + b + ' is '  + operation);

In this lesson we talked about variables and constants in JavaScript, in the next lesson we will talk about conditional statements and give examples.

Some useful links

JavaScript tutorial

JavaScript Calculator

Object in JavaScript

For in loop

Caesar cipher decoder

Slot Machine in JavaScript