Please refer to the official github repository of https://javascript.info here.
In this tutorial we will explore the concepts of JS code structure available here. We will try to explore in more detail and in terms a beginner can understand.
So, with this prior information lets begin another episode of Osblog's JavaScript Corner.
JavaScript code structure
Before going to the depth of learning JavaScript, we must know how the syntax is designed to understand. If a code is well designed, it is easy to handle, maintain and becomes efficient both for users and developers.
JavaScript Syntax:
Now in JavaScript, there are basically three fundamental aspects which defines the syntax:
- MVC architecture: The architecture represents the building block of JavaScript code which is the basic layout. It includes the interaction of models, views and controllers.
2.Maintainability: From the name we can understand, it explains how the code is maintained and improved.
3.Reusability: It explains the customization of the components.
Statements:
Consider the code below:
console.log("Hello, World!"
Here the closing bracket is missing.
Also a semicolon is missing.
Instead of producing the output, it will give a syntax error OutputUncaught SyntaxError: missing ) after argument list.
More information here.
Next let us check out the syntax of alert box function:
alert('Hello,world!')
This will display the normal 'Hello, world!’ in the alert box.
But we can also break the message or separate it using semi colon.
alert('Hello'); alert('World');
or better if we use it in separate lines.
alert('Hello');
alert('World');
Semicolon:
Semicolons are basically used among statements that implies JavaScript to treat each line as a separate statement. So after statement, a semi colon is a must.
Let us see the following example:
const now = new Date(); console.log(now);
Since two statements are in the same line, they are separated with a semicolon since both are different or the best option is to write it in two separate lines.
const now = new Date();
console.log(now);
For more info see this.
Lets see the next example:
alert('Hello')
alert('World')
Even this will work because JavaScript will interpret a new line as a semicolon by default but it doesn’t occur always especially when your code is a massive one.
Now consider this:
alert(3 +1+
2);
In this example, the new line won’t be considered as a semicolon so output will be 6.
This happens because the line ends will a mathematical expression which is commanding to perform the given operation.
If semicolon was given here, the expression would be incomplete. So these kind of errors must be avoided.
Let us see the structure below:
alert('square of the number:’) function square(number) { return Math.pow(number, 2);}
We will be doing the** function and return statemen**t later on.
Still, lets have a look at the above code snippet. Here it will throw an error at the beginning because JavaScript won’t be considering any semicolon here. It will consider the first line as single statement.
So the correct form would be:
alert('square of the number:’);function square(number) { return Math.pow(number, 2);}
Or better:
alert('square of the number:’);
function square(number) { return Math.pow(number, 2);}
Or even better!:
alert('square of the number:’);
function square(number) {
return Math.pow(number, 2);
}
For more info
Comments:
Comments are used to indicate what is happening in each statement. It describes the process of each line.
Commands can be put anywhere in the code just with two forward slash '//'
' /*' This comment occupies a line of its own.
alert('Hello'); alert('World'); // This comment follows the statement
- There is another type which is the multi line command. It describes a part of the code in the following way:
/* An example with two messages.This is a multiline comment.*/
alert('Hello');
alert('World');
- The slashes and the asterisk doesn’t affect or execute the code.
Final Thoughts!
JavaScript is said to be a loosely written language. But not adhering to the code structure sometimes creates an unexpected output which should be avoided at all costs. I will be back with more informative tutorials on JavaScript. So, till then adios!
Posted on Utopian.io - Rewarding Open Source Contributors