Javascript: Ultimate Guide to Javascript Programming (2016)
Chapter 2. Discovering Variables
Now that you already know how to write, format, and process data in JavaScript language, it is now time for you to learn about variables. In this chapter, you will learn how to store values using variables. You will not be able to do it without learning how to write variables first. Without further due, let us begin our journey to the world of variables.
The Storage of Values
In order to manage data in JavaScript language, you to store them inside variables. Let me show you a basic assignment syntax for a variable we shall name as “Learn Easy”.
|
>varlearnEasy = 6 |
The code “var” here refers to the variable keyword. This commands the browser to reserve a specific space for this variable. The next one is “learnEasy” which refers to the variable name. This is the name we will be assigning to this example variable syntax. The equal sign here serves as the assignment operator. Notice that we only use a single equal sign here unlike the double equal signs that we used previously for comparison. Lastly, the number 6 here serves as the value which we are storing inside our variable named as learnEasy.
Now that we have a stored value inside a variable, we can now call it using the variable name alone. Asserting the variable name “learnEasy” in the console will give us the assigned value as its output.
|
>learnEasy → 6 |
When assigning names in our variables, there are rules we need to follow in JavaScript language. These rules are as follows:
1. No spaces in the variable name. (E.g. var learn easy, var sweet java)
2. No digits at the beginning of the variable name. (E.g. var 4life, var 1piece)
There are special characters you can use in the variable name. But, it is better to use simple names to make JavaScript languageless complicated.
1. You can use underscores ( _ ) in the variable name. (E.g. varlearn_easy)
2. You can use the dollar sign ( $ ) in the variable name. (E.g. varlearnEa$y)
3. You can use both underscores and dollar signs together. (E.g. varlearn_ea$y)
Here is what a good variable name should be. It is known as the “Camel Case” which begins with lowercase and the first letter of the following words in uppercase.
|
>varsimpleAndClean |
If you like to reuse a variable name to store a different value, then you can simplify everything by adding a number at the end like this.
|
>var simpleAndClean2 |
Changing Assigned Value in Variables
Let us go back with our example variable learnEasy. At the moment, we have the numerical value 3 assigned to it. Let us say, for example, you want to change the value assigned to that variable. You can easily do it by entering the variable name, followed by the assignment operator, then followed by the new value you want to assign to the variable.
|
>learnEasy = 13 |
Notice that we no longer use the variable keyword here. This is because the console remembers that the value is already existing in its memory. Once you call for this variable, you will now get the new value assigned to it.
|
>learnEasy → 13 |
You may also change the value of an existing variable using its own variable name in mathematical expressions. The format should be the variable name followed by the assignment operator. You insert the mathematical expression after the operator. It should go like this.
|
>learnEasy = learnEasy + 16 |
This will change our store value to 29 since the expression calls for the current variable value, which is 13, plus 16. This makes it 29.
There is another way to do this. We will end up changing the stored value using a different syntax. It goes like this.
|
>learnEasy += 2 |
The += operator here commands the console to add the current value of the variable to the number 2 first. Then it commands the console to store the new value to the same variable afterward. Since our current value is 29, we will now get 31 as the new value stored in the variable learnEasy.
All operators can be used in this case using both formats.
Storing Strings in Variables
Aside from numerical values, you can also store strings inside variables. The syntax uses the same format. Let us create a variable to welcome our guests.
|
>var hello = "Welcome to my website!" |
By storing the string in a variable, you no longer have to type lengthy strings. Just call the name of the variable and the console will give you the stored string. This is how it should appear.
|
>hello →“Welcome to my website!” |
You can also use the length property using the variable name. The output value you will get is the same with adding the length property after the string. Let us take, for instance, a variable named “fox” which contains the string “The quick brown fox jumped over the lazy dog”. We simply add .length after the variable name and we will have the following lines on our console:
|
>fox.length → 44 |
Finding Characters in Strings
The JavaScript language has its own way to index each character inside the string. Let us take the variable “hello” as an example.
“Welcome to my website!”
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1819 20 21
When indexing, JavaScript indexes the first character using the numerical value 0. This is different from the .length property since JavaScript counts the first character using the numerical value 1. In other words, the last index number is always 1 value less than the length value.
Using the string stored in hello variable, we have 22 for length property and 21 as the last index number. Now, why do we need the index number you ask?
We use it to find specific characters within the string. This is done using the charAt( ) method which we place after the variable just like the .length property. For instance, we want to know which character falls under index number 20 from our variable hello. We simply type the following:
|
>hello.charAt(20) → “e” |
Creating Messageswith Variables
Now that you know how to store values inside variables, let us now create messages using variables. Let us create one more variable to combine with our existing variable “hello”.
|
>var enjoy = "Please enjoy your visit!" |
Now that we have our second variable, let us now combine them and create a new variable that will serve as our welcoming message.
|
>varwelcome = hello + enjoy |
This will give us the following output whenever we call for the variable welcome.
|
> welcome →"Welcome to my website! Please enjoy your visit!" |