JavaScript Syntax – Implementation of JavaScript Code

In this JavaScript Tutorial, we will learn what is JavaScript Syntax, their functionality, Modern Syntax of JavaScript, how they are implemented and how to print your first JavaScript code.

Brendan Eich summarised the ancestry of the syntax in JavaScript 1.1 Specification. JavaScript also borrows most of its syntax from Java, and also inherits from AWK and Perl. So, let’s start by discussing what is JavaScript Syntax.

JavaScript Syntax

1. What is JavaScript Syntax?

The syntax of JavaScript is the set of rules that define correctly structured JavaScript programs. It is mainly used for Client-Side scripting within the modern web browsers and almost all web browsers provide the alert function.
JavaScript syntax also refers to a set of rules that determine how the language will be written ( by the programmers) and interpreted (by the browsers).

JavaScript syntax loosely depends on Java syntax. Java is a full-blown programming environment and JavaScript could be seen as a subset of Java syntax. Having said this, that is where the similarities between Java and JavaScript ends and both are two different languages.

By learning JavaScript syntax, you will become familiar with terms such as variables, functions, statements, data types, objects etc.

Example:-

<script>
Documents.write ( “JavaScript is not Java”);
</script>

In HTML, <script> tag will tell the browser to expect the script tag between them. You can also specify the language by adding,

type = “text/javascript”.

However, from HTML5, Javascript is the default language, so this attribute is optional if you are using JavaScript.
Document.write (“ JavaScript is not Java”);

This is the only way of writing a text to the web page in JavaScript.

2. JavaScript Syntax Functions

There are two important reasons to focus on syntax, functionality, and readability as you start to work in JavaScript.

There are syntax rules that are compulsory for JavaScript functions. If they are not followed, then the console will throw an error and execution of the script will get interrupted.

Consider the syntax error in the “Hello world” program.

Example:

console. log( “Hello World!”

This code sample is missing the closing parentheses. Therefore, instead of printing the expected “Hello World!” to console, the following error will appear.

Output: Uncaught Syntax Error: missing ) after the argument list.

The missing ) adds before the script will continue to function. This is an example of how a mistake in JavaScript syntax can break the script. Therefore, a correct syntax follows to run the code.

Some aspects of JavaScript and formatting are based on different schools of thought. It means there are stylistic rules or choices that are not compulsory and will not result in errors when the code processes.

Moreover, there are many common conventions that are easy to follow, as a developer between project and codebases is more suitable with the style. Adhering to common conventions improves readability.

Example:-

const greeting =“Hello”; // no whitespace between the variable and the string

const greeting = “ Hello”; // excessive white space after assignment

const greeting = “Hello”; // single whitespace between the variable and the string

However, all the three examples will function exactly the same as in the output, the third option of greeting = “Hello” is used more commonly, and the way of writing the code, that is readable, especially when mentioning it within the context of a larger program.

i. Whitespaces and Line Breaks in Syntax

JavaScript ignores spaces, tabs, and new lines that appear in the JavaScript program. You can also use spaces, tabs, and newlines in your programs and you are free to format and indent your programs in a neat and convenient way that makes the code easy to read and understand.

Example:-

const userLocation = “ New York City, “ + “NY”;
const userLocation = “New York City,” + “NY”;
const userLocation = “New York City, “ + “NY’;

UserLocation represents New York City and no matter which of these styles are written in scripts, it won’t make any difference whether the whitespaces are written in tabs or spaces.

However, a good rule of thumb to follow the most common whitespaces conventions is to follow the same rules as you are used in maths and language grammar.

Example:-

let x = 5 * y is more readable then let x=5*y

One notable exception to this style is you may see it during the assignment of multiple variables. Consider the position of = in the following example.

Example:-

const companyName = “DigitalOcean”
const Companyheadquaters = “ New York City”
const CompanyHandle = “digitalocean”

All the assignment operators ( = ) are lined up, with the whitespaces after the variables. Also, this type of organization structure is not used in every codebase but can be used to improve readability.

Moreover, JavaScript ignores excess whitespace. Generally, an extra new line will insert above the comment after a code block.

ii. Parentheses in Syntax

For keywords such as if switch, and for, spaces add before and after the parentheses.

Example:-

if () { }
if ( 4< 5 ) {
console. Log ( “4 is less than 5”);
}
for ( ) { }
for (let i=0; i<= 10; i++) {
console. log(i);
}
for ( ) { }
for ( let i=0; i<=10; i++ ) {
console.log(i);
}

The if statement and for loop have whitespaces on each side of the parentheses. When the code remains to a function, method or class, the parentheses touches the respective name.

Example:-

function functionName ( ) { }
Function cube(number) {
Return Math.pow(number,3);
}
// invoke the function
Cube(5);

However, in the above example, cube() is a function and the pair of parentheses will contain the parameter or arguments. Cube ( ) with extra space is valid and the code will execute. Keeping them together helps easily associate the function name to the parentheses pair and any associate pass arguments.

iii. Semicolons are Optional

Simple statements in JavaScript generally follows by semicolon characters, just as they are in C, C++, and Java.

However, you can miss out semicolon if your statements place on a separate line.

Example:-

< script language = “javascript” type = “text/javascript”;
< ! –
Var1 = 10
Var2 = 20
//-->
</script>

But, when format as follows, you must use semicolons.

Example:-

<script language = “ javascript “ type = text/javascript”>
< ! –
Var1 = 10; var2 = 20;
// -- >
</script>

It is a good programming practice to use a semicolon.

iv. Case – Sensitivity in JavaScript

JavaScript is a case – sensitive language. Also, it states that the variables, language keywords, function names, and any other identifiers are always with the consistent capitalization of letters.

  • The identifiers TIME and time will convey a different meaning in JavaScript.
  • Moreover, writing the variable and function name in JavaScript,  with care.

v. JavaScript Comments

  • JavaScript supports both C as well as C++ style comments.
  • Any text between // and the end of the line treats as a comment and is ignored by JavaScript.
  • Any text between /* and */ treats as a comment. This may span for few lines.
  • JavaScript also recognises the HTML comment opening sequence <! — . It treats this as a single line comment just as this does the // comment.

JavaScript does not recognise the HTML comment closing sequence — > , so it treats as // — >.

Example:-

How to comment in JavaScript?

< script language = “javascript “ type = “text/javascript”;
< ! –
// This is a comment and is similar to comments in C++
/*
This is a multi line comment in JavaScript
*/
// -- >
</script>

3. Modern Syntax of JavaScript

Moden Syntax of JavaScript

There is some syntax that encourages a modern approach to JavaScript. Sometimes those features are very hard to distinguish from framework features.

The following are the modern syntax of JavaScript:

i. Arrow functions

The syntax is as follows:

const myFunction = ( ) => {
// ... }

The ( ) can host parameters, just like regular functions. Sometimes brackets are to remove entirely when there is just one statement in the function that is the implicit return value.

Arrow functions were introduced in ES6/ ECMA Script 2015, and since they have introduced, they have changed the outlook of JavaScript.

However, if the function body contains just a single statement, you can also omit the bracket and write all on a single line.

Example:-

const myFunction = ( ) = > dosomething()

We can use parameters in parentheses:

Example:-

const myFunction = (param1, param2) => dosomething(param1, param2)

If you have one parameter, you could omit the parentheses completely.

Example:-

const myFunction = param => dosomething(param)

ii. Implicit Return

Arrow functions enable you to have an implicit return. Values return without having to use the return keyword.
It also works when there is one line statement in the function body.

Example:-

const myFunction = ( ) => ‘test’
Myfunction ( ) // ‘test’

Also, when object returning, be sure to wrap the curly brackets in parentheses to avoid the wrapping function body brackets.

Example:-

const myFunction = ( ) => ( { value : ‘test’} )

iii. The Spread Operator

Example:-

const c = [ . . . a]

This statement copies an array. You can add items in an array , using

const c = [. . . a, 2, ‘test’]

The . . . is called spread operator.

You can use it on object as well.
const newObj = { . . .oldobj }

iv. Destructing Assignments

Using this syntax, you can extract some properties from an object.

Example:-

const person = {
first Name = ‘Steve’,
last Name = ‘Jobs’,
age : 50
Const { firstName : name, age } = Person

Now, you will have two const name and age of a person.

The syntax works on arrays also.

Example:-

const a = [ 1, 2, 3, 4 , 5 ]
[ first, second, fifth ] = a

v. Template literal

If there are strings in backticks, it’s a template literal.

const str = `test`;
Inside this, you can put variables and execute JavaScript, using ${ . . . } snippet.
const string = `something $ { 1 +2 + 3}`
const string = `something $ { foo ( ) ? ‘x’ : ‘y’}`

4. Where to put your Scripts

You can put your scripts in the following locations:

  • Between the HTML document’s <head> tag.
  • Within the HTML document body (i.e between the <body> tag.
  • In an external file ( and link it from your HTML document).

In HTML, JavaScript code must be inserted between the <script> and </script> tags.

Example:-

<script>
Document.getElementById(“Demo”).innerHTML= “My First JavaScript”;
</script>

We can write JavaScript code in <head> tag.

Example:-

<! DOCTYPE HTML>
<html>
<head>
<script>
Function myFunction () {
Document.getElementById(“Demo”).innerHTML= “Paragraph Changed”;

}
</script>
</head>

<body>
<h1> A web page </h1>
<p id = “demo”> A paragraph </p>
<button type = “button” onclick = “myFunction()”> Try it </button>

</body>
</html>

JavaScript code inside the <body> tag.

Example:-

<! DOCTYPE HTML>
<html>
<body>
<h1> A web page </h1>
<p id = “demo” > A paragraph </p>
<button type = “button” onclick = “myFunction()”> Try it </button>
<script>
function myFunction ( ) {
documents.getElementById ”demo”). innerHTML “Paragraph Changed”;}
</script>
</body>
</html>

JavaScript code in External file.

Example:-

function myFunction ( ) {
Document.getElementById(“demo”).innerHTML= “Paragraph Changed”;
}

When the same code in many different web pages, external scripts are practical
JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src(source) attribute of <script> tag.

Example:-

<script src = “myscript.js” > </script>

5. JavaScript Implementation

JavaScript implements using JavaScript statements that places within the <scripts> . . . </script> HTML tags in a web page.

You can also place the <script> tags, containing your JavaScript, anywhere within your page. But, it is normally recommended to keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the texts between these tags as a script.

The script syntax of JavaScript will appear as follows:

<script ..>
JavaScript code
</script>

The script tag takes the two important attributes:

i. Language

This attribute mentions what scripting language you are using. Typically, its value will be JavaScript.

ii. Type

This attribute is what now recommends to show the scripting language in use and its value should be set to “text/javascript”.

6. Print Your First JavaScript Code

Let’s see a simple example of how to print “ Hello World “using JavaScript code.

  • You can use any IDEs like Sublime Text, Brackets etc.
  • You can also write script tag within the body of the HTML page.
< ! DOCTYPE>
<html>
<body>
<script language = “javascript” type = “text/javascript”>
<! - -
Document.write (“Hello World”)
// - ->
</script>
</body>
</html>

Output: Hello World

7. Summary

This article provides an overview of the basic syntax and code structure of JavaScript. Lastly, the Syntax is important both for proper execution of the program, readability and maintainability for both yourself and the collaborator of the code.

After this article, you can study how to execute different JavaScript code in IDEs like Brackets and Sublime Text.

Any feedbacks or queries from your side is appreciable.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.