Block-Anweisung

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Eine Block-Anweisung wird verwendet, um null oder mehr Anweisungen zu gruppieren. Der Block wird durch ein Paar geschweifte Klammern ("Curly Braces") begrenzt und enthält eine Liste von null oder mehr Anweisungen und Deklarationen.

Probieren Sie es aus

var x = 1;
let y = 1;

if (true) {
  var x = 2;
  let y = 2;
}

console.log(x);
// Expected output: 2

console.log(y);
// Expected output: 1

Syntax

js
{
  StatementList
}
StatementList

Anweisungen und Deklarationen, die innerhalb der Block-Anweisung gruppiert sind.

Beschreibung

Die Block-Anweisung wird in anderen Sprachen oft als compound statement (zusammengesetzte Anweisung) bezeichnet. Sie ermöglicht die Verwendung mehrerer Anweisungen, wo JavaScript nur eine einzelne Anweisung erwartet. Das Kombinieren von Anweisungen in Blöcken ist eine gängige Praxis in JavaScript, besonders in Verbindung mit Kontrollflussanweisungen wie if...else und for. Das gegenteilige Verhalten ist mit einer leeren Anweisung möglich, bei der Sie keine Anweisung bereitstellen, obwohl eine erforderlich ist.

Darüber hinaus können Blöcke, in Kombination mit block-skopierten Deklarationen wie let, const und class, temporäre Variablen daran hindern, den globalen Namensraum zu verschmutzen, ähnlich wie es IIFEs tun.

Block-Skoping-Regeln mit var oder Funktionsdeklaration im Nicht-Strikten-Modus

Variablen, die mit var deklariert oder durch Funktionsdeklarationen im Nicht-Strikten-Modus erstellt werden, haben keinen Block-Scope. Variablen, die innerhalb eines Blocks eingeführt werden, sind auf die umgebende Funktion oder das Skript beschränkt, und die Auswirkungen ihres Setzens bleiben über den Block hinaus bestehen. Zum Beispiel:

js
var x = 1;
{
  var x = 2;
}
console.log(x); // 2

Dies gibt 2 aus, da die Anweisung var x innerhalb des Blocks im selben Scope wie die var x-Anweisung vor dem Block liegt.

In nicht-striktem Code verhalten sich Funktionsdeklarationen innerhalb von Blöcken eigenartig. Vermeiden Sie es, sie zu verwenden.

Block-Skoping-Regeln mit let, const, class oder Funktionsdeklaration im Strikten-Modus

Im Gegensatz dazu haben Identifikatoren, die mit let, const und class deklariert wurden, einen Block-Scope:

js
let x = 1;
{
  let x = 2;
}
console.log(x); // 1

Das x = 2 ist im Scope auf den Block begrenzt, in dem es definiert wurde.

Das Gleiche gilt für const:

js
const c = 1;
{
  const c = 2;
}
console.log(c); // 1; does not throw SyntaxError

Beachten Sie, dass das block-skopierte const c = 2 keinen SyntaxError: Identifier 'c' has already been declared auslöst, da es eindeutig innerhalb des Blocks deklariert werden kann.

Im strikten Modus sind Funktionsdeklarationen innerhalb von Blöcken auf diesen Block beschränkt und werden an die Spitze des Blocks "gehoben" (hoisting).

js
"use strict";

{
  foo(); // Logs "foo"
  function foo() {
    console.log("foo");
  }
}

foo(); // ReferenceError: foo is not defined

Beispiele

Verwendung einer Block-Anweisung als Körper einer for-Schleife

Eine for-Schleife akzeptiert eine einzelne Anweisung als ihren Körper.

js
for (let i = 0; i < 10; i++) console.log(i);

Wenn Sie mehr als eine Anweisung im Schleifenkörper verwenden möchten, können Sie sie in eine Block-Anweisung gruppieren:

js
for (let i = 0; i < 10; i++) {
  console.log(i);
  console.log(i ** 2);
}

Verwendung einer Block-Anweisung zur Einkapselung von Daten

Deklarationen mit let und const sind auf den umgebenden Block beschränkt. Dies ermöglicht es Ihnen, Daten vor dem globalen Scope zu verbergen, ohne sie in eine Funktion einzuschließen.

js
let sector;
{
  // These variables are scoped to this block and are not
  // accessible after the block
  const angle = Math.PI / 3;
  const radius = 10;
  sector = {
    radius,
    angle,
    area: (angle / 2) * radius ** 2,
    perimeter: 2 * radius + angle * radius,
  };
}
console.log(sector);
// {
//   radius: 10,
//   angle: 1.0471975511965976,
//   area: 52.35987755982988,
//   perimeter: 30.471975511965976
// }
console.log(typeof radius); // "undefined"

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-block

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch