JavaScript Syntax

JavaScript Syntax

JavaScript syntax refers to the set of rules that dictate how JavaScript programs are constructed and written.

JavaScript Programs

A computer program is a sequence of instructions that a computer executes.

In a programming language like JavaScript, these instructions are called statements.

JavaScript statements are typically separated by semicolons (;), although Automatic Semicolon Insertion (ASI) exists, explicit semicolons are a recommended practice.

const x = 5;
const y = 6;
const z = x + y;

	In the context of web development, JavaScript programs are executed by the JavaScript engine within a web browser or by a runtime environment like Node.js.

JavaScript Statements Components

JavaScript statements are composed of:

• Values: Data like numbers or strings.
• Operators: Symbols that perform operations on values (e.g., +, -, *, /, =).
• Expressions: Combinations of values, variables, and operators that compute to a new value.
• Keywords: Reserved words with special meanings (e.g., let, const, function, if).
• Comments: Text ignored by the interpreter, used for explanations.

JavaScript Values

The JavaScript syntax defines two main types of values:

• Literals: Fixed values directly written in the code.
• Variables: Named storage for values, which can change during program execution.

JavaScript Literals

Literals represent fixed values in your code. Key examples include:

Numbers can be integers or floating-point (with decimals):

10.50
1001
3.14e5 // Scientific notation (3.14 * 10^5)

Strings are sequences of characters, written within single quotes ('...'), double quotes ("..."), or backticks (template literals: `...`):

"John Doe"
'Jane Smith'
`Hello, world!`

Booleans represent true or false:

true
false

Arrays are ordered lists of values:

[10, 20, "Apple", true]

Objects are collections of key-value pairs:

{ firstName: "John", lastName: "Doe", age: 30 }

JavaScript Variables

Variables are used to store data values that can be referenced and manipulated in a program.

JavaScript uses the keywords let, const (and the older var) to declare variables.

An equal sign (=) is used as the assignment operator to assign values to variables.

In this example, x is declared as a variable and then assigned the value 6:

let x;
x = 6;

You can also initialize a variable when you declare it:

const message = "Hello!";

JavaScript Operators

JavaScript uses various operators:

Assignment operator (=) to assign values:

let count = 10;

Arithmetic operators (+, -, *, /, % for modulus) to perform calculations:

const sum = (5 + 6) * 10;

Comparison operators (==, ===, !=, !==, >, <, >=, <=) to compare values.

Logical operators (&& for AND, || for OR, ! for NOT) to combine or invert boolean values.

JavaScript Keywords

Keywords are reserved words in JavaScript that have special meanings and define the language’s structure and rules.

The let keyword tells the browser to create a new block-scoped variable. The const keyword creates a block-scoped constant:

let score = 0;
const pi = 3.14159;

(A list of common keywords can be found in the ‘JavaScript Statements’ chapter.)

JavaScript Comments

Not all JavaScript statements are executed.

Code after double slashes // (single-line comment) or between /* and */ (multi-line comment) is treated as a comment.

Comments are ignored by the JavaScript engine and are used to add explanations or temporarily disable code:

let x = 5;  // This is a single-line comment explaining the variable.

/*
This is a
multi-line comment.
It can span several lines.
*/
// const y = 10; // This line of code is commented out and will not run.

JavaScript is Case Sensitive

All JavaScript identifiers (names of variables, functions, etc.) are case sensitive.

The variables lastName and lastname are two different variables:

let lastName = "Doe";
let lastname = "Peterson";

console.log(lastName); // Output: Doe
console.log(lastname); // Output: Peterson

JavaScript keywords are also case sensitive and must be typed in lowercase (e.g., let, not Let or LET).

JavaScript and Camel Case

When naming variables or functions that consist of multiple words, several conventions exist. In JavaScript, camelCase is the most common and recommended convention.

In camelCase:

• The first word starts with a lowercase letter.
• Subsequent words start with an uppercase letter.
• There are no spaces or hyphens.

Examples of camelCase:

let firstName;
let lastName;
const masterCardNumber;
function calculateTotalAmount() { /* ... */ }

Other casings you might encounter (but are less common for JavaScript variables/functions):

• PascalCase (UpperCamelCase): Each word starts with an uppercase letter (e.g., FirstName, MasterCard). Often used for class names in JavaScript.
• snake_case: Words are separated by underscores, all lowercase (e.g., first_name, master_card).
• kebab-case: Words are separated by hyphens, all lowercase (e.g., first-name, master-card). Hyphens are not allowed in JavaScript variable/function names because - is the subtraction operator. Kebab-case is common in HTML and CSS.

	Using camelCase consistently makes your JavaScript code easier to read and maintain.

JavaScript Character Set

JavaScript uses the Unicode character set.

Unicode allows you to use a vast range of characters and symbols from various languages in your strings and comments. For identifiers (variable names, function names), it’s best practice to stick to ASCII characters (letters, numbers, underscore, dollar sign) for broader compatibility and readability, although Unicode letters are technically allowed.

For more details, you can consult the official Unicode Standard documentation.