JAVASCRIPT
JavaScript Code Block: Syntax, Usage, and Examples
A JavaScript code block is a group of one or more statements enclosed in curly braces {}. Code blocks are used to control which pieces of code run and when, especially inside conditionals, loops, and functions.
How to Use a Code Block in JavaScript
To write a code block in JavaScript, simply wrap your statements inside {}. This structure groups the code together and tells JavaScript to treat it as one unit.
Learn JavaScript on Mimo
JSX
if (true) {
console.log("I'm inside a code block!");
}
The curly braces here define the code block. Even if there's only one statement inside, using {} clearly marks the beginning and end of that block.
You’ll see code blocks in JavaScript used in many places:
- After
if,else if, andelse - In
for,while, anddo...whileloops - Inside functions
- Inside arrow functions with multiple statements
When to Use JavaScript Code Blocks
Code blocks aren't just decorative — they're essential for grouping logic and defining scope. Here are some common scenarios where you'll use a code block in JavaScript.
1. Conditional Logic
A code block is required if you want to execute multiple statements in an if or else block. Without curly braces, only the next line runs.
JSX
const age = 20;
if (age >= 18) {
console.log("You can vote.");
console.log("And get a driver's license.");
}
2. Loops
Every loop structure in JavaScript relies on a code block to know which code should repeat.
JSX
for (let i = 0; i < 3; i++) {
console.log("Loop number:", i);
}
3. Function Bodies
Functions must have a block to contain their code. Even a short function like this one uses a code block.
JSX
function greet() {
console.log("Hello!");
}
4. Arrow Functions with Multiple Lines
For arrow functions, a code block is required if you're doing more than just returning a value.
JSX
const sayHi = () => {
const name = "Tariq";
console.log(`Hi, ${name}!`);
};
Examples of JavaScript Code Blocks
Let’s look at different types of code blocks in action.
Example 1: Code Block in an If Statement
JSX
const isRaining = true;
if (isRaining) {
console.log("Take an umbrella.");
console.log("Or wear a raincoat.");
}
Without the code block, only the first line would run. The second would run regardless of the condition.
Example 2: Code Block in a Loop
JSX
let count = 0;
while (count < 2) {
console.log("Counting:", count);
count++;
}
The code block includes both console.log and count++, so both happen with each loop.
Example 3: Code Block in a Function
JSX
function sum(a, b) {
const result = a + b;
return result;
}
Here, the code block groups the variable declaration and the return statement.
Example 4: Code Block in an Else Block
JSX
const isLoggedIn = false;
if (isLoggedIn) {
console.log("Welcome back!");
} else {
console.log("Please log in.");
}
The else block runs only if the if condition fails. The {} ensure the right group of actions runs.
Learn More About JavaScript Code Blocks
Code Block Scope
Each JavaScript code block introduces a new block scope. This affects how variables behave. For example, let and const variables are only accessible inside the block where they’re declared.
JSX
{
let secret = "hidden";
console.log(secret); // works
}
console.log(secret); // ReferenceError
This concept helps prevent bugs and keeps your variables tidy.
Code Blocks vs. Single-Line Statements
JavaScript allows single-line statements without code blocks, but this can lead to problems.
JSX
if (true)
console.log("Only this runs");
console.log("This always runs"); // ⚠️ Runs regardless of the condition
Adding a code block avoids confusion:
JSX
if (true) {
console.log("Now it's clear both belong to the if!");
}
Nested Code Blocks
You can place one code block inside another. This is common in nested conditionals or loops.
JSX
for (let i = 0; i < 2; i++) {
if (i === 1) {
console.log("Nested block triggered");
}
}
Nested blocks help organize complex logic and keep related actions grouped together.
Formatting and Readability
Using code blocks consistently improves readability. Even when JavaScript doesn't require them, it's a good habit to include {} — especially when you're working on a team or revisiting your own code later.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot