JavaScript Syntax and Statements

The reason I put the two topics Syntax and Statements together is to clarify the difference between the two. Most of the time they are confused and mixed up in understanding and its meanings.

Syntax

The set of rules known as JavaScript syntax specifies how JavaScript programs, statements, and code must be written. JavaScript Syntax defines the structure of a statement or code.

To clarify let’s take a look into two scenarios.

var x = 25; // Syntax to declare a variable and assign the value 25 to it. Valid
var y = 20; // Another syntax Valid

Let’s write the above Syntax of declaring two variables in one line.

var x = 25; var y = 20; //  Valid syntax declaring two var in single line.

The above two examples are valid JavaScript syntax, where JavaScript expects the statements to be terminated or end with a newline or semicolon (;).

Now let’s put the above one-line example code in a different way.

var x = 25 var y = 20; // Syntax of declaring two variables in one line. Invalid

The above example is an invalid JavaScript syntax, where the declaration of variable x is not terminated properly e.g. with a newline or semicolon (;). In conclusion, JavaScript needs a structure of a valid set of rules (syntax) to execute a statement or code.

Statement

Statements are sets of instructions to tell the JavaScript engine to perform certain actions.

Let’s suppose we have a few sets of instructions.

var a = 5; // Statement 1
var b = 7; // Statement 2
var c = a * b; // Statement 3

Here is an example of embedding and running the above statements in an HTML document.

<!DOCTYPE html>
<html>
	<head>
		<script>
			var a = 5; // Value assignment Statement 1, declaration of variable syntax
			var b = 7; // Value assignment Statement 2, declaration of variable syntax
			var c = a * b; // Multiplication & assignment Statement 3	
		</script>	
	</head>
	<body>
		<h1>JavaScript Syntax and Statements</h1>
		<p id="jss-example"></p>		
		<script>
			document.getElementById("jss-example").innerHTML = "The value of c is " + c;
		</script>				
	</body>
</html>

Explaination

In the above example, we have 3 sets of instructions each representing a statement.

The 1st statement declares a variable (a) using the operator (=) to perform an action of assigning a value (5) to it. Similarly, in statement 2 action is performed to assign value (7) to (b).

  • In statement 3 multiple actions are performed to multiply (a and b) and assign the resulting value to (c).
  • JavaScript statements are groups or blocks of multiple Components to instruct the computer to run or execute a code and get a result.
  • Statement Components: Values Operators Expressions Keywords comments.

From the above example statements:

  • Keywords: var.
  • Operators: (= and *).
  • Values: (5, 7).
  • Expressions: (a * b).
  • Comments: // Statement 1

Components will be discussed in detail in coming tutorials.

Good practice

Always use Semicolons for line, Syntax, and Statement termination.
JavaScript does not require semicolons strictly. But it’s a good practice to use Semicolons.
It will help when converting JavaScript to minify format.
It will help in troubleshooting, readability, and maintenance.
In some cases, JavaScript does require a semi-colon, e.g. for some functions to work JavaScript does require the previous statement to be terminated properly.
So it’s good to make use of semi-colon as a standard practice.