JavaScript statements are instructions written in the JavaScript programming language that perform specific tasks within a script.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>
<p id="demo"></p>
<script>
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script>
</body>
</html>
JavaScript Programs
A computer program consists of a sequence of "instructions" that a computer follows.
In programming languages, these instructions are referred to as statements.
A JavaScript program is essentially a sequence of such programming statements.
Within an HTML document, JavaScript programs are run by the web browser.
JavaScript Statements
JavaScript statements consist of values, operators, expressions, keywords, and comments.
Here is a statement that instructs the browser to display "Hello Dolly." inside an HTML element identified by the id="demo":
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
Most JavaScript programs consist of numerous JavaScript statements.
These statements are executed sequentially, in the exact order in which they appear in the script.
JavaScript programs and the statements they contain are commonly referred to as JavaScript code.
Semicolons ;
Semicolons are used to separate JavaScript statements.
It's good practice to add a semicolon at the end of each executable statement:
Examples
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript statements are separated by semicolons.</p>
<p id="demo1"></p>
<script>
let a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
When separated by semicolons, multiple statements on one line are allowed:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>Multiple statements on one line are allowed.</p>
<p id="demo1"></p>
<script>
let a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
On the web, you might encounter JavaScript examples that omit semicolons. While ending statements with a semicolon is not strictly required by the syntax, it is highly recommended to enhance clarity and prevent potential errors in script execution.
JavaScript White Space
JavaScript disregards extra spaces, allowing you to add white space to your script for better readability.
The lines below are treated the same by JavaScript, demonstrating how spacing can vary without affecting the code's functionality:
A good practice is to put spaces around operators ( = + - * / ):
JavaScript Line Length and Line Breaks
For optimal readability, programmers typically prefer to keep code lines no longer than 80 characters.
If a JavaScript statement extends beyond one line, the most suitable point to break the line is after an operator:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>
JavaScript Code Blocks
JavaScript statements can be grouped together within code blocks, enclosed by curly brackets {...}.
The aim of these code blocks is to define statements that should be executed as a unit.
One common scenario where you'll find statements grouped in blocks is within JavaScript functions:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript code blocks are written between { and }</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
In this tutorial, we use 2 spaces of indentation for code blocks to maintain clarity and organization.
You will learn more about functions and how to effectively utilize them later in this tutorial.
JavaScript Keywords
JavaScript statements frequently begin with a keyword that specifies the action to be performed by the script.
You can find a complete list of all JavaScript keywords in our Reserved Words Reference.
Here are some of the keywords that you will learn about in this tutorial:
Keyword and their Description
1. varDeclares a variable
2. letDeclares a block variable
3. constDeclares a block constant
4. ifMarks a block of statements to be executed on a condition
5. switchMarks a block of statements to be executed in different cases
6. forMarks a block of statements to be executed in a loop
7. functionDeclares a function
8. returnExits a function
9. tryImplements error handling to a block of statementsThis table provides a brief description of each keyword's purpose within JavaScript coding.
JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.
