bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/JavaScript/JavaScript Foundations
JavaScript•JavaScript Foundations

JavaScript Code Blocks

Curly Braces

A code block or block statement is a group of statements enclosed within curly braces { } .

Code blocks are important for controlling the flow of execution and defining variable scope within a JavaScript program.

Code Blocks and Statements

Code blocks allows for multiple statements to be treated as a single unit.

The body of a JavaScript function is always enclosed within a code block:

Example

function myFunction() {
  // This is a code block
}

Code blocks are essential for if statements :

if (condition) {
 // This is a code block
} else {
// This is a code block
}

Code blocks are essential for loop statements :

for (expression 1; expression 2; expression 3) {
 // This is a code block
}
while (condition) {
 // This is a code block
}

Defining Scope

Variables declared with let and const inside a code block are "block-scoped," meaning they are only accessible within that specific block.

This helps prevent unintended variable overwrites and promotes better code organization:

Example

{
  let x = 10;
  // x is accessible here
}
// x is not accessible here

Standalone Blocks

Code blocks can also exist independently without being attached to an if statement, a function or a loop.

This can be used to create a scope for let and const variables.

Example

{
  let x = 10;
  let y = 100;
  let areal = x * y;
}

This example above demonstrates how a standalone block can be used to limit the scope of variables.

Encapsulation

Variables inside the block are only available in the block.

This prevents "polluting" the global scope, keeps the code clean, and reduces the risk of name collisions.

Temporary Use

If you only need variables for a calculation, a block lets you declare them, use them, and discard them.

Organized Code

You can group related variables and statements in their own scope to avoid accidental name conflict without forcing them into a function or an object.

This improves readability and avoids accidental name conflictre-use of variable names outside the block.

Previous

JavaScript Functions

Next

JavaScript Primitives

This chapter

Overview
51

Lessons

194m

Read time

1. JavaScript Tutorial2. JavaScript Syntax3. JavaScript Operators4. JavaScript if5. JavaScript Loops6. JavaScript Functions7. JavaScript Scope8. JavaScript Data Types9. JavaScript Style Guide10. JavaScript Introduction11. JavaScript Statements12. JavaScript Arithmetic13. JavaScript else14. JavaScript For Loop15. JavaScript Functions16. JavaScript Code Blocks17. JavaScript Primitives18. JavaScript Best Practices19. JavaScript Where To20. JavaScript Comments21. JavaScript Assignment22. The JavaScript Ternary Operator23. JavaScript While Loops24. Invoking JavaScript Functions25. JavaScript Hoisting26. JavaScript Built-In Objects27. JavaScript Common Mistakes28. JavaScript Output29. JavaScript Variables30. JavaScript Comparison31. JavaScript Switch Statement32. JavaScript Break33. JavaScript Function Parameters34. JavaScript Use Strict35. JavaScript typeof36. JavaScript Performance37. JavaScript Let38. JavaScript Conditionals39. JavaScript Booleans40. JavaScript Continue41. JavaScript Function Return42. JavaScript toString()43. JavaScript Const44. JavaScript Logical Operators45. JavaScript Control Flow46. JavaScript Function Arguments47. JavaScript Type Conversion48. JavaScript Datatypes49. JavaScript Function Expressions50. JavaScript Destructuring51. JavaScript Arrow Functions

On this page

Curly BracesCode Blocks and StatementsDefining ScopeStandalone BlocksEncapsulationTemporary UseOrganized Code