Deep understanding of JavaScript syntax and code structure

Overview

All programming languages ​​must follow certain rules in order to function. The set of rules that determine the correct structure of a programming language is called a grammar. Many programming languages ​​consist mostly of similar concepts with syntactic variations.

In this tutorial, we'll cover the many rules and conventions of JavaScript syntax and code structure.

Functionality and readability

Functionality and readability are two important reasons to focus on syntax when getting started with JavaScript.

Some syntax rules are necessary for JavaScript to function. If you don't follow them, the console will throw an error and the script will stop executing.

Consider the syntax error in "Hello, World!". program:

// Example of a broken JavaScript program
console.log("Hello, World!"

This code example is missing a closing bracket and instead of printing the expected "Hello, World!" to the console, the following error will appear:

Uncaught SyntaxError: missing ) after argument list

The missing ")" must be added before the script can continue running. This is an example of how JavaScript syntax errors can break your script, as the correct syntax must be followed in order for the code to run.

Some aspects of JavaScript syntax and formatting are based on different schools of thought. That said, there are some style rules or choices that are not mandatory and will not cause errors when you run your code. However, there are many common conventions that are worth following, as developers across projects and code bases will become more familiar with the style. Following common conventions improves readability.

Consider the following three examples of variable assignment.

const greeting="Hello"; // no whitespace between variable & string
const greeting = "Hello"; // excessive whitespace after assignment
const greeting = "Hello"; // single whitespace between variable & string

Although the three examples above function exactly the same in output, the third option, greeting = "Hello";, is by far the most common and readable way to write the code, especially when considered in the context of a larger program.

It is important to maintain a consistent style throughout your coding project. You will encounter different guidelines from one organization to another, so you must be flexible as well.

We'll walk through some code examples below so that you can get familiar with the syntax and structure of JavaScript code, and refer back to this article when you have questions.

blank

Whitespace in JavaScript consists of space, tab, and newline characters (press ENTER on the keyboard). As mentioned earlier, JavaScript ignores excess whitespace outside of strings, as well as whitespace between operators and other symbols. This means that the following three variable assignment examples will have exactly the same computed output:

const userLocation = "New York City, " + "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

userLocation will represent "New York City, NY" no matter which of these styles is written in the script, they will also have no effect on JavaScript no matter if it is written with tabs or spaces.

A good rule of thumb to follow for the most common whitespace conventions is to follow the same rules as in math and language grammar.

A notable exception to this style is during assignments to multiple variables. Note the placement of the = in the following examples:

const companyName = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle = "digitalocean";

All assignment operators (=) are placed on one line with a space after the variable. This type of organization is not used by every code base, but it can be used to improve readability.

JavaScript ignores extra line breaks. Typically, extra line breaks are inserted above comments and after code blocks.

parentheses

For keywords such as if, switch, and for, it is common to add spaces before and after the parentheses. Observe the following comparison and looping examples.

// An example of if statement syntax
if () { }
// Check math equation and print a string to the console
if (4 < 5) {
    console.log("4 is less than 5.");
    }
// An example of 
for loop syntaxfor () { }
// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
    console.log(i);
    }

If statements and for loops have spaces on each side of the brackets (but not inside the brackets).

When the code belongs to a function, method, or class, the brackets will touch the corresponding name.

// An example 
functionfunction functionName() {}
// Initialize a function to calculate the volume of a cube
function cube(number) {
    return Math.pow(number, 3);
}
// Invoke the function
cube(5);

In the above example, cube() is a function and the bracket () pair will contain the arguments or parameters. In this case the arguments are a number or 5 respectively. Although the cube() with the extra space is valid, in that the code will execute as expected, it is barely noticeable. Keeping them together helps to easily associate the function name with the parenthesis pair and any associated passed parameters.

semicolon

A JavaScript program consists of a series of instructions called statements, just as a written paragraph consists of a series of sentences. While a sentence will end with a period, JavaScript statements usually end with a semicolon (;).

// A single JavaScript statement
const now = new Date();

If two or more statements are adjacent, they must be separated by a semicolon.

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

If statements are separated by newlines, semicolons are optional.

// Two statements separated by newlines
const now = new Date()
console.log(now)

A safe and common convention is to separate statements with semicolons, regardless of line breaks. Generally, it is considered good practice to include them to reduce the possibility of errors.

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

Semicolons are also required between the initialization, condition, and increment or decrement in a for loop.

for (initialization; condition; increment) { 
   // run the loop
}

Semicolons are not included after any type of block statement, such as if, for, do, while, class, switch, and function. These block statements are enclosed in curly braces. Note the following example.

// Initialize a function to calculate the area of ​​a square
function square(number) {
    return Math.pow(number, 2);
}
// Calculate the area of ​​a number greater than 0
if (number > 0) {
    square(number);
}

Note that not all code enclosed in curly braces ends with a semicolon. Objects are enclosed in curly braces and terminated with a semicolon.

// An example object
const objectName = {};
// Initialize triangle object
const triangle = {
    type: "right",
    angle: 90,
    sides: 3,
};

It is widely accepted practice to include a semicolon after every JavaScript statement except block statements, which end with a curly brace.

indentation

Technically, a complete JavaScript program can be written in one line. However, this can quickly become very difficult to read and maintain. Instead, we use line breaks and indentation.

Following is an example of a conditional if/else statement which is either written on one line or with line breaks and indentation.

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }
// Conditional statement with indentation
if (x === 1) {
    // execute code if true
    }else {
        // execute code if false
        }

Note that any code contained within a block is indented. Indentation can be done with two spaces, four spaces, or by pressing tabs. The use of tabs or spaces depends on your personal preference (for individual projects) or your organization's guidelines (for collaborative projects).

Including an opening curly brace at the end of the first line, as in the example above, is the normal way to construct JavaScript block statements and objects. Another way you might see block statements written is with curly braces on their own line.

// Conditional statement with braces on newlines
if (x === 1){
    // execute code if true
    }else{
    // execute code if false
    }

This style is not as common in JavaScript as in other languages, but it is not unheard of.

Any nested block statements will be indented further.

// Initialize a functionfunction isEqualToOne(x) {
    // Check if x is equal to one
    if (x === 1) { // on success, return true
        return true;
    } else { return false;
    }
}

Proper code indentation is essential to maintain readability and reduce clutter. One exception to this rule to keep in mind is that compressed libraries will remove unnecessary characters and therefore render a smaller file size for faster page load times (like jquery.min.js and d3.min.js).

Identity

The name of a variable, function, or property is called an identifier in JavaScript. Identifiers consist of letters and numbers, but cannot contain any symbols except $ and u, and cannot start with a number.

case sensitive

These names are case sensitive. The following two examples myvariable and myvariable will refer to two different variables.

var myVariable = 1;
var myvariable = 2;

The convention for JavaScript names is to be written in CamelCase, which means the first word is lowercase, but every word after it starts with an uppercase letter. You may also see global variables or constants written in uppercase letters separated by underscores.

const INSURANCE_RATE = 0.4;

The exception to this rule are class names, which are usually written starting each word with an uppercase letter (PascalCase).

// Initialize a class
class ExampleClass {
    constructor() { }
}

To ensure that your code is readable, it is a good idea to use distinct identifiers in your program files.

Reserved Keywords

Identifiers also cannot consist of any reserved keywords. Keywords are words in the JavaScript language that have built-in functionality, such as var, if, for, and this.

For example, you cannot assign a value to a variable named var.

var var = "Some value";

Since JavaScript understands var as a keyword, this will result in a syntax error:

SyntaxError: Unexpected token (1:4)

The above is the detailed content for in-depth understanding of the syntax and code structure in JavaScript. For more information about the syntax and structure in JavaScript, please pay attention to other related articles on 123WORDPRESS.COM!