JavaScript/Lexical structure

From Wikibooks, open books for an open world
Jump to navigation Jump to search
Previous: Placing the code Index Next: Automatic semicolon insertion

Case Sensitivity[edit | edit source]

JavaScript is case-sensitive. This means that Hello() is not the same as HELLO(), hello(), or even hEllo().

Whitespace[edit | edit source]

Whitespace includes spaces, tabs, and, line breaks.[note 1] JavaScript ignores it, but it makes the code easier for people to read.[2]

The following is JavaScript with very little whitespace.

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

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

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

The following is the same JavaScript with a lot of whitespace.

function filterEmailKeys( evt )
  {
    evt = evt || window.event;

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

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

    return false;
  }

Comments[edit | edit source]

Comments are also ignored when executing.

Comments 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.

// Shows a welcome message
alert("Hello, World!")
Multi-line comments

Multi-line comments start with slash asterisk, /*, and end with the reverse asterisk slash, */. 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. */
var 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 cancelled out by */

Semicolons[edit | edit source]

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, and the exceptions can be quite surprising.[3] 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[edit | edit source]

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:

var myLiteral = "a fixed value";

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

Example of an object literal:

var myObject = { name:"value", anotherName:"anotherValue" };

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

Identifiers[edit | edit source]

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.

Naming variables[edit | edit source]

When naming variables there are some rules that must be obeyed:

  • Upper case and lower case letters of the alphabet, underscores, and dollar signs can be used
  • Numbers are allowed after the first character
  • Some other characters like "á" can technically be used in variable names,[note 2] but special characters are not allowed.
  • Variable names are case sensitive: different case means a different name
  • A variable may not be a reserved word

Notes[edit | edit source]

  1. Technically vertical tab, zero width non-breaking space, and any unicode character with the "Space Separator" category also count as whitespace.[1]
  2. as long as they have the unicode properties "ID_Start" or "ID_Continue", for the start or rest of the name respectively.[4]

References[edit | edit source]

  1. "ECMA262 12th Edition". ECMAScript Language Specification, Chapter 12.2 - White Space. https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-white-space. 
  2. "Readable Code: Video". Khan Academy. https://www.khanacademy.org/computing/computer-programming/programming/writing-clean-code/pt/readable-code. 
  3. ECMA-262 12th Edition ECMAScript Language Specification, Chapter 12.9 - Automatic Semicolon Insertion
  4. "ECMA262 12th Edition". ECMAScript Language Specification, the IdentifierName production. https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#prod-IdentifierName. 
Previous: Placing the code Index Next: Automatic semicolon insertion