Javascript Grammar And Types

Bhavana Kudkyal
6 min readJun 26, 2021

Basics

JavaScript borrows most of its syntax from Java, C and C++, but is also influenced by Awk, Perl and Python.

JavaScript is case-sensitive and uses the Unicode character set. For example, the word Früh (which means “early” in German) could be used as a variable name.

But, the variable früh is not the same as Früh because JavaScript is case sensitive.

In JavaScript, instructions are called statements and are separated by semicolons (;).

A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons. ECMAScript also has rules for automatic insertion of semicolons (ASI) to end statements. (For more information, see the detailed reference about JavaScript’s lexical grammar.) It is considered best practice, however, to always write a semicolon after a statement, even when it is not strictly needed. This practice reduces the chances of bugs getting into the code.

The source text of JavaScript script gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments, or whitespace. Spaces, tabs, and newline characters are considered whitespace.

Comments

The syntax of comments is the same as in C++ and in many other languages:

Comments behave like whitespace and are discarded during script execution.

Note: You might also see a third type of comment syntax at the start of some JavaScript files, along these lines: #!/usr/bin/env node. This is called hashbang comment syntax, and is a special comment used to specify the path to a particular JavaScript interpreter that you want to use to execute the script. See Hashbang comments for more details.

Declarations

There are three kinds of declarations in JavaScript.

var — Declares a variable, optionally initializing it to a value.

let— Declares a block-scoped, local variable, optionally initializing it to a value.

const — Declares a block-scoped, read-only named constant.

Variables

You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.

A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0–9). Because JavaScript is case sensitive, letters include the characters “A” through “Z” (uppercase) and the characters “a” through “z” (lowercase).

You can use most of ISO 8859–1 or Unicode letters such as å and ü in identifiers (for more details see this blog post). You can also use the Unicode escape sequences as characters in identifiers.

Some examples of legal names are Number_hits, temp99, $credit, and _name.

Declaring variables

You can declare a variable in two ways:

  • With the keyword var. For example, var x = 42. This syntax can be used to declare both local and global variables, depending on the execution context.
  • With the keyword const or let. For example, let y = 13. This syntax can be used to declare a block-scope local variable. See Variable scope below.

You can also simply assign a value to a variable For example, x = 42. This form creates an undeclared global variable. It also generates a strict JavaScript warning. Undeclared global variables can often lead to unexpected behavior. Thus, it is discouraged to use undeclared global variables.

Evaluating variables

A variable declared using the var or let statement with no assigned value specified has the value of undefined.

An attempt to access an undeclared variable results in a ReferenceError exception being thrown:

You can use undefined to determine whether a variable has a value. In the following code, the variable input is not assigned a value, and the if statement evaluates to true.

The undefined value behaves as false when used in a boolean context. For example, the following code executes the function myFunction because the myArray element is undefined:

The undefined value converts to NaN when used in numeric context.

When you evaluate a null variable, the null value behaves as 0 in numeric contexts and as false in boolean contexts. For example:

Variable scope

When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.

JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the global context (or the function if the following codes are part of the function), not the immediate if statement block.

This behavior changes, when using the let declaration introduced in ECMAScript 2015.

Variable hoisting

Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting; variables in JavaScript are in a sense “hoisted” or lifted to the top of the function or statement. However, variables that are hoisted return a value of undefined. So even if you declare and initialize after you use or refer to this variable, it still returns undefined.

The above examples will be interpreted the same as:

Because of hoisting, all var statements in a function should be placed as near to the top of the function as possible. This best practice increases the clarity of the code.

In ECMAScript 2015, let and const are hoisted but not initialized. Referencing the variable in the block before the variable declaration results in a ReferenceError because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.

Function hoisting

For functions, only the function declaration gets hoisted to the top and not the function expression.

Global variables

Global variables are in fact properties of the global object. In web pages, the global object is window, so you can set and access global variables using the window.variable syntax.

Consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. For example, if a variable called phoneNumber is declared in a document, you can refer to this variable from an iframe as parent.phoneNumber.

Constants

You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign ($) and can contain alphabetic, numeric, or underscore characters.

A constant cannot change value through assignment or be re-declared while the script is running. It must be initialized to a value.

The scope rules for constants are the same as those for let block-scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.

You cannot declare a constant with the same name as a function or variable in the same scope. For example:

However, the properties of objects assigned to constants are not protected, so the following statement is executed without problems.

Also, the contents of an array are not protected, so the following statement is executed without problems

Data structures and types

Data types

The latest ECMAScript standard defines eight data types:

  • Seven data types that are primitives:
  • Boolean. true and false.
  • null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.
  • undefined. A top-level property whose value is not defined.
  • Number. An integer or floating point number. For example: 42 or 3.14159.
  • BigInt. An integer with arbitrary precision. For example: 9007199254740992n.
  • String. A sequence of characters that represent a text value. For example: “Howdy”
  • Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.
  • and Object

Although these data types are relatively few, they enable you to perform useful functions with your applications. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your application can perform.

Data type conversion

JavaScript is a dynamically typed language. That means you don’t have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution. So, for example, you could define a variable as follows:

And later, you could assign the same variable a string value, for example:

Because JavaScript is dynamically typed, this assignment does not cause an error message.

In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings. For example, consider the following statements:

In statements involving other operators, JavaScript does not convert numeric values to strings. For example:

Converting strings to numbers

In the case that a value representing a number is in memory as a string, there are methods for conversion.

  • parseInt()
  • parseFloat()

parseInt only returns whole numbers, so its use is diminished for decimals. Additionally, a best practice for parseInt is to always include the radix parameter. The radix parameter is used to specify which numerical system is to be used.

An alternative method of retrieving a number from a string is with the + (unary plus) operator:

--

--