recursal/MDN huggingface dataset:
if...else
=========

**`if...else`** 文は、指定された条件が真値ならば文を実行します。条件が偽値なら、オプションの `else` 節にあるもう一方の文を実行します。

試してみましょう
--------

構文
--


```js
if (condition)
  statement1

// else 節付き
if (condition)
  statement1
else
  statement2
```


`condition`

真値または偽値と認識される式です。

`statement1`

*condition* が真値の場合に実行される文です。さらにネストされた `if` 文を含む、どんな文であってもかまいません。複数の文を実行するためには、それらの文をグループ化するためにブロック文 (`{ /* ... */ }`) を使用してください。実行する文がない場合は、空文を使用してください。

`statement2`

`condition` が偽値で、かつ `else` 節が存在するなら実行される文です。ブロック文およびさらにネストされた `if` 文を含む、どんな文であってもかまいません。

解説
--

複数の `if...else` 文をネストすることで、 `else if` 節を作成することができます。 JavaScript では（1 単語の）`elseif` キーワードがありませんので注意してください。


```js
if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
// …
else
  statementN
```


これがどのように動作するか理解するために、ネストが適切にインデントされていたらどのように見えるかを示します。


```js
if (condition1)
  statement1
else
  if (condition2)
    statement2
  else
    if (condition3)
      statement3
// …
```


節の中で複数の文を実行するためには、それらの文をグループ化するためにブロック文 (`{ ... }`) を使ってください。


```js
if (condition) {
  statements1
} else {
  statements2
}
```


ブロックを使用しないと、特にコードが手作業で整形されている場合、混乱した動作になることがあります。


```js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a is 1 and b is 2");
  else
    console.log("a is not 1");
}
```


このコードは何の問題もないように見えますが、`checkValue(1, 3)` を実行すると "a is not 1" というログを出力します。これは、dangling else の場合、`else` 節は最も近い `if` 節に接続されるからです。したがって、上記のコードを適切なインデントで記述すると、次のようになります。


```js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a is 1 and b is 2");
    else
      console.log("a is not 1");
}
```


一般的な良い実践としては、常にブロック文を使用し、特に入れ子の `if` 文を含むコードでは、ブロック文を使用することをお勧めします。


```js
function checkValue(a, b) {
  if (a === 1) {
    if (b === 2) {
      console.log("a is 1 and b is 2");
    }
  } else {
    console.log("a is not 1");
  }
}
```


 プリミティブの論理値である `true` および `false` を `Boolean` オブジェクトの真性や偽性と混同しないでください。 `false`, `undefined`, `null`, `0`, `-0`, `NaN`, 空文字列 (`""`) のいずれでもない値、および任意のオブジェクトは（
 `false` の値を持つ Boolean オブジェクトを含め）、条件として使用されたときに真値と解釈されます。例えば以下のような場合です。


```js
const b = new Boolean(false);
if (b) {
  console.log("b is truthy"); // この条件式は truthy です
}
```

例
-

### if...else の使用


```js
if (cipherChar === fromChar) {
  result += toChar;
  x++;
} else {
  result += clearChar;
}
```

### else if の使用

JavaScript に `elseif` 構文はありませんので注意してください。 `else` と `if` の間に空白を置いて記述してください。


```js
if (x > 50) {
  /\* 何かを行う \*/
} else if (x > 5) {
  /\* 何かを行う \*/
} else {
  /\* 何かを行う \*/
}
```

### 条件式の中での代入

`x = y` のように代入を条件とする `if...else` を持つことは、稀であるはずです。


```js
if (x = y) {
  /\* 何かを行う \*/
}
```


しかし、稀にそのようなことをしたくなった場合、`while` のドキュメントの代入を条件として使用の節に、知っていて従うべき、一般的に良い実践を示した例を紹介しています。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-if-statement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `block`
* `switch`
* 条件演算子
class
=====

Baseline Widely available
-------------------------

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

* Learn more
* See full compatibility
* Report feedback
**`class`** 宣言は、プロトタイプベースの継承を使って、指定された名前の新しいクラスを作成します。

クラス式を使ってクラスを定義することもで、その場合は再定義やクラス名の省略ができます。同じスコープで**クラス宣言**を同じ名前で行おうとすると、`SyntaxError` が発生します。

試してみましょう
--------

構文
--


```js
class name [extends otherName] {
  // クラス本体
}
```

解説
--

クラス式と同様、クラス宣言の内部は厳格モードで実行されます。`constructor` メソッドは省略可能です。

クラス宣言は `let` や `const` と同様に動作し、巻き上げが行われません（関数宣言とは異なります）。

例
-

### 単純なクラス宣言

次の例では、はじめに `Rectangle` という名前のクラスを定義し、次にそれを拡張して `FilledRectangle` という名前のクラスを作成します。

なお、コンストラクター (`constructor`) で使われている `super()` は、コンストラクター内でのみ使えること、 `this` キーワードの使用*前*に呼び出さなくてはならないことに注意してください。


```js
class Rectangle {
  constructor(height, width) {
    this.name = "Rectangle";
    this.height = height;
    this.width = width;
  }
}

class FilledRectangle extends Rectangle {
  constructor(height, width, color) {
    super(height, width);
    this.name = "Filled rectangle";
    this.color = color;
  }
}
```

### クラスを二度宣言しようとする

クラス宣言を使って再度クラスを宣言すると、 `SyntaxError` が発生します。


```js
class Foo {}
class Foo {} // Uncaught SyntaxError: Identifier 'Foo' has already been declared
```


クラス式を使って事前にクラスを定義していたときも、同じエラーが発生します。


```js
let Foo = class {};
class Foo {} // Uncaught SyntaxError: Identifier 'Foo' has already been declared
```


Firefox のウェブコンソール (**ツール** > **ウェブ開発者** > **ウェブコンソール**) などの REPL で実験しているときに、同じ名前のクラス宣言を 2 つの入力で実行すると、同じ再宣言エラーが発生することがあります。この課題については、Firefox bug 1580891で詳しく議論されていますので、ご覧ください。Chrome コンソールでは、異なる REPL 入力間でのクラスの再宣言が可能です。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-class-definitions |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `function` 宣言
* `class` 式
* クラス
式文
==

**式文**は、文を記述すべき場所で使用する式です。式は評価され、その結果は捨てられます。したがって、関数の実行や変数の更新など、副次的な効果のある式にのみ意味があります。

構文
--


```js
expression;
```


`expression`

評価する任意の式です。他の文と紛らわしい特定の式は曖昧ですので禁止されています。

解説
--

文専用の構文とは別に、ほとんどすべての式をそれ自体で文として使用することもできます。式の構文では、終わりにセミコロンが必要ですが、セミコロンがないために構文が不正になる場合は、自動セミコロン挿入で挿入されることがあります。

式は発生した後に破棄されるため、式の結果は利用できません。したがって、式が有益なものとなるためには、式に何か副次的な効果がある必要があります。式文は一般的に次のものです。

* 関数呼び出し (`console.log("Hello");`, `[1, 2, 3].forEach((i) => console.log(i));`)
* タグ付きテンプレートリテラル
* 代入式（複合演算子を含む）
* インクリメント／デクリメント演算子
* `delete`
* `import()`
* `yield` および `yield*`

他にも副次的な効果がある場合があるものとして、ゲッターの呼び出しや型変換の実行があります。

### 禁止されている式

式を文として使用するためには、他の文の構文とあいまいであってはいけません。したがって、式は以下のいずれかのトークンで始めてはいけません。

* `function`: `function` 宣言または `function*` 宣言となり、`function` 式または `function*` 式とはならない。
* `async function`: `async function` 宣言または `async function*` 宣言となり、`async function` 式または `async function*` 式とはならない。
* `class`: `class` 宣言となり、`class` 式にはならない。
* `let[`: `let` 宣言 の配列の分割代入となり、`let` 上のプロパティアクセサーにはならない（`let` は厳格モード以外でのみ識別子になる）
* `{`: ブロック文となり、オブジェクトリテラルにはなりません。

従って、以下のものは全て不正です。


```js
function foo() {
  console.log("foo");
}(); // SyntaxError: Unexpected token '('

// 何らか理由で、`let` という変数を作った
var let = [1, 2, 3];
let[0] = 4; // SyntaxError: Invalid destructuring assignment target

{
  foo: 1,
  bar: 2, // SyntaxError: Unexpected token ':'
};
```


さらに危険なことに、たまたま有効な構文であったとしても、意図しないコードになってしまうこともあります。


```js
// 何らか理由で、`let` という変数を作った
var let = [1, 2, 3];

function setIndex(index, value) {
  if (index >= 0) {
    // 配列 `let` に割り当てるつもりが、余計な変数を作成してしまう！
    let[index] = value;
  }
}

setIndex(0, [1, 2]);
console.log(let); // [1, 2, 3]

// これはオブジェクトリテラルではなくブロック文となり、
// `foo` はラベル、`1` は式文になる
// コンソールで起こることが多い
{ foo: 1 };
```


このような問題を避けるために、括弧を使用することで、一義的に式文となるようにすることができます。


```js
(function foo() {
  console.log("foo");
})();
```

例
-

### 制御フロー文の回避

制御フロー文の使用は、式文を使ってほとんど避けることができます。例えば、`if...else` は三項演算子や論理演算子に置き換えることができます。`for` や `for...of` のような反復処理文は、配列メソッドに置き換えることができます。


```js
// 制御フロー文の使用
function range(start, end) {
  if (start > end) {
    [start, end] = [end, start];
  }
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

// 式文の使用
function range2(start, end) {
  start > end && ([start, end] = [end, start]);
  return Array.from({ length: end - start }, (\_, i) => start + i);
}
```


**警告:** これは、言語の能力の一端を示すに過ぎません。制御フロー文の代用として式文を過剰に使用すると、コードの可読性が大幅に低下する可能性があります。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-expression-statement |

関連情報
----

* 文と宣言
* 式と演算子
while
=====

**`while`** 文は、テスト条件が真と評価されている間、指定された文を実行するループを作成します。条件はその文を実行する前に評価されます。

試してみましょう
--------

構文
--


```js
while (condition)
  statement
```


`condition`

ループを通過するごとに、その前に評価される式。この条件が真と評価された場合は、 `statement` が実行されます。条件が偽と評価された場合は、実行は `while` ループの後の文に続きます。

`statement`

条件が真と評価されている間に実行される文。ループ内で複数の文を実行する場合は、ブロック文 (`{ /* ... */ }`) を使用してそれらの文をグループ化してください。

メモ: `break` 文を使用すると、条件が真と評価される前にループを停止することができます。

例
-

### while の使用

次の `while` ループは、 `n` が 3 より小さい間反復します。


```js
let n = 0;
let x = 0;

while (n < 3) {
  n++;
  x += n;
}
```


それぞれの反復で、ループは `n` を増加させ、それを `x` に加えます。したがって、 `x` および `n` は次の値をとります。

* 最初の通過の後: `n` = 1 および `x` = 1
* 2 回目の通過の後: `n` = 2 および `x` = 3
* 3 回目の通過の後: `n` = 3 および `x` = 6

3 回目の通過が完了した後、条件 `n` < 3 は真ではなくなり、ループは終了します。

### 代入を条件として使用

場合によっては、代入を条件として使用することに意味があることもあります。これは読みやすさとトレードオフの関係にあるので、このパターンを誰にでもわかりやすくするための、ある種の文体上の推奨事項があります。

次の例は、文書のコメントを反復処理し、コンソールにログ出力するものです。


```js
const iterator = document.createNodeIterator(document, NodeFilter.SHOW\_COMMENT);
let currentNode;
while (currentNode = iterator.nextNode()) {
  console.log(currentNode.textContent.trim());
}
```


これは完全によい例とは言えません。特に次の行があるからです。


```js
while (currentNode = iterator.nextNode()) {
```


その行の動作は、毎回コメントノードが得られるという点では問題ありません。

1. `iterator.nextNode()` がコメントノードを返し、それが `currentNode` に代入される。
2. `currentNode = iterator.nextNode()` の値は、従って真値となる。
3. そのため、`console.log()` の呼び出しを実行し、ループが継続される。

…そして、文書中にコメントノードがなくなったとき、次のようになります。

1. `iterator.nextNode()` は `null`` を返す。
2. 従って `currentNode = iterator.nextNode()` も `null` になり、これは偽値である。
3. そのため、ループを終了する。

この行の問題は、条件式にはふつう比較演算子、例えば `===` を使用するものですが、この行の `=` は比較演算子ではなく、代入演算子です。そのため、`=` は `===` の間違いのように見えてしまいます（実際には間違いではなくても）。

従って、このようにすると、一部のコードリンティングツール、例えば ESLint の `no-cond-assign` ルールなどは、誤記の可能性があるものを発見して修正しやすくするために、以下のような警告を報告します。

> 
> Expected a conditional expression and instead saw an assignment.（条件式が期待されるところに代入がありました。）
> 
> 
> 

多くのスタイルガイドでは、条件式に代入式を書くことが意図的であることを、より明確に示すことを推奨しています。それを行うための最小限の方法として、括弧をグループ化演算子として追加して代入式を囲む方法があります。


```js
const iterator = document.createNodeIterator(document, NodeFilter.SHOW\_COMMENT);
let currentNode;
while ((currentNode = iterator.nextNode())) {
  console.log(currentNode.textContent.trim());
}
```


実際、これは ESLint の `no-cond-assign` の既定値や Prettier で強制されているスタイルなので、このパターンをよく見かけるでしょう。

条件を明示的な比較に変えるために比較演算子を追加することを勧める人もいます。


```js
while ((currentNode = iterator.nextNode()) !== null) {
```


このパターンは他にも書き方があります。


```js
while ((currentNode = iterator.nextNode()) && currentNode) {
```


あるいは、`while` ループを使用するアイディアを完全に放棄する方法もあります。


```js
const iterator = document.createNodeIterator(document, NodeFilter.SHOW\_COMMENT);
for (
  let currentNode = iterator.nextNode();
  currentNode;
  currentNode = iterator.nextNode()
) {
  console.log(currentNode.textContent.trim());
}
```


読者が条件式のパターンとして代入式を記述することに十分に慣れていれば、これらの読みやすさはすべて同じくらいのはずです。そうでなければ、最も冗長ではありますが、最後の形式が最も読みやすいでしょう。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-while-statement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `do...while`
* `for`
* `break`
* `continue`
return
======

**`return`** 文は関数の実行を終了して、関数の呼び出し元に返す値を指定します。

試してみましょう
--------

構文
--


```js
return;
return expression;
```


`expression`

値が返される式。省略した場合は、代わりに `undefined` が返されます。

解説
--

`return` 文が関数本体の中で使用された際、その関数の実行が停止します。値を指定した場合、与えられた値が関数の呼び出し元に返されます。例として、以下の関数は引数 `x` が数値のとき、`x` の二乗を返します。


```js
function square(x) {
  return x \* x;
}
const demo = square(3);
// demo は 9 に等しい
```


値が省略された場合は、代わりに `undefined` が返されます。

以下の return 文はすべて関数の実行を中断するものです。


```js
return;
return true;
return false;
return x;
return x + y / 3;
```

### 自動セミコロン挿入

`return` 文は自動セミコロン挿入 (ASI) の影響を受けます。`return` キーワードと式の間の改行コードは許容されません。


```js
return
a + b;
```


上記のコードは ASI によって以下のように変換されます。


```js
return;
a + b;
```


コンソールは "unreachable code after return statement" と警告します。

**メモ:** Firefox 40 以降から `return` 文の後に到達不可能なコードが見つかった場合、コンソールに警告が表示されます。

括弧を使用することで、この問題を回避する（ASI を防ぐ）ことができます。


```js
return (
  a + b
);
```

例
-

### 関数を中断する

関数は `return` が呼び出された時点で即座に終了します。


```js
function counter() {
  // 無限ループ
  for (let count = 1; ; count++) {
    console.log(`${count}A`); // 5 まで
    if (count === 5) {
      return;
    }
    console.log(`${count}B`); // 4 まで
  }
  console.log(`${count}C`); // 決して現れない
}

counter();

// ログ:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A
```

### 関数を返す

クロージャについての記事も参照のこと。


```js
function magic() {
  return function calc(x) {
    return x \* 42;
  };
}

const answer = magic();
answer(1337); // 56154
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-return-statement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関数
* クロージャ
break
=====

**`break`** 文は現在のループや `switch` 文を終了し、プログラムの制御を終了した文の次の文に移します。ラベル付きの文の中で使用された場合は、ラベル付きの文を飛び越えるためにも使われます。

試してみましょう
--------

構文
--


```js
break;
break label;
```


`label` 省略可

終了する文のラベルに関連付けられた識別子。`break` 文がループや `switch` の中に入れ子になっていない場合は、ラベル識別子が必要です。

解説
--

`break;` に遭遇すると、プログラムは最も内側の `switch` またはループ文から抜け出し、その次の文から実行を続けます。

`break label;` に遭遇すると、プログラムは `label` でラベル付けされた文から抜け出し、その次の文の実行を続けます。`break` 文は参照されるラベルの内側にある必要があります。ラベルはあらゆるブロック文に付けることができます。ループ文の前である必要はありません。

`break` 文は、その後にラベルがあるかどうかに関わらず、スクリプト、モジュール、関数の本体、静的初期化ブロックのそれぞれ最上位で使用することはできません。その関数やクラスがさらにループの中に含まれていた場合でもです。

例
-

### while ループにおける break

次の関数には `break` 文があり、`i` が `3` の時に `while` 文を終了させるので、`3 * x` の値を返します。


```js
function testBreak(x) {
  let i = 0;

  while (i < 6) {
    if (i === 3) {
      break;
    }
    i += 1;
  }

  return i \* x;
}
```

### switch 文における break

次のコードには、一致する case と対応するコードが実行された後で `switch` 文を終了するための `break` があります。


```js
const food = "sushi";

switch (food) {
  case "sushi":
    console.log("Sushi is originally from Japan.");
    break;
  case "pizza":
    console.log("Pizza is originally from Italy.");
    break;
  default:
    console.log("I have never heard of that dish.");
    break;
}
```

### ラベル付きブロックにおける break

次のコードは、ラベル付きブロックで `break` 文を使っています。`break outerBlock` を使用すると、制御は `outerBlock` としてマークされたブロック構文の末尾に移動します。


```js
outerBlock: {
  innerBlock: {
    console.log("1");
    break outerBlock; // innerBlock および outerBlock の両方から抜けます
    console.log(":-("); // スキップされる
  }
  console.log("2"); // スキップされる
}
```

### 構文違反の break 文

`break` 文は参照先のラベルの中になければなりません。次のコードもラベル付きブロックで `break` 文を使っていますが、`break` 文が `block2` を参照しているにもかかわらず `block2` の中にないので、構文エラーが発生します。


```js
block1: {
  console.log("1");
  break block2; // SyntaxError: label not found
}

block2: {
  console.log("2");
}
```


構文エラーは、次のコードのように `break` がループの中や、`break` 文によって脱出しようとしているラベル付きブロックの中で入れ子になっている関数で使われた場合にも、構文エラーが発生します。


```js
function testBreak(x) {
  let i = 0;

  while (i < 6) {
    if (i === 3) {
      (() => {
        break;
      })();
    }
    i += 1;
  }

  return i \* x;
}

testBreak(1); // SyntaxError: Illegal break statement
```



```js
block1: {
  console.log("1");
  (() => {
    break block1; // SyntaxError: Undefined label 'block1'
  })();
}
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-break-statement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `continue`
* ラベル
* `switch`
ブロック
====

**ブロック文** は 0 個以上の文をグループ化するのに使われます。ブロックは中括弧（「波括弧」）の組で区切られ、0 個以上の文または宣言のリストを含みます。

試してみましょう
--------

構文
--


```js
{
  StatementList
}
```


`StatementList`

ブロック文の中でグループ化される文や宣言です。

解説
--

ブロック文は、他の言語ではよく**複合文**と呼ばれます。これは複数の文を JavaScript からみて 1 つの文にまとめるために使用します。ブロック内に複数の文をまとめることは、JavaScript では、特に `if...else` and `for` などのフロー制御文との関連で良く行われることです。反対の動作は空文を使用することで実現でき、これは 1 つの文が必要な場所に文を置かずにおくことができます。

さらに、`let`、`const`、`class` などのブロックスコープ宣言と組み合わせることで、IIFE のように、一時変数がグローバル名前空間を汚染するのを防ぐことができます。

### 非厳格モード時の var または関数定義のブロックスコープの規則

非厳格モードでは、`var` の宣言や、関数宣言で作成された変数は、ブロックスコープを**持ちません**。ブロック内で導入された変数は、それを含んでいる関数またはスクリプトがスコープとなり、変数を設定した効果は、そのブロック自体を超えて持続します。言い換えれば、ブロック文はスコープを作成しません。例えば、


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


これが 2 を出力するのは、ブロックの中の `var x` 文がブロックより前と同じスコープを持つからです。

非厳格モードでは、ブロック内の関数定義は奇妙な動きをします。使用しないでください。

### 厳格モード時の let、const、関数宣言のブロックスコープの規則

対照的に、`let`、`const`、`class` で宣言された識別子は、ブロックスコープを持ちます。


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


この `x = 2` は、それが定義されたブロックのスコープに制限されています。

同じことが `const` にも言えます。


```js
const c = 1;
{
  const c = 2;
}
console.log(c); // 1 が出力され、SyntaxError は発生しない...
```


ブロックスコープを持つ `const c = 2` は、ブロック内で固有に宣言することができるため、`SyntaxError: Identifier 'c' has already been declared` を発生させ*ない*ことに注意してください。

厳格モードでは、ブロック内の関数宣言はそのブロックのスコープを持ち、巻き上げられます。


```js
"use strict";

{
  foo(); // "foo" と出力
  function foo() {
    console.log("foo");
  }
}

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

例
-

### for ループの本体としてブロック文を使用する

`for` ループは本体として単一の文を受け入れます。


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


ループ本体で複数の文を使用したい場合は、1 つのブロック文にまとめることができます。


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

### ブロック文を使用したデータのカプセル化

`let` と `const` の宣言は、それを含むブロックのスコープになります。これにより、データを関数で包むことなく、グローバルスコープから隠すことができます。


```js
let sector;
{
  // これらの変数はこのブロックのスコープであり、
  // ブロックの後でアクセスすることはできません。
  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"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-block |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `while`
* `if...else`
* `let`
debugger
========

**`debugger`** 文は、ブレークポイントの設定などの任意の利用可能なデバッグ機能を呼び出します。デバッグ機能が利用可能ではない場合、この文は効果がありません。

構文
--


```js
debugger;
```

例
-

### debugger 文の使用

次の例は、関数が呼び出されたときに、デバッガーを（存在すれば）呼び出すように、 `debugger` 文が挿入されているコードを示します。


```js
function potentiallyBuggyCode() {
  debugger;
  // do potentially buggy stuff to examine, step through, etc.
}
```


デバッガーが起動していると、実行は `debugger` 文で停止します。スクリプトのソース内でのブレークポイントと似ています。

![開発者ツールをブラウザーに開き、デバッガーパネルで、変数、スコープ、イベントなどを詳しく調べるために、デバッガー文で実行を一時停止している様子。](/ja/docs/Web/JavaScript/Reference/Statements/debugger/screen_shot_2014-02-07_at_9.14.35_am.png)

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-debugger-statement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Firefox 開発者ツール内のデバッガー （英語）
右シフト代入 (>>=)
============

右シフト代入演算子 (`>>=`) は、指定された数だけビットを右に移動し、結果を変数に代入します。

試してみましょう
--------

構文
--


```js
x >>= y; // x = x >> y
```

例
-

### 右シフト代入の使用


```js
let a = 5; // (00000000000000000000000000000101)
a >>= 2; // 1 (00000000000000000000000000000001)

let b = -5; // (-00000000000000000000000000000101)
b >>= 2; // -2 (-00000000000000000000000000000010)
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* JavaScript ガイドの代入演算子
* 右シフト演算子
減算代入 (-=)
=========

減算代入演算子 (`-=`) は、変数から右辺のオペランドの値を減算し、結果を変数に代入します。

試してみましょう
--------

構文
--


```js
x -= y; // x = x - y
```

例
-

### 減算代入の使用


```js
// 次の変数を想定
// bar = 5

bar -= 2; // 3
bar -= "foo"; // NaN
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* JavaScript ガイドの代入演算子
* 減算演算子
グループ化演算子 ( )
============

グループ化演算子 `( )` は、式での評価の優先順位を制御します。

試してみましょう
--------

構文
--


```js
( )
```

解説
--

グループ化演算子は、式または部分式の周りに括弧のペアで構成され、通常の演算子の優先順位を上書きし、より低い優先順位の式をより高い優先順位の式の前に評価できるようにします。その名の通り、括弧の中にあるものをグループ化します。

例
-

### グループ化演算子の使用

最初に乗算と除算をし、次に加算と引き算をする優先順位を、最初に加算を評価するように上書きします。


```js
var a = 1;
var b = 2;
var c = 3;

// default precedence
a + b \* c; // 7
// evaluated by default like this
a + (b \* c); // 7

// now overriding precedence
// addition before multiplication
(a + b) \* c; // 9

// which is equivalent to
a \* c + b \* c; // 9
```


 これらの例では、評価の左から右への順序が維持されていることに注意してください。つまり、*演算子*の評価順序は変わっていますが、*オペランド*の評価順序は変わっていません。
 例えば次のコードを見てください。


```js
a() \* (b() + c());
```


関数 `a` は関数 `b` よりも前に、また関数 `b` は関数 `c` よりも前に呼び出されます。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-grouping-operator |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 演算子の優先順位
* `delete`
* `typeof`
クラス式
====

**クラス式**は、 ECMAScript 2015 でクラスを定義する方法の 1 つです。関数式と同じように、クラス式は名前を付けることも付けないこともできます。名前を付けた場合、クラス名はクラス内部のみのローカルです。

JavaScript のクラスはプロトタイプベースの継承が使われます。

試してみましょう
--------

構文
--


```js
const MyClass = class [className] [extends otherClassName] {
  // クラス本体
}
```

解説
--

クラス式の構文は、クラス宣言（文） と似ています。 `class` 文では、 `class` 式の本体が厳格モードで実行されます。

しかし、クラス式とクラス文ではいくつかの相違点があります。

* クラス式ではクラス名（「束縛識別子」 (binding identifier)）を省略できますが、クラス文では省略できません。
* クラス式は `SyntaxError` を**発生させずに**クラスを再宣言することができます。これはクラス文の場合はできません。

`constructor` メソッドは省略可能です。クラス式で生成されたクラスは、常に `typeof` が "`function`" の値を返します。


```js
"use strict";
let Foo = class {}; // コンストラクタープロパティは省略可能
Foo = class {}; // 再宣言が可能

typeof Foo; // "function" を返す
typeof class {}; // "function" を返す

Foo instanceof Object; // true
Foo instanceof Function; // true
class Foo {} // SyntaxError が発生 (クラス宣言は再宣言ができない)
```

例
-

### 簡単なクラス式

以下は、名前のない簡単なクラス式です。変数 `Foo` を使って参照できます。


```js
const Foo = class {
  constructor() {}
  bar() {
    return "Hello World!";
  }
};

const instance = new Foo();
instance.bar(); // "Hello World!"
Foo.name; // "Foo"
```

### 名前付きクラス式

クラス内部で現在のクラスを参照したい場合は、*名前付きクラス式*を作成してください。この名前は、そのクラス式自身のスコープ内だけで見ることができます。


```js
const Foo = class NamedFoo {
  constructor() {}
  whoIsThere() {
    return NamedFoo.name;
  }
};
const bar = new Foo();
bar.whoIsThere(); // "NamedFoo"
NamedFoo.name; // ReferenceError: NamedFoo is not defined
Foo.name; // "NamedFoo"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-class-definitions |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関数式
* クラス宣言
* クラス