1. Variables

Let's get to know the basics of this most popular language and see how easy it is to program in it.

Variables

A variable is the basic unit for storing data in JavaScript. It is declared by entering the keyword var (shortcut from variable) followed by a name of the variable. Then, after the equality sign (the assignment operator „=“), you give the value you want to store in it.

var number1 = 5;
var number2 = 2;
var number3 = number1 + number2;

• the variable named number1 stores the value 5,
• the variable named number2 stores the value 2,
• the variable named number3 stores the value 7 (number1 + number2, so 5 + 2).

var apple = "apple"; // now the variable apple stores the word "apple"
apple = "pineapple"; // now the variable apple stores the word "pineapple"

You can imagine a variable as a box. With the use of var, we create it, and after the equality sign we state what we want to put into it. If we want to put a new thing in it, then we do not create it all over again. We simply point it out and declare what we put in this time.

It should be remembered that the name of each variable should be unique. It can be a short name (x or y) or - which is in accordance with good practice - more descriptive (name, city, age).

• may contain letters, digits, underscores and a dollar sign,
• should start with a letter,
• can start with $ or _,
• are case sensitive - they distinguish between uppercase and lowercase letters (a and A are two different variables),
• if after declaring a variable we do not assign any value to it, then it will take the value undefined.

In JavaScript, the "=" sign is an assignment operator, which means that we do not use it as a normal equality sign. If you want to compare two variables and thus find out if they are the same, use "==", the double equal sign (this will return true or false).

Variables can store different types of data. The most important of them are:

Number - all numbers, e.g.

// variable numberOfChild stores the number of children in the class
var numberOfChild = 12;

String – words or strings of characters, e.g.

// variable message stores the text
var message = "This is a sentence.";

Boolean – true of false, e.g.

// variable loggedIn stores information if a user is logged in (true = yes, false = no)
var loggedIn = true;

Remember that string (words) variables should always be in quotes. Take a look at the following differences:

• 22 - variable of the numeric type (number),
• "22" - string variable (word),
• true - boolean (logical) variable,
• "true" - string variable (word).

Exercises

Before you begin, go to repl.it and create an account by clicking on the “Sign Up” button in the upper right corner. Then, follow the instructions on the page to verify your account.

Did you succeed? Great! Now you can proceed to the exercises.

Remember to click "Fork" each time you go to a page with an exercise. This will allow you to make changes to the code. Always select the file "index.js" (in the menu on the left), unless the instruction tells you otherwise.

Exercise 1

Take a look at exercise 1 in the link below:

Before you start: select the index.js file (in the menu on the left) and press "Run" (above the code window) to generate the code. Do not change the statement document.getElementById ('ex1').innerText. It is for the variable to be visible immediately after the text "Result of exercise 1:".

Look at the variable after the "+=" sign and the variable declaration line up. Can you tell why the text underneath does not display? Correct the code so that everything works properly.

Tip: If you are stuck, read the paragraph with variable names, look at the code from exercise 1 and compare both lines.

Excercise 2

As we said earlier, variables are declared using the keyword "var" followed by the name and then followed by its value after the assignment operator (sign =). If the value is in quotes, it means it contains a word/text (string).

In the code for exercise 2 you will find a variable named favoriteLanguage. Assign a text (string) to it with your favorite programming language (e.g. JavaScript). If everything is fine, it will be displayed below.

Run exercise #2

Excercise 3

In variables, we can also store numbers on which we can then perform arithmetic operations (+, -, *, /). In the code for exercise 3 you will find a variable named result, which adds variables number1 and number2 and is displayed below the equal sign. Give variable number1 and number2 numeric values so that the result of the equation underneath is correct.

5 + 12 = NaN

Run exercise #3

Tip: If numbers do not add up correctly, they stick together - that means they are unnecessarily surrounded by quotes. In this case, the computer treats them as strings/ text rather than numbers.

Excercise 4

In JavaScript code, exercise 4 has another type of variables - boolean, which takes only two values: true or false. Typically, variables of this type are used to control our program and tell it whether it has to do something or not.

Run excercise #4

Complete the variables so that the program knows what the weather is like. If you complete everything with true or false values, you will see below how you should prepare before leaving the house. One of the given variables has no logical value.

Tip: Remember to put only text (strings) in quotes. We leave logical values without such signs.

Excersise 5

The next type of variables are arrays. In a simplified way, we can say that these are sets of other variables (string, number, boolean, etc.). They are created in the same way as other variables, except that after the equality sign we write a square bracket in which we insert values separated by a comma. The variables in the array can be accessed by specifying the name of the array and the index number in which the particular value is. Remember that arrays are numbered according to the American standard, that is from zero and not from one.

This is an example of an array:

var array = ["pineapple", 5, "mirabelle"];
//The index 0 contains the string "pineapple", index 1 – number 5, and index 2 – "mirabelle".

Check the link below:

Find the array. Fill it in accordance with the following requirements:

• the array should have exactly five elements,
• in index 0 there should be a number (e.g. your favorite),
• in index 1 there should be a text string (e.g. your name),
• in index 2 there should be a logical value,
• in index 3 there should be any text,
• in index 4 there should be a number.

This is not all that you can learn about arrays. You will learn more advanced topics later.

Next chapter: Operators »