JavaScript Programming Concepts

JavaScript Statements

A JavaScript program is a sequence of instructions, each known as a statement. These statements are executed by a web browser.

Example of Variable Declaration

let width, height, area;

width = 5;
height = 10;
area = width * height;

Definition

A JavaScript statement is a single unit of code that performs a specific action.

Components

JavaScript statements can contain:

• Values: Data such as numbers, text, or booleans (true/false).
• Operators: Symbols that perform operations on values (e.g., +, -, *, /).
• Expressions: Combinations of values, operators, and variables that evaluate to a single value.
• Keywords: Reserved words that have specific meanings in JavaScript (e.g., let, const, if, else).
• Comments: Text ignored by the browser, used for explanations.

Example Statement

document.getElementById("output").innerHTML = "Area of the rectangle is: " + area;

This statement writes the calculated area into an HTML element with id="output" using the JavaScript DOM.

Execution Order

Statements are executed one by one, in the order they are written. This order can be controlled by JavaScript's control flow constructs (e.g., if statements, loops).

Semicolons

Semicolons (;) are used to separate statements. This makes it clear where one statement ends and the next begins.

It is a best practice to add a semicolon at the end of each statement:

let length, breadth, perimeter; // Declare 3 variables
length = 7; // Assign the value 7 to length
breadth = 3; // Assign the value 3 to breadth
perimeter = 2 * (length + breadth); // Assign the perimeter of the rectangle

While JavaScript's automatic semicolon insertion (ASI) can sometimes handle missing semicolons, relying on it can lead to unexpected behavior. It's best to be explicit and always use semicolons.

Multiple Statements on One Line

Multiple statements can be written on one line if they are separated by semicolons.

length = 7; breadth = 3; perimeter = 2 * (length + breadth);

However, it is generally more readable to write each statement on a separate line for better code organization.

Whitespace

JavaScript ignores extra spaces and tabs (whitespace). This allows for better readability and formatting.

Good practice includes adding spaces around operators:

let totalArea = width * height;

Line Length and Breaks

For readability, keep line lengths under 80 characters. If a statement becomes too long, use line breaks to split it up. Break lines after operators for clarity.

document.getElementById("result").innerHTML =
"The perimeter is: " + perimeter;

Code Blocks

Statements can be grouped together in code blocks using curly brackets {}. Code blocks are essential for structuring JavaScript programs. They are used with functions, loops, and conditional statements.

function displayResults() {
  document.getElementById("areaOutput").innerHTML = "Area: " + area;
  document.getElementById("perimeterOutput").innerHTML = "Perimeter: " + perimeter;
}

Summary

• JavaScript statements are instructions executed by a web browser.
• They can include values, operators, expressions, keywords, and comments.
• Statements are typically separated by semicolons.
• Whitespace is ignored by JavaScript, allowing for formatting and readability.
• Code blocks, enclosed in curly brackets {}, group related statements.