If expressions are single units of JavaScript that the engine can evaluate, statements can contain one or more different expressions, and are executed by the engine to perform an operation.
Programs are composed by multiple statements. Statements can span over multiple lines.
Just like with expressions, JavaScript has a whole different set of statements:
- expression statements
- declaration statements
- control flow statements
- loop statements
- miscellaneous statements
Let's dive into the details.
Statements can end with an optional semicolon ;. Using it, you can have multiple statements on a single line. I normally don't use semicolons, but you can use it whenever a statement ends.
An expression on its own is also a statement:
2
0.02
'something'
true
false
this //the current scope
undefined
i //where i is a variable or a constant
1 / 2
i++
i -= 2
i * 2
'A ' + 'string'
[] //array literal
{} //object literal
[1,2,3]
{a: 1, b: 2}
{a: {b: 1}}
a && b
a || b
!a
object.property //reference a property (or method) of an object
object[property]
object['property']
new object()
new a(1)
new MyRectangle('name', 2, {a: 4})
function() {}
function(a, b) { return a * b }
(a, b) => a * b
a => a * 2
() => { return 2 }
a.x(2)
window.resize()
With a declaration statement you assign a value to a variable name.
Examples:
var i = 0
let j = 1
const k = 2
//declare an object value
const car = {
color: blue
}
Here are function declarations:
//declare a function
function fetchFromNetwork() {
//...
}
//or
const fetchFromNetwork = () => {
//...
}
Statements can be grouped, using a block:
{
//this is a block
const a = 1;
const b = 2;
}
Using this syntax, you can have multiple statements whenever JavaScript expects a single statement.
Be aware that any of the conditional control flow statements check an expression and depending on it they execute a statement, or a block:
if (condition === true) {
//execute this block
} else {
//execute this block
}
You can omit curly braces if you only have one statement:
if (condition === true) /* statement */ else /* another statement */
I'll go into all the different control flow structures in the next sections.
Loops work similarly to the if example above.
Some loops check an expression, and repeat a statement execution it until that expression evaluates to true.
Some other loops iterate over a list and execute a statement (or block) for each element of the list, until the list finishes.
See my full JavaScript loops tutorial.
This statement returns a value from a function, ending the function execution.
Throws an exception (we'll later see what is an exception)
A try/catch block is used to catch exceptions. Again, we'll see those applied later on.
try {
} catch (<expression>) {
}
This statement applies strict mode.
Adds a breakpoint which the debugger can use.