JavaScript/Lexical structure

Other Script Types

Automatic semicolon insertion

Other Script Types

Automatic semicolon insertion

Summary

• All elements of the language are case-sensitive, e.g.: const x = 0; const X = 0; defines two different variables; CONST x = 0; leads to a syntax error.
• Single line comments are introduced by //. Multi-line comments are surrounded with /* */.
• Semicolons for ending a statement are optional - with few exceptions.
• The first character of a variable name cannot be a number: const 1x = 0; leads to a syntax error.

Case Sensitivity

JavaScript is case-sensitive. This means that all keywords, variable names, and function names must be written consistently. If you create a function Hello() it is different from the function HELLO(), hello(), or hEllo(). Or, the statement IF (x > 0) { } leads to a syntax error because the keyword if is defined in lower-case.

Whitespaces

Whitespace includes spaces, tabs, and line breaks. If there is a sequence of multiple whitespaces, JavaScript reduces them to a single whitespace, e.g: '    ' -> ' ', '\n\t' -> '\n'. This single remaining whitespace delimits the language elements like keywords and variable names, ... from each other. The resulting source code is hard to read for people but (a little) easier to parse by the browser. The main advantage is the smaller size of the code which must be transferred between server and client.

The following script is an example with very little whitespace.

function filterEmailKeys(event){
event=event||window.event;
const charCode=event.charCode||event.keyCode;
const char=String.fromCharCode(charCode);
if(/[a-zA-Z0-9_\-\.@]/.exec(char)){return true;}
return false;
}

The following is the same script with a typical amount of whitespace.

The following is the same script with a typical amount of whitespace.

function filterEmailKeys(event) {
  event = event || window.event;
  const charCode = event.charCode || event.keyCode;
  const char = String.fromCharCode(charCode);
  if (/[a-zA-Z0-9_\-\.@]/.exec(char)) {
    return true;
  }
  return false;
}

The following is the same script with a lot of whitespaces.

function filterEmailKeys( evt ) {

    evt = evt || window.event;

    const charCode = evt.charCode || evt.keyCode;
    const char = String.fromCharCode ( charCode );

    if ( /[a-zA-Z0-9_\-\.@]/.exec ( char ) ) {
        return true;
    }

    return false;
  }

Comments

Comments are parts of the source code that will - per definition - not be executed.

They allow you to leave notes in your code to help other people understand it. They also allow you to comment out code that you want to hide from the parser but you don't want to delete.

Single-line comments

A double slash // turns all of the following text on the same line into a comment that will not be processed by the JavaScript interpreter.

// Show a welcome message
alert("Hello, World!")

Multi-line comments

Multi-line comments start with /* and end with the reverse */. Multi-line comments don't nest.

Here is an example of how to use the different types of commenting techniques.

/* This is a multi-line comment
that contains multiple lines
of commented text. */
let a = 1;
/* commented out to perform further testing
a = a + 2;
a = a / (a - 3); // is something wrong here?
*/
alert('a: ' + a);

/* This comment has two /* but they're both canceled out by */

Semicolons

In many programming languages, semicolons are required at the end of each code statement. In JavaScript, the use of semicolons is optional, as a new line indicates the end of the statement (with some exceptions). This is called automatic semicolon insertion.

// the line 
x = a + b;
// is equivalent to:
x = a + b

But the exceptions can be quite surprising. Automatic semicolon insertion can create hard to debug problems.

a = b + c
(d + e).print()

The above code is not interpreted as two statements. Because of the parentheses on the second line, JavaScript interprets the above as if it were

a = b + c(d + e).print();

when instead, you may have meant it to be interpreted as

a = b + c;
(d + e).print();

Even though semicolons are optional, it's preferable to end statements with a semicolon to prevent any misunderstandings from taking place.

Literals

A literal is a hard-coded value. Literals provide a means of expressing specific values in your script. For example, to the right of the equals sign:

const myLiteral = "a fixed value";

There are several types of literals available. The most common are the string literals, but there are also numeric literals, booleans, undefined, null, regex literals, array literals, and object literals.

Examples of an object, a boolean, and a string literal:

const myObject = { name:"value", anotherName:"anotherValue" };
const isClosed = true;
const mayBeWrong = "true";

Details of these different types are covered in Variables and Types.

Identifiers

An identifier is a name for a piece of data, such as a variable, array, or function. There are rules:

• Letters, dollar signs, underscores, and numbers are allowed in identifiers.
• The first character cannot be a number.

Examples of valid identifiers:

• u
• $hello
• _Hello
• hello90

1A2B3C is an invalid identifier, as it starts with a number.

An example of 'identifiers' are variable names. They obey such rules.

• Uppercase and lowercase letters, underscores, and dollar signs can be used.
• Numbers are allowed after the first character.
• Non-latin characters like "á" can be used in variable names as long as they have the Unicode properties "ID_Start" or "ID_Continue" for the start or rest of the name respectively. Special characters are not allowed.
• Variable names are case sensitive: different case means a different name.
• A variable may not be a reserved word.

Exercises

... are available on another page (click here).