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

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

Chapter 3. JavaScript Basic Syntax

JavaScript is a programming language. And just like languages, JavaScript has its own grammar rules named syntax. Going with this analogy, statements are JavaScript sentences. And order for it to be understandable, it must follow the language’s syntax or grammar.

One of the syntax rules in JavaScript is that every statement must end with a semicolon (;) or a statement separator (some call JavaScript’s semicolon as a statement terminator, but it has a slight difference from separators).

The semicolon’s job is much like a period or semicolon’s function in the English language. It separates statements. It allows the browser to distinguish where a statement ends and where another statement starts. For example:

> var x;

< undefined

> var y;

< undefined

> _

The semicolon separates statements, right? So, if that is the case, can you put two statements in one line? Try it:

> var x; var y;

< undefined

> x;

< undefined

> y;

< undefined

> _

It worked. What will happen if you removed the semicolon?

> var x var y

xu Uncaught SyntaxError: unexpected token var (…)

As you can see, you received an error. After all, the console was expecting a semicolon, a line break, or other things, but not a keyword.

Wait. That is confusing, right? How come the earlier examples did not require you to use semicolons, yet they worked anyway? Here is the answer:

Unlike most programming languages, JavaScript is not strict when it comes to statement separators. Just adding a linebreak alone is enough for the parser to understand that your statement is finished, and you are ready to add another statement after it.

Also, when you run a JavaScript code without semicolons, the browser will automatically generate them for you. Despite being okay with the absence of semicolons, they are still needed to produce readable and clean code.

Even if your code will run without semicolons, it is advisable that you use them. It enforces clean and readable codes. Also, omitting these statement separators may lead to unexpected issues.

In the future releases of JavaScript/ECMAScript, it is possible that JavaScript will become strict with separators.

Case Sensitivity

Another thing that you must remember is that JavaScript is a case sensitive programming language. Aside from being case sensitive when it comes to identifiers, JavaScript is also case sensitive to other parts of your script as well, especially in keywords. For example, the keyword var is different from VAR.

> var x;

< undefined

> VAR x;

xu Uncaught SyntaxError: unexpected identifier (…)

In here, since VAR is not the var keyword, the browser thought that VAR was an identifier for a variable or function. And unfortunately, unlike the keyword var, the identifier VAR does not exist since you did not declare or assign any value to it. Due to that, the console did not expect the identifier VAR in the code.

Keywords

The term keyword has been mentioned time and time again in the previous section. Keywords are reserved words or identifier in a program. They can be either pre-existing variables, methods, functions, or objects in the program.

The keyword var is a perfect example. The keyword var is a built-in function or command in JavaScript to allow you to declare and create variables. Just like any keywords or reserve words, you cannot use them as identifiers. For example:

> var var;

xu Uncaught SyntaxError: unexpected token var (…)

> _

When using the keyword var, the parser will expect that the next word or entity after the keyword will be an identifier. Since var is a keyword and not an available identifier, the console returned an error.

Of course, the same thing will happen if you do this:

> var = 2;

xu Uncaught SyntaxError: unexpected token = (…)

Just like before, the console did not expect the assignment operator to be there. Hence the syntax error appeared.

Comments

Before you proceed on placing your script on your webpage, you must know about JavaScript comments or commenting. You might be already familiar with comments, thanks to your HTML background.

JavaScript comments work like the usual HTML comments. However, there are some differences.

The main difference is that the syntax in creating comments in JavaScript starts with two forward slashes (//) or a forward slash and an asterisk (/*) and ends with an asterisk and a forward slash (*/).

For those who are unfamiliar with comments, comments are lines of codes that are ignored by the parser or the browser. Any lines of codes or comments that are included in the comment will not be processed and the error on those lines will not be brought up.

For example:

> // Test

< undefined

> _

In the browser’s developer console, you might notice that it replies an undefined. Do not worry; it is still unprocessed. Here is another example:

> // var testVariable = 2;

< undefined

> testVariable

xu Uncaught ReferenceError: testVariable is not defined (…)

Despite responding to the comment line, the code inside the comment was not processed. Hence, the browser returned an error when the code tried to call or reference testVariable. On the other hand, even if you fill the comment with erroneous code or anything, no error will be returned.

Function of Comments in Scripting or Programming

Comments serve an essential function in script or program development. Primarily, they are used for documentation. In case you are going to share your script to other people, providing them with inline documentation of what your script does, description of the author, and licensing information will be beneficial to you and them.

Here is an example comment block in a popular JavaScript library, jQuery:

/*!

* jQuery JavaScript Library v1.11.3

* http://jquery.com/

*

* Includes Sizzle.js

* http://sizzlejs.com/

*

* Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors

* Released under the MIT license

* http://jquery.org/license

*

* Date: 2015-04-28T16:19Z

*/

Aside from providing documentation and meta information, comments can be used to disable statements temporarily. Instead of deleting a statement, you can just place two forward slashes to disable it.

It is advantageous because it allows you to “undo” changes that you make in the future in your code. Also, it can be useful in debugging and finding erroneous statements in your script.

In addition, comments can be used as bookmarks within your code. With the help of the search function, you can just move around your code and find the sections that you want to view. For example:

<script>

. . . multiple lines of code . . .

// codeForTextCheck

. . . insert code here . . .

</script>

By using the search function in your editor, you can instantly go to the codeForTextCheck section. This is beneficial for people who have thousand lines of codes in their scripts.

Comments can be also used to noting information and putting reminders. If multiple people are editing the script, you will have an easier time if you use comments to give out reminders with the code you create.

Two types of comments

There are two types of comments in JavaScript. The first type is single line; the second type is multi-line.

Single line comments use the two forward slashes. They can be placed almost anywhere in your script. The browser will ignore any text after the two slashes and will resume execution on the next line.

On the other hand, multi-line comments use forward slashes and asterisks. To start a multi-line comment, put a forward slash and an asterisk (/*). All text after the slash and asterisk will be regarded as comments even if they are separated with a line break. To end the multi-line comment, an asterisk and slash must be placed (*/).