JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 2. Variables, Identifiers, and Statements

Programming and scripting are technically alike. Usually, the term programming is used in creating programs that are compiled into an executable binary file, which is unreadable to humans. In layman’s term, the lines of code you will write will be converted to machine language that your computer can easily understand.

On the other hand, the term scripting is used in creating programs that are translated into machine code when needed. Unlike programs, scripts are uncompiled code; meaning, you can easily edit or read them whenever you like, even if it is being executed.

In JavaScript, will be scripting. When you write your code and it is executed, it will be left as is. The browser reading your code will be the one who will handle the translation for the computer. Basically, you will just write the script, and then just let it run on the browser as soon as you are finished.

Writing Code

Writing a script is not that different from writing a script for a play. When writing a script for a play, you will put instructions for your actors in paper. In writing a script for a web, you will write instructions for all objects and elements involve in the web page. Those objects are your browser, the page itself, and HTML elements, among others.

And of course, the biggest thing that separates writing a script for a play and writing a script for a website is the language. Most probably, the language you will use for the play is English, a language that you are already familiar with. For the web, you will use JavaScript, a new language you have no idea on how to speak or write with.

When learning a language, you often start with the basic parts of sentences. In English, that would be the noun, pronoun, verb, adjective, etc.. In JavaScript, you will start learning the basic parts of programming and the language itself including variables, assignment operators, expressions, and keywords.

So, do not fret. It will not be as hard as you think. Take a deep breath and proceed to the next topic.

Variables

In the previous chapter, the equal sign was mentioned and used. It seems that you are just playing some Math on the console, right? Now, the next lesson will be about variables. With a decent introduction to scripting and coding, you will surely have an easier time understanding variables.

Variables are storage entities within a program. They store information that will be used later on the program. It makes tracking of useful and crucial values in a script easier. Also, it makes it easier to use a value repeatedly, without remembering and typing the value exactly every time you need it.

In the English language, variables are like pronouns. For example, your noun is “John”. To make it easier to refer to him, you can just use the pronoun he, him, or his in your sentences. That is just how simple variable works. Of course, other uses can be incorporated with variables.

On the other hand, you must be already familiar with term variable. After all, your Mathematics teacher should have mentioned it a lot when you were in high school; you would have encountered it in college as well.

The concept of variables in Math is similar with JavaScript variables or variables in programming — with a few notable differences. First, variables in programming do not only hold numbers. It can also hold or store text, arrays, and objects (more to that later).

You can create variables in JavaScript by using the var keyword or command. Type these lines in your console for example:

> var x;

Once you press enter, the console will reply with this:

< undefined

> _

At this point, variable x already exists. However, it is undefined. Google Chrome or your browser does not know yet what it is supposed to be. Will it be a number? Will it be a text? To define it further and store a value in it, you must use the assignment operator (=).

The assignment operator works like this:

> x = 2

< 2

> _

Once you press enter, the console will confirm that the number 2 has been assigned to variable x. To double check if it did, type this:

> x

< 2

> _

Note: To check the value of variables in the developer console, you can just type in the variable’s name, and the console will reply with the variable’s current value. Writing that on a script you will insert in your page will do nothing; take note of that.

When you call on variable x, the console will respond with its value. What would happen if you call on another variable?

> y

xu Uncaught ReferenceError: y is not defined (…)

> _

Note: The x in the second line represents a red x icon that signifies an error. It is not related to variable x.

Since y was not declared in the first place, the console returned a reference error. The identifier, text, or string y must be declared first with the var keyword in order to become recognized and “reference-able” by the console.

What will happen if you try to assign a value to an undeclared variable or identifier? Try this out:

> z = 3

What happened? Yes, the console accepted the assignment even if the var keyword was not used.

< 3

> _

As convenient as it may seem, you should not create and assign variables like this. This would open a can of worms once your code becomes bigger. Primarily, the main problem is that the scope of the variables declared this way would become messed up (more about scopes later).

Also, with the previous revisions of ECMAScript (ECMAScript 5 & 6), “use strict” has become available. This mode will enforce you to always declare variables to prevent errors.

As for now, stick with the usage of var. It is the proper way —unless you know the effects of not using var and you intend it to work that way.

Anyway, by declaring variable x, your web page and JavaScript codes can use it. Of course, declaring a variable is not enough to make it useful. You must assign a value to it as mentioned a while ago. Since it is typical for new (or even seasoned) developer to forget to use var, try to include it together when you assign a value to a variable for the first time. For example:

> var x = 2

< 2

> _

Identifiers

You have seen this term a while ago. An identifier is a combination of letters, numbers, or underscores that provides ‘names’ to variables, functions, methods, properties, objects, etcetera. To put it simply, identifiers are names and they make the management of all the elements in a program easier for programmers and developers.

To be technical, when you input this, var x, you are actually creating a storage allocation in your computer’s memory. That storage allocation is called a variable. Then you will name with the identifier x for you to easily remember that variable.

Without identifiers, you will need to get the address of that storage allocation or variable in your computer’s memory. And remembering memory addresses is not something you would want to do because they are confusing bunch composed of seemingly random letters and numbers.

For example, instead of remembering an address like #25 Hudson Street, Vaughan, Ontario, Canada, it will be much easier for you to remember the exact location by giving that place a name. If that is your friend George’s house address, then it will be easier for you to recall the location as George’s house. The same goes with identifiers and variables (and other program elements).

Case Sensitivity

JavaScript is a case-sensitive programming language (you will see this line a few times after this). What does it mean? It means that a difference in letter casing can result into errors. Also, it means that different letter cased identifiers will be treated as different entities in the program.

For example, variable x will be treated as a different entity from variable X. Due to that, make sure that you always mind how your spell and type your identifiers. Error caused by wrong letter cases can be a pain to find and fix, especially if you have hundreds lines of code.

Statements

At this point, you have already created valid statements. What are statements? Statements are lines of codes that perform a specific task or tasks that do not contain any error on them. However, in some cases, erroneous lines of codes are still referred to as statements in some cases.

In English, it can be considered that statements are synonymous with sentences. Statements in programming are just like sentences in English. To create a proper script for a play or story, you must know how to write comprehensible and proper sentences. The same goes with scripting.

How can you know if your statement is valid? First, if it follows the right syntax rules, it will be considered as a proper or valid statement, which will be executed by the browser or computer without any error. Syntax rules are just like the English grammar rules. More about JavaScript syntax rules will be discussed later.

One of the statements that you have typed on the console is var x. A simple declaration of a variable is already a logical and correct statement. It performs its specific goal, which is to establish variable x.

However, do not that some lines that you create in the developer console are not valid statements in JavaScript. Even if the console does not return any error when you input those lines, some of them will not work in actual code in web pages.

For example, you have played with some mathematical equations before in the console, right? Those equations are not valid statements. They are only available in the console as a learning tool — as mentioned a while ago.

Recap and Additional Information

Generally, you will be scripting with JavaScript. Your script can also be called source code — although, source code is usually referred to the content of your HTML document.

Your script will be composed by computer/browser instructions called statements. To make sure that your browser will do what you want, you must make sure that you create valid statements.

On the other hand, variable is one of many parts of a statement. Variables can contain almost any value that you and your browser can provide by using assignment operators.

To manage and remember your variables easily, you assign them identifiers, which is just a technical term for your variable’s name. Identifiers can also name functions, which will be discussed later.

And most importantly, identifiers are case sensitive. For example, the identifier GOOD is considered a different identifier with the identifier good.