recursal/MDN huggingface dataset:
右シフト (>>)
=========

**右シフト演算子 (`>>`)** は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。

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

構文
--


```js
a >> b;
```

解説
--

この演算子は、1 つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。

例えば、 `9 >> 2` は 2 となります。
```

.    9 (10 進数): 00000000000000000000000000001001 (2 進数)
                  --------------------------------
9 >> 2 (10 進数): 00000000000000000000000000000010 (2 進数) = 2 (10 進数)
```


同様に、 `-9 >> 2` は符号が保存されるため、 `-3` になります。
```

.    -9 (10 進数): 11111111111111111111111111110111 (2 進数)
                   --------------------------------
-9 >> 2 (10 進数): 11111111111111111111111111111101 (2 進数) = -3 (10 進数)
```

例
-

### 右シフトの使用


```js
9 >> 2; // 2
-9 >> 2; // -3
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-signed-right-shift-operator |

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

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

関連情報
----

* ビット演算子 (JavaScript ガイド)
* 右シフト代入演算子
null
====

`null` という値は、意図的にオブジェクトの値が存在しないことを表します。これは JavaScript のプリミティブ値の 1 つであり、論理演算では偽値として扱われます。

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

構文
--


```js
null;
```

解説
--

`null` 値は `null` というリテラルです。 `null` は `undefined` のようなグローバルオブジェクトのプロパティではありません。代わりに、 `null` は識別できないことを表し、変数がオブジェクトを指していないことを示します。 API においては、通常はオブジェクトが返されるところで、関連したオブジェクトがない場合に `null` がよく渡されます。


```js
// foo が存在せず、定義も初期化もされていない場合:
foo; //ReferenceError: foo is not defined
```



```js
// foo が存在しているが、型も値も持たない場合:
var foo = null;
foo; //null
```

例
-

### `null` と `undefined` の違い

`null` や `undefined` をチェックする際は、等価 (==) と 厳密等価 (===) 演算子の違い に注意してください（前者では型変換が行われます）。


```js
typeof null; // "object" (歴史的な理由で "null" ではありません)
typeof undefined; // "undefined"
null === undefined; // false
null == undefined; // true
null === null; // true
null == null; // true
!null; // true
isNaN(1 + null); // false
isNaN(1 + undefined); // true
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-null-value |

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

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

関連情報
----

* `undefined`
* `NaN`
* `void` 演算子
function\* 式
============

**`function*`** キーワードは、式の中でジェネレーター関数を定義するために使用することができます。

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

構文
--


```js
function\* [name]([param1[, param2[, ..., paramN]]]) {
  statements
}
```

### 引数

`name` 省略可

関数名。省略可。省略した場合、関数は*無名関数*として認識されます。名前は関数本体のみにローカルです。

`paramN` 省略可

関数に渡される引数の名前。関数は最大 255 個の引数を持つことができます。

`statements`

関数の本体を構成する文。

解説
--

`function*` 式は function\* 文ととてもよく似ており、構文もほとんど同じです。`function*` 式と `function*` 文の主な違いは、`function*` 式で*無名*ジェネレーター関数を生成する場合は*関数名*が省略できる点です。詳細は `functions` をご覧ください。

例
-

### function\* の使用

次の例では、無名ジェネレーター関数を定義し、`x` に代入します。関数は引数の二乗を生成します。


```js
let x = function\* (y) {
  yield y \* y;
};
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-generator-function-definitions |

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

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

関連情報
----

* `function*` 文
* `GeneratorFunction` オブジェクト
* 反復プロトコル
* `yield`
* `yield*`
* `Function` オブジェクト
* `function` 文
* `function` 式
* 関数と関数スコープ
ビット論理和 (|)
==========

ビット論理和演算子 (`|`) は、両方のオペランドの対応するビットのどちらか一方が `1` である位置のビットで `1` を返します。

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

構文
--


```js
a | b;
```

解説
--

オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。
```

変換前: 11100110111110100000000000000110000000000001
変換後:             10100000000000000110000000000001
```


第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。

この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。

OR 演算の真理値表は次のようになります。

| a | b | a OR b |
| --- | --- | --- |
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 1 |


```js
.    9 (10 進数) = 00000000000000000000000000001001 (2 進数)
    14 (10 進数) = 00000000000000000000000000001110 (2 進数)
                   --------------------------------
14 | 9 (10 進数) = 00000000000000000000000000001111 (2 進数) = 15 (10 進数)
```


ある数 `x` と `0` のビット論理和は `x` になります。

例
-

### ビット論理和の使用


```js
// 9 (00000000000000000000000000001001)
// 14 (00000000000000000000000000001110)

14 | 9;
// 15 (00000000000000000000000000001111)
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # prod-BitwiseORExpression |

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

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

関連情報
----

* ビット演算子 (JavaScript ガイド)
* ビット論理和代入演算子
符号なし右シフト代入 (>>>=)
=================

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

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

構文
--


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

例
-

### 符号なし右シフト代入の使用


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

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

仕様書
---

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

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* 符号なし右シフト演算子
加算代入 (+=)
=========

**加算代入 (`+=`)** 演算子は、 2 つのオペランドの加算（数値の加算または文字列の結合のどちらか）を実行し、左オペランドへ結果を代入します。

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

構文
--


```js
x += y
```

解説
--

`x += y` は `x = x + y` と同等ですが、式 `x` は一度しか評価されません。

例
-

### 加算代入の使用


```js
let baz = true;

// 論理値 + 数値 -> 加算
baz += 1; // 2

// 論理値 + 論理値 -> 加算
baz += false; // 2
```



```js
let foo = "foo";

// 文字列 + 論理値 -> 連結
foo += false; // "foofalse"

// 文字列 + 文字列 -> 連結
foo += "bar"; // "foofalsebar"
```



```js
let bar = 5;

// 数値 + 数値 -> 加算
bar += 2; // 7

// 数値 + 文字列 -> 連結
bar += "foo"; // "7foo"
```



```js
let x = 1n;

// 長整数 + 長整数 -> 加算
x += 2n; // 3n

// 長整数 + 数値 -> TypeError が発生
x += 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions
```

仕様書
---

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

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* 加算演算子
yield
=====

`yield` キーワードは、ジェネレーター関数 (`function*` または古いジェネレーター関数) を一時停止したり再開したりするために使用します。

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

構文
--


```js
[rv] = yield[expression];
```


`expression` 省略可

イテレータープロトコル経由でジェネレーター関数が返す値を定義します。省略した場合、代わりに `undefined` が返されます。

`rv` 省略可

ジェネレーターの実行を再開する `next()` メソッドに渡したオプションの値を受け取ります。

解説
--

`yield` キーワードは、ジェネレーター関数の実行を一時停止し、ジェネレーターの呼び出し元に `yield` キーワードに続く値を返します。これは、 `return` キーワードのジェネレーター版と考えることができます。

`yield` はそれを含むジェネレーター関数の中で直接しか呼び出すことしかできません。呼び出し先の関数やコールバックから呼び出すことはできません。

`yield` キーワードはジェネレーターの `next()` メソッドを呼び出させ、 `IteratorResult` オブジェクトを返します。これには `value` と `done` の 2 つのプロパティがあります。 `value` プロパティは `yield` 式の評価結果であり、 `done` は `false`、すなわちジェネレーター関数が完全には完了していないことを示します。

`yield` 式によって実行が停止されると、ジェネレーターの `next()` メソッドが呼び出されるまで、ジェネレーターのコード実行は一時停止します。ジェネレーターの `next()` メソッドが呼ばれるたびに、ジェネレーターの実行が再開され、次のうちのいずれかに達するまで実行されます。

* ジェネレーターを再び停止して、ジェネレーターの新しい値を返す `yield`。再度 `next()` が呼ばれると `yield` の直後から実行が再開されます。
* ジェネレーターから例外を発生させるために使用される `throw`。完全にジェネレーターの実行を停止し、 (通常の例外が発生した場合のように) 呼び出し元で実行が再開されます。
* ジェネレーター関数の末尾。この場合、ジェネレーターの実行は終了し、 `IteratorResult` オブジェクトの `value` に `undefined` が、 `done` に `true` が代入されて呼び出し元に返されます。
* `return` ステートメント。この場合はジェネレーターの実行は終了し、 `IteratorResult` オブジェクトの `value` に `return` ステートメントで指定した値が、 `done` に `true` が代入されて呼び出し元に返されます。

ジェネレーターの `next()` メソッドにオプションの値が渡された場合、その値はジェネレーターの現在の `yield` 操作の返値となります。

ジェネレーターのコードパス、 `yield` 演算子、新しい開始値を `Generator.prototype.next()` に渡すことで指定することができる機能により、ジェネレーターは大きな力と制御を提供します。

**警告:** 残念ながら `next()` は非対称ですが、仕方がありません。常に現在中断している `yield` に値を送りますが、次の `yield` のオペランドを返します。

例
-

### yield の使用

次のコードはジェネレーター関数の定義例です。


```js
function\* countAppleSales() {
  let saleList = [3, 7, 5];
  for (let i = 0; i < saleList.length; i++) {
    yield saleList[i];
  }
}
```


ジェネレーター関数が定義されると、ご覧のようにイテレーターを構築するために使用されます。


```js
let appleStore = countAppleSales(); // Generator { }
console.log(appleStore.next()); // { value: 3, done: false }
console.log(appleStore.next()); // { value: 7, done: false }
console.log(appleStore.next()); // { value: 5, done: false }
console.log(appleStore.next()); // { value: undefined, done: true }
```


next(value) でジェネレーターに値を送ることができます。 'step' はこの [*rv*] = **yield** [*expression*] の構文では返値として評価されます。


```js
function\* counter(value) {
  let step;

  while (true) {
    step = yield ++value;

    if (step) {
      value += step;
    }
  }
}

const generatorFunc = counter(0);
console.log(generatorFunc.next().value); // 1
console.log(generatorFunc.next().value); // 2
console.log(generatorFunc.next().value); // 3
console.log(generatorFunc.next(10).value); // 14
console.log(generatorFunc.next().value); // 15
console.log(generatorFunc.next(10).value); // 26
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # prod-YieldExpression |

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

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

関連情報
----

* Iterator プロトコル (en-US)
* `function*`
* `function* expression`
* `yield*`
乗算 (\*)
=======

乗算演算子 (`*`) はオペランドの積を生成します。

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

構文
--


```js
x \* y;
```

例
-

### 数値を用いた乗算


```js
2 \* 2; // 4
-2 \* 2; // -4
```

### 無限大との乗算


```js
Infinity \* 0; // NaN
Infinity \* Infinity; // Infinity
```

### 非数との乗算


```js
"foo" \* 2; // NaN
```

仕様書
---

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

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

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

関連情報
----

* 加算演算子
* 減算演算子
* 除算演算子
* 剰余演算子
* べき乗演算子
* インクリメント演算子
* デクリメント演算子
* 単項マイナス演算子
* 単項プラス演算子
除算代入 (/=)
=========

除算代入演算子 (`/=`) は変数を右オペランドの値で除算し、結果をその変数に代入します。

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

構文
--


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

例
-

### 除算代入の使用


```js
// 以下の変数があり、すべての演算がこの順に実行されると想定する
// bar = 5

bar /= 2; // 2.5
bar /= 2; // 1.25
bar /= 0; // Infinity
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 ガイドの代入演算子
* 除算演算子
ビット論理和代入 (|=)
=============

ビット論理和代入演算子 (`|=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の OR 演算を実行して、結果を変数に代入します。

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

構文
--


```js
x |= y; // x = x | y
```

例
-

### ビット論理和代入の使用


```js
let a = 5;
a |= 2; // 7
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
// -----------------------------------
// 7: 00000000000000000000000000000111
```

仕様書
---

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

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* ビット論理和演算子
* 論理 OR 代入 (`||=`)
べき乗代入 (\*\*=)
=============

べき乗代入演算子 (`**=`) は、変数の値を右オペランドでべき乗します。

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

構文
--


```js
x \*\*= y; // x = x \*\* y
```

例
-

### べき乗代入の仕様


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

bar \*\*= 2; // 25
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 ガイドの代入演算子
* べき乗演算子
減算 (-)
======

減算演算子 (`-`) は 2 つのオペランドの間で減算し、それらの差を生成します。

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

構文
--


```js
x - y;
```

例
-

### 数値の減算


```js
5 - 3; // 2
3 - 5; // -2
```

### 非数の減算


```js
"foo" - 3; // NaN
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-subtraction-operator-minus |

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

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

関連情報
----

* 加算演算子
* 除算演算子
* 乗算演算子
* 剰余演算子
* べき乗演算子
* インクリメント演算子
* デクリメント演算子
* 単項マイナス演算子
* 単項プラス演算子
メソッド定義
======

ECMAScript 2015 より、オブジェクトイニシャライザーのメソッド定義のための短い構文が導入されました。これは、メソッドの名前に割り当てられた関数の簡略構文です。

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

構文
--


```js
const obj = {
  get property() {},
  set property(value) {},
  property( parameters… ) {},
  \*generator( parameters… ) {},
  async property( parameters… ) {},
  async\* generator( parameters… ) {},

  // 算出されたキーも使用可能:
  get [property]() {},
  set [property](value) {},
  [property]( parameters… ) {},
  \*[generator]( parameters… ) {},
  async [property]( parameters… ) {},
  async\* [generator]( parameters… ) {},
};
```

解説
--

簡略構文は、ECMAScript 第 5 版で導入されたゲッターやセッター構文に似ています。

以下のようなコードがあったとします。


```js
const obj = {
  foo: function () {
    // ...
  },
  bar: function () {
    // ...
  },
};
```


これを以下のように短縮することができます。


```js
const obj = {
  foo() {
    // ...
  },
  bar() {
    // ...
  },
};
```

### ジェネレーターメソッド

ジェネレーターメソッドも、同様に簡略構文を使用して定義することができます。

次のように行います。

* ジェネレータープロパティ名の前にアスタリスク (`*`) が必要です。すなわち、 `* g(){}` は動作しますが、 `g *(){}` は動作しません。
* 非ジェネレーターメソッド定義では `yield` キーワードを入れることはできません。つまり 旧式のジェネレーター関数 (en-US)は動作せず、 `SyntaxError` が発生します。 `yield` は常にアスタリスク (`*`) と一緒に使ってください。


```js
// 名前付きプロパティを使用
const obj2 = {
  g: function\* () {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

// 簡略構文を使用して同じオブジェクトを生成
const obj2 = {
  \*g() {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

const it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1
```

### 非同期メソッド

非同期メソッドも簡略構文を使用して定義することができます。


```js
// 名前付きプロパティ
const obj3 = {
  f: async function () {
    await some_promise;
  },
};

// 簡略構文を使用して同じオブジェクトを生成
const obj3 = {
  async f() {
    await some_promise;
  },
};
```

### 非同期ジェネレーターメソッド

ジェネレーターメソッドも非同期関数にすることができます。


```js
const obj4 = {
  f: async function\* () {
    yield 1;
    yield 2;
    yield 3;
  },
};

// 簡略構文を使用して同じオブジェクトを生成
const obj4 = {
  async \*f() {
    yield 1;
    yield 2;
    yield 3;
  },
};
```

### メソッド定義はコンストラクターではない

メソッドがコンストラクターになることはできません。インスタンス化しようとすると `TypeError` が発生します。


```js
const objA = {
  method() {},
};
new objA.method(); // TypeError: obj.method is not a constructor

const objB = {
  \*g() {},
};
new objB.g(); // TypeError: obj.g is not a constructor (ES2016 で変更)
```

例
-

### 簡単なテストケース


```js
const obj = {
  a: "foo",
  b() {
    return this.a;
  },
};
console.log(obj.b()); // "foo"
```

### 計算されたプロパティ名

簡略構文は計算されたプロパティ名にも対応しています。


```js
const bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo" + 2]() {
    return 2;
  },
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

// A global function
function foo() {
  return 1;
}

let name = "foo";
console.log(window[name]()); // 1
```

仕様書
---

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

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

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

関連情報
----

* `get`
* `set`
* 字句文法
セッター
====

**`set`** 構文は、あるオブジェクトプロパティを、プロパティに設定しようとしたときに呼び出される関数に結びつけます。

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

構文
--


```js
{set prop(val) { . . . }}
{set [expression](val) { . . . }}
```

### 引数

`prop`

与えられた関数を割り当てるプロパティの名称です。

`val`

`prop` に設定しようとする値を保持する変数のエイリアスです。

`expression`

ECMAScript 2015 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。

解説
--

JavaScript では、セッターは指定されたプロパティを変更しようとするたびに関数を実行するために使用されます。セッターはゲッターと組み合わせて、一種の擬似的なプロパティを作成するために、とてもよく使われます。実際の値を保持するプロパティに、同時にセッターを設定することはできません。

なお、 `set` 構文を使用する際の注意事項は次の通りです。

* 識別子は数値でも文字列でも持つことができます。
* 厳密に 1 つの引数を持たなければなりません（詳しくは Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments をご覧ください）。
* あるオブジェクトリテラルが、同じプロパティのための別の `set` を持ったり、データ項目を持ったりしてはいけません。
 （ `{ set x(v) { }, set x(v) { } }` や `{ x: ..., set x(v) { } }` は不可）
例
-

### 新しいオブジェクトでオブジェクトの初期化時にセッターを定義

以下の例では、擬似プロパティ `current` を `language` オブジェクトに定義します。 `current` に値が代入されると、 `log` をその値で更新します。


```js
const language = {
  set current(name) {
    this.log.push(name);
  },
  log: [],
};

language.current = "EN";
console.log(language.log); // ['EN']

language.current = "FA";
console.log(language.log); // ['EN', 'FA']
```


`current` は定義されておらず、あらゆるアクセスを試みてもその結果は `undefined` になることに注意してください。

### `delete` 演算子によるセッターの削除

セッターを削除したい場合は、 `delete` だけで削除できます。


```js
delete language.current;
```

### `defineProperty` を使用して既存のオブジェクトにセッターを定義

*既存の*オブジェクトにセッターを追加するには、 `Object.defineProperty()` を使用します。


```js
const o = { a: 0 };

Object.defineProperty(o, "b", {
  set: function (x) {
    this.a = x / 2;
  },
});

o.b = 10;
// セッターを実行し、 10 / 2 (5) を 'a' プロパティに代入

console.log(o.a);
// 5
```

### 算出されたプロパティ名の使用


```js
const expr = "foo";

const obj = {
  baz: "bar",
  set [expr](v) {
    this.baz = v;
  },
};

console.log(obj.baz);
// "bar"

obj.foo = "baz";
// セッターを実行

console.log(obj.baz);
// "baz"
```

仕様書
---

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

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

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

関連情報
----

* ゲッター
* `delete`
* `Object.defineProperty()`
* `Object.prototype.__defineGetter__()`
* `Object.prototype.__defineSetter__()`
* ゲッターとセッターの定義 (JavaScript ガイド)
arguments.length
================

**`arguments.length`** プロパティは、関数に渡された引数の数が入ります。

解説
--

arguments.length プロパティは、実際に関数に渡された引数の数を提供します。これは、定義された仮引数の数以上にも以下にもなることがあります（`Function.length` を参照してください）。

例
-

### `arguments.length` の使用

この例では、2 つ以上の数を加算する関数を定義しています。


```js
function adder(base /\*, n2, ... \*/) {
  base = Number(base);
  for (var i = 1; i < arguments.length; i++) {
    base += Number(arguments[i]);
  }
  return base;
}
```


**メモ:** `Function.length` と arguments.length の違いに注意してください。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-arguments-exotic-objects |

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

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

関連情報
----

* `Function`
* `Function.length`
arguments[@@iterator]()
=======================

**`@@iterator`** プロパティの初期値は `Array.prototype.values` プロパティの初期値と同じ関数オブジェクトです。

構文
--


```js
arguments[Symbol.iterator]();
```

例
-

### for...of ループを用いた反復処理


```js
function f() {
  // your browser must support for..of loop
  // and let-scoped variables in for loops
  for (let letter of arguments) {
    console.log(letter);
  }
}
f("w", "y", "k", "o", "p");
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-createunmappedargumentsobject |
| ECMAScript Language Specification # sec-createmappedargumentsobject |

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

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

関連情報
----

* `Array.prototype.values()`
margin-trim
===========

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`margin-trim` プロパティにより、コンテナーの辺に隣接する子のマージンを切り取ることができます。

構文
--


```css
margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;

/\* グローバル値 \*/
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: revert-layer;
margin-trim: unset;
```

値
-

`none`

マージンは包含ブロックで切り取られません。

`block`

コンテナーの辺に隣接するブロックの子に指定されたマージンは、コンテナーに指定されたマージンに影響を与えることなく、ゼロに切り詰められます。

`block-start`

コンテナーの端にある最初の子ブロックのマージンはゼロに切り詰められます。

`block-end`

コンテナーの端にある最後の子ブロックのマージンはゼロに切り詰められます。

`inline`

コンテナーの辺に隣接するインラインの子に指定されたマージンは、行の始まりと終わりの空間に影響を与えることなく、ゼロに切り詰められます。

`inline-start`

コンテナーの辺と最初のインラインの子との間のマージンはゼロに切り詰められます。

`inline-end`

コンテナーの辺と最後のインラインの子との間のマージンはゼロに切り詰められます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | ブロックコンテナーと段組みコンテナー。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

margin-trim =   
  none                                                |  
  block                                               |  
  inline                                              |  
  [ block-start || inline-start || block-end || inline-end ]    
  
```

例
-

### 基本的な使用

このプロパティへの対応が実装されたら、次のように動作するでしょう。

インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。


```css
article {
  background-color: red;
  margin: 20px;
  padding: 20px;
  display: inline-block;
}

article > span {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
  margin-left: 30px;
}
```


ここでの問題は、行の右に 20px の間隔が空きすぎてしまうことで、それを修正するためにこのようにするのではないでしょうか。


```css
span:last-child {
  margin-right: 0;
  margin-left: 0;
}
```


これを実現するために別のルールを書かなければならないのは面倒ですし、柔軟性もありません。代わりに、 `margin-trim` で解決できます。


```css
article {
  margin-trim: inline-end;
  /\* … \*/
}
```


同様に、コンテナーのエッジで左マージンを除去する場合は次のようにします。


```css
article {
  margin-trim: inline-start;
  /\* … \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 4 # margin-trim |

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

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

関連情報
----

* `margin`
<display-listitem>
==================

`list-item` キーワードは、要素に `list-style` プロパティで指定された内容 (例えば見出し記号) を含む `::marker` 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。

構文
--

`list-item` 単独の値を指定すると、要素はリスト項目のように動作します。これは `list-style-type` や `list-style-position` と共に使用することができます。

`list-item` は `<display-outside>` キーワードのいずれかと、 `<display-inside>` の `flow` または `flow-root` キーワードと組み合わせることもできます。

**メモ:** 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で `flow` になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が `block` になります。

例
-

### HTML


```html
<div class="fake-list">I will display as a list item</div>
```

### CSS


```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-listitem |

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

### list-item の対応

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

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
:nth-of-type()
==============

**`:nth-of-type()`** は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。


```css
/\* 兄弟の <p> 要素の中で、
 3 つおきに選択 \*/
p:nth-of-type(4n) {
  color: lime;
}
```

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

構文
--

`nth-of-type` 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。

構文の詳しい説明は `:nth-child` を参照してください。
```

:nth-of-type( <an-plus-b> | even | odd )
```

例
-

### 基本的な例

#### HTML


```html
<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>
```


#### CSS


```css
/\* 奇数の段落 \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* 偶数の段落 \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* 最初の段落 \*/
p:nth-of-type(1) {
  font-weight: bold;
}

/\* これは 2n+1 であり、かつ fancy のクラスを持つ要素に一致するので、第 3 段落に一致します。
2 番目の段落は fancy というクラスを持っていますが、 :nth-of-type(2n+1) ではないので一致しません。 \*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}
```


#### 結果

**メモ:** このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # nth-of-type-pseudo |

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

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

関連情報
----

* `:nth-child`, `:nth-last-of-type`