recursal/MDN huggingface dataset:
関数式
===

**`function`** キーワードは、式の中で関数を定義するために使用されます。

`function` 関数宣言やアロー構文を用いて関数を定義することもできます。

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

構文
--


```js
function (param0) {
  statements
}
function (param0, param1) {
  statements
}
function (param0, param1, /\* …, \*/ paramN) {
  statements
}

function name(param0) {
  statements
}
function name(param0, param1) {
  statements
}
function name(param0, param1, /\* …, \*/ paramN) {
  statements
}
```


**メモ:** 式文はキーワード `function` から始めることができません。 `function` 宣言との曖昧さをさけるためです。 `function` キーワードは文を受け入れることができない文脈で現れた時だけ式を開始します。

### 引数

`name` 省略可

関数名。省略可能で、その場合は関数は*無名*になります。 name は関数本体のみのローカルです。

`paramN` 省略可

関数の正式な引数の名前。引数の構文については、関数リファレンスを参照してください。

`statements` 省略可

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

解説
--

`function` 式は `function` 宣言とよく似ており、ほとんど同じ書式ですあります。 `function` 式と `function` 宣言の主な相違点は、*関数名*です。 `function` 式では、*無名*関数を生成するために、関数名を省略できます。 `function` 式は、定義するとすぐに実行する IIFE （即時実行関数）として使用できます。詳細については、関数の章を参照してください。

### 関数式の巻き上げ

JavaScript の関数式は、関数宣言と違って巻き上げられません。定義前に関数式を使用することはできません。


```js
console.log(notHoisted); // undefined
// 変数名は巻き上げが行われますが、定義は行われません。
// そのため undefined になります。
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function () {
  console.log("bar");
};
```

### 名前付き関数式

関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。この名前は関数本体（スコープ）に対してローカルです。これにより、再帰呼び出しを行う場合に非推奨の `arguments.callee` プロパティを使用せずに済みます。


```js
const math = {
  factit: function factorial(n) {
    console.log(n);
    if (n <= 1) {
      return 1;
    }
    return n \* factorial(n - 1);
  },
};

math.factit(3); //3;2;1;
```


関数式に名前が付けられている場合、関数の `name` プロパティには、構文から推測される暗黙の名前 (関数が割り当てられている変数など) ではなく、その名前が設定されます。

宣言とは異なり、関数式の名前は読み取り専用です。


```js
function foo() {
  foo = 1;
}
foo();
console.log(foo); // 1
(function foo() {
  foo = 1; // TypeError: Assignment to constant variable.
})();
```

例
-

### 無名関数の作成

次の例では、無名関数を定義してそれを `x` に割り当てます。 関数は引数の 2 乗を返します。


```js
const x = function (y) {
  return y \* y;
};
```

### 関数をコールバックとして使用

コールバックとしてより頻繁に使われます。


```js
button.addEventListener("click", function (event) {
  console.log("button is clicked!");
});
```

### 即時実行関数式 (IIFE) の使用

無名の関数が生成され、呼び出されます。


```js
(function () {
  console.log("Code runs!");
})();

// または

!function () {
  console.log("Code runs!");
}();
```

仕様書
---

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

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

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

関連情報
----

* 関数ガイド
* 関数
* `function`
* `Function`
* アロー関数
論理和代入 (||=)
===========

論理和代入演算子 (`x ||= y`) は、`x` が偽値である場合にのみ代入を行います。

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

構文
--


```js
expr1 ||= expr2;
```

解説
--

### 短絡評価 (ショートサーキット)

論理和演算子は次のように動作します。


```js
x || y;
// x が真値の場合 x を返します
// x が真値ではない場合 y を返します
```


論理和演算子は、1 つ目のオペランドがまだ結果を決定していない場合にのみ、2 つ目のオペランドの評価を行う短絡評価をします。

論理和代入も同様に短絡評価され、右辺の評価が行われる論理演算の場合にのみ代入が行われます。言い替えれば、`x ||= y` は以下と等価です。


```js
x || (x = y);
```


そして、常に代入が行われる以下と等価ではありません。


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


なお、この動作は、数学的な代入演算子やビット代入演算子とは異なることに注意してください。

例
-

### 既定の内容を設定する

"lyrics" 要素が空の場合は、既定値を表示します。


```js
document.getElementById("lyrics").textContent ||= "No lyrics.";
```


ここでの短絡評価は、要素が不必要に更新されることがなく、追加のパースやレンダリング作業、フォーカスの損失などの望ましくない副作用を引き起こすことがないので、特に有益です。

注意: チェック対象の API が返す値に注意してください。空の文字列 (偽値) が返される場合は、`||=` を使用する必要があります。それ以外の場合 (返値が `null` または `undefined` の場合) は `??=` 演算子を使用してください。

仕様書
---

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

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

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

関連情報
----

* 論理和演算子 (||)
* Null 合体演算子 (`??`)
* ビット論理和代入演算子 (`|=`)
* 真値
* 偽値
条件 (三項) 演算子
===========

**条件 (三項) 演算子**は JavaScript では唯一の、3 つのオペランドをとる演算子です。条件に続いて疑問符 (`?`)、そして条件が真値であった場合に実行する式、コロン (`:`) が続き、条件が偽値であった場合に実行する式が最後に来ます。この演算子は、 `if` 文の代替としてよく用いられます。

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

構文
--


```js
condition ? exprIfTrue : exprIfFalse;
```

### 引数

`condition`

値が条件として使用される式です。

`exprIfTrue`

`condition` が真値 (`true` と等しいか、 `true` に変換できる値) と評価された場合に評価される式です。

`exprIfFalse`

`condition` が偽値 (`false` と等しいか、 `false` に変換できる値) と評価された場合に評価される式です。

解説
--

`false` についていえば、偽値になる可能性がある式は `null`, `NaN`, `0`, 空文字列 (`""`), `undefined` です。 `condition` がこのうちの何れかであれば、条件演算子の結果は `exprIfFalse` の式を実行した結果になります。

例
-

### 単純な例


```js
var age = 26;
var beverage = age >= 21 ? "ビール" : "ジュース";
console.log(beverage); // "ビール"
```

### null 値の扱い

よくある使い方の一つに、 `null` になる可能性がある値を扱うというものがあります。


```js
let greeting = (person) => {
  let name = person ? person.name : `お客さん`;
  return `やあ、${name}`;
};

console.log(greeting({ name: `アリス` })); // "やあ、アリス"
console.log(greeting(null)); // "やあ、お客さん"
```

### 条件の連鎖

三項演算子は右結合で、すなわち以下のような方法で `if … else if … else if … else` の連鎖と同様に「連鎖」させることができます。


```js
function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// 以下のものと同等です。

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}
```

仕様書
---

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

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

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

関連情報
----

* if 文
* Null 合体演算子
* オプション連鎖
* コードでの意思決定 — 条件文
* 式と演算子
インクリメント (++)
============

インクリメント演算子 (`++`) は、オペランドをインクリメント (1 を加算) して値を返します。

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

構文
--


```js
x++;
++x;
```

解説
--

オペランドに後置で演算子を付けると (例えば、 `x++`) 、インクリメント演算子はインクリメントしますが、インクリメント前の値を返します。

オペランドに前置で演算子を付けると (例えば、 `++x`) 、インクリメント演算子はインクリメントし、インクリメント後の値を返します。

例
-

### 後置インクリメント


```js
let x = 3;
y = x++;

// y = 3
// x = 4
```

### 前置インクリメント


```js
let a = 2;
b = ++a;

// a = 3
// b = 3
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-postfix-increment-operator |

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

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

関連情報
----

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

デクリメント演算子 (`--`) は、オペランドをデクリメント (1 を減算) して値を返します。

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

構文
--


```js
x--;
--x;
```

解説
--

オペランドに後置で演算子を付けると (例えば `x--`)、デクリメント演算子はデクリメントしますが、デクリメント前の値を返します。

オペランドに前置で演算子を付けると (例えば `--x`)、デクリメント演算子はデクリメントし、デクリメント後の値を返します。

例
-

### 後置デクリメント


```js
let x = 3;
y = x--;

// y = 3
// x = 2
```

### 前置デクリメント


```js
let a = 2;
b = --a;

// a = 1
// b = 1
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-postfix-decrement-operator |

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

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

関連情報
----

* 加算演算子
* 減算演算子
* 除算演算子
* 乗算演算子
* 剰余演算子
* べき乗演算子
* インクリメント演算子
* 単項マイナス演算子
* 単項プラス演算子
大なりイコール (>=)
============

大なりイコール演算子 (`>=`) は、左辺のオペランドが右辺のオペランド以上の場合は `true` を返し、それ以外の場合は `false` を返します。

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

構文
--


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

解説
--

オペランドは、抽象関係比較アルゴリズムを使用して比較されます。 このアルゴリズムの概要については、小なり演算子のドキュメントを参照して下さい。

例
-

### 文字列と文字列の比較


```js
console.log("a" >= "b"); // false
console.log("a" >= "a"); // true
console.log("a" >= "3"); // true
```

### 文字列と数値の比較


```js
console.log("5" >= 3); // true
console.log("3" >= 3); // true
console.log("3" >= 5); // false

console.log("hello" >= 5); // false
console.log(5 >= "hello"); // false
```

### 数値と数値の比較


```js
console.log(5 >= 3); // true
console.log(3 >= 3); // true
console.log(3 >= 5); // false
```

### Number と BigInt の比較


```js
console.log(5n >= 3); // true
console.log(3 >= 3n); // true
console.log(3 >= 5n); // false
```

### 論理値、null、undefined、NaN の比較


```js
console.log(true >= false); // true
console.log(true >= true); // true
console.log(false >= true); // false

console.log(true >= 0); // true
console.log(true >= 1); // true

console.log(null >= 0); // true
console.log(1 >= null); // true

console.log(undefined >= 3); // false
console.log(3 >= undefined); // false

console.log(3 >= NaN); // false
console.log(NaN >= 3); // false
```

仕様書
---

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

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

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

関連情報
----

* 大なり演算子
* 小なり演算子
* 小なりイコール演算子
厳密不等価 (!==)
===========

厳密不等価演算子 (`!==`) は、2 つのオペランドが等しくないことを検査し、論理値で結果を返します。不等価演算子とは異なり、厳密不等価演算子はオペランドの型が異なる場合、常に異なると判断します。

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

構文
--


```js
x !== y;
```

解説
--

厳密不等価演算子は、オペランドが等しくないことを検査します。これは厳密等価演算子の逆に当たるので、以下の 2 行は常に同じ結果になります。


```js
x !== y;

!(x === y);
```


比較アルゴリズムの詳細については、厳密等価演算子のページを参照して下さい。

厳密等価演算子と同様に、厳密不等価演算子はオペランドの型が異なると、常に異なるものと見なします。


```js
3 !== "3"; // true
```

例
-

### オペランドが同じ型である場合の比較


```js
console.log("hello" !== "hello"); // false
console.log("hello" !== "hola"); // true

console.log(3 !== 3); // false
console.log(3 !== 4); // true

console.log(true !== true); // false
console.log(true !== false); // true

console.log(null !== null); // false
```

### オペランドが異なる型である場合の比較


```js
console.log("3" !== 3); // true

console.log(true !== 1); // true

console.log(null !== undefined); // true
```

### オブジェクトの比較


```js
const object1 = {
  name: "hello",
};

const object2 = {
  name: "hello",
};

console.log(object1 !== object2); // true
console.log(object1 !== object1); // false
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-equality-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; // 10
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 ガイドの代入演算子
* 乗算演算子
async function\* 式
==================

**`async function*`** キーワードは、式の内部で非同期ジェネレーター関数を定義するために使用できます。

また、 `async function*` 宣言 を使って非同期ジェネレーター関数を定義することもできます。

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

構文
--


```js
async function\* (param0) {
  statements
}
async function\* (param0, param1) {
  statements
}
async function\* (param0, param1, /\* …, \*/ paramN) {
  statements
}

async function\* name(param0) {
  statements
}
async function\* name(param0, param1) {
  statements
}
async function\* name(param0, param1, /\* …, \*/ paramN) {
  statements
}
```


**メモ:** 式文 は、 `async function*` 宣言との曖昧さを避けるために、キーワード `async function` で始めることはできません。 `async function` キーワードは、文を受け付けないコンテキストに現れたときのみ、式を開始します。

### 引数

`name` 省略可

関数名。省略可能で、その場合関数は無名となります。この名前は関数本体に対してのみローカルです。

`paramN` 省略可

関数の正式な引数の名前です。引数の構文については、関数リファレンスを参照してください。

`statements` 省略可

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

解説
--

`async function*` 式は `async function*` 宣言 ととても似ており、ほとんど同じ構文を持っています。 `async function*` 式と `async function*` 宣言の主な違いは関数名で、 `async function*` 式では無名関数を作成するために省略することができます。 `async function*` 式は定義されるとすぐに実行される IIFE (Immediately Invoked Function Expression) として使うことができ、アドホックな非同期反復可能オブジェクトを作成することができます。詳しくは関数の章も参照してください。

例
-

### async function\* の使用

次の例では、無名の非同期ジェネレーター関数を定義し、それを `x` に代入しています。この関数は引数の2乗を返します。


```js
const x = async function\* (y) {
  yield Promise.resolve(y \* y);
};
x(6)
  .next()
  .then((res) => console.log(res.value)); // 36
```

仕様書
---

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

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

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

関連情報
----

* `async function*`
* `AsyncGeneratorFunction`
* 反復処理プロトコル
* `yield`
* `yield*`
* Functions
厳密等価 (===)
==========

厳密等価演算子 (`===`) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。

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

構文
--


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

解説
--

厳密等価演算子 (`===` および `!==`) は、厳密等価比較アルゴリズムを使用して 2 つのオペランドを比較します。

* オペランドの型が異なる場合は、 `false` を返します。
* 両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り `true` を返します。
* 両方のオペランドが `null` または両方のオペランドが `undefined` であった場合は `true` を返します。
* どちらかのオペランドが `NaN` であった場合は `false` を返します。
* それ以外の場合は、2 つのオペランドの値を比較します。
    + 数値型は同じ値の数値である必要があります。 `+0` と `-0` は同じ値と見なされます。
    + 文字列型は同じ文字が同じ順序で並んでいる必要があります。
    + 論理型は両方が `true` であるか両方が `false` である必要があります。

この演算子と等価 (`==`) 演算子の最も顕著な違いは、オペランドの型が異なる場合、 `==` 演算子は比較前に同じ型に変換しようとすることです。

例
-

### オペランドが同じ型である場合の比較


```js
console.log("hello" === "hello"); // true
console.log("hello" === "hola"); // false

console.log(3 === 3); // true
console.log(3 === 4); // false

console.log(true === true); // true
console.log(true === false); // false

console.log(null === null); // true
```

### オペランドが異なる型である場合の比較


```js
console.log("3" === 3); // false

console.log(true === 1); // false

console.log(null === undefined); // false
```

### オブジェクトの比較


```js
const object1 = {
  name: "hello",
};

const object2 = {
  name: "hello",
};

console.log(object1 === object2); // false
console.log(object1 === object1); // true
```

仕様書
---

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

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

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

関連情報
----

* 等価演算子
* 不等価演算子
* 厳密不等価演算子
除算 (/)
======

除算演算子 (`/`) は、左のオペランドを被除数とし、右のオペランドを除数としたオペランド同士の除算結果を生成します。

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

構文
--


```js
x / y;
```

例
-

### 基本的な除算


```js
1 / 2; // 0.5

Math.floor(3 / 2); // 1

1.0 / 2.0; // 0.5
```

### ゼロ除算


```js
2.0 / 0; // Infinity

2.0 / 0.0; // Infinity。 0.0 === 0 であるため

2.0 / -0.0; // -Infinity
```

仕様書
---

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

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

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

関連情報
----

* 加算演算子
* 減算演算子
* 乗算演算子
* 剰余演算子
* べき乗演算子
* インクリメント演算子
* デクリメント演算子
* 単項マイナス演算子
* 単項プラス演算子
yield\*
=======

**`yield*` 式**は別のジェネレーターや反復可能なオブジェクトに委任するために使用されます。

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

構文
--


```js
yield\* expression;
```


`expression`

反復可能なオブジェクトを返す式。

解説
--

`yield*` 式はオペランドを反復し、それによって返されたそれぞれの値をもたらします。

`yield*` 式自体の値は、イテレーターが閉じたとき（つまり `done` が `true` のとき）に返される値です。

例
-

### 別のジェネレータに委任する

次のコードでは、 `g1()` によってもたらされる値は、 `g2()` で得られているものと同じように `next()` の呼び出しから返されます。


```js
function\* g1() {
  yield 2;
  yield 3;
  yield 4;
}

function\* g2() {
  yield 1;
  yield\* g1();
  yield 5;
}

const iterator = g2();

console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: 5, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
```

### 他の反復可能なオブジェクト

ジェネレータオブジェクトのほかに、 `yield*` は他の種類の反復 (例えば、配列、文字列、 `arguments` オブジェクト) を `yield` することができます。


```js
function\* g3() {
  yield\* [1, 2];
  yield\* "34";
  yield\* Array.from(arguments);
}

const iterator = g3(5, 6);

console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: "3", done: false}
console.log(iterator.next()); // {value: "4", done: false}
console.log(iterator.next()); // {value: 5, done: false}
console.log(iterator.next()); // {value: 6, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
```

### `yield*` 式自体の値

`yield*` は式であり、文ではありません。そのため、値に評価されます。


```js
function\* g4() {
  yield\* [1, 2, 3];
  return "foo";
}

function\* g5() {
  const g4ReturnValue = yield\* g4();
  console.log(g4ReturnValue); // 'foo'
  return g4ReturnValue;
}

const iterator = g5();

console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false} done is false because g5 generator isn't finished, only g4
console.log(iterator.next()); // {value: 'foo', done: true}
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-generator-function-definitions-runtime-semantics-evaluation |

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

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; // x = x << y
```

例
-

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


```js
let a = 5;
// 00000000000000000000000000000101

a <<= 2; // 20
// 00000000000000000000000000010100
```

仕様書
---

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

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* 左シフト演算子
プロパティアクセサー
==========

**プロパティアクセサー**はオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。

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

構文
--


```js
object.property;
object["property"];
```

解説
--

オブジェクトは実際には*連想配列* (別名 *map*、 *dictionary*、 *hash*、 *lookup table*) とみなすことができます。この配列における*キー*はオブジェクトのプロパティ名です。

一般的に、オブジェクトのプロパティについて説明する際には、プロパティとメソッドを区別します。しかし、プロパティとメソッドの区別は慣習的なものにすぎません。メソッドは呼び出すことができるプロパティです (例えば、値として `Function` インスタンスへの参照を持っているようなものです)。

プロパティにアクセスするには、*ドット表記法*と*ブラケット表記法*の 2 通りがあります。

### ドット表記法

`object.property` の構文では、 `property` は有効な JavaScript の 識別子でなければなりません。 (ECMAScript 標準では、プロパティの名前は技術的には "IdentifierNames" であり、 "Identifiers" ではないので、予約語を使用することができますがお勧めしません)。例えば、 `object.$1` は有効であるのに対し、 `object.1` は有効ではありません。


```js
const variable = object.property_name;

object.property_name = value;
```



```js
const object = {};

object.$1 = 'foo';
console.log(object.$1);  // 'foo'

object.1 = 'bar';        // SyntaxError
console.log(object.1);   // SyntaxError
```


ここで、 `createElement` というメソッドを `document` から取得し、呼び出します。


```js
document.createElement("pre");
```


数値リテラルに対してメソッドを使用する場合で、その数値リテラルに指数や小数点がない場合、メソッド呼び出しをするドットの前にホワイトスペースを入れることで、ドットが小数点とみなされることを防ぐことができます。


```js
77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// 77.と77.0は同じものとして評価されます
```

### ブラケット表記法

`object[property_name]` の構文では、 `property_name` は文字列またはシンボルです。ですから、これは任意の文字列、例えば `'1foo'`、`'!bar!'`、または `' '` (空白) であっても構いません。


```js
const variable = object[property_name];
object[property_name] = value;
```


これは前の例とまったく同じです。


```js
document["createElement"]("pre");
```


ブラケット表記法の前には空白を入れることができます。


```js
document ["createElement"]("pre");
```

### プロパティ名

プロパティ名は文字列またはシンボルです。それ以外の値は、数値を含めて、文字列へ強制変換されます。これは `'value'` を出力します。 `1` が `'1'` に強制変換されるからです。


```js
let object = {};
object["1"] = "value";
console.log(object[1]);
```


こちらも `'value'` を出力します。`foo` と `bar` は同じ文字列に変換されるからです。


```js
let foo = { unique\_prop: 1 },
  bar = { unique\_prop: 2 },
  object = {};
object[foo] = "value";
console.log(object[bar]);
```


SpiderMonkey JavaScript エンジンでは、この文字列は "`[object Object]`" となります。

### メソッドのバインド

メソッドは、そのメソッドが所属するオブジェクトにバインドされているわけではありません。特に、 `this` はメソッド内で固定されていません。つまり、 `this` は必ずしもそのメソッドを含んでいるオブジェクトを参照しているとは限りません。 `this` は関数呼び出し時に「渡される」ものです。メソッドのバインドを参照してください。

例
-

### ブラケット表記法と `eval`

JavaScript 初心者はしばしば、代わりにブラケット表記法を使えるところで `eval()` (en-US) を使用してしまう間違いを犯します。

例えば、以下のような構文がたくさんのスクリプトで見られます。


```js
x = eval("document.forms.form\_name.elements." + strFormControl + ".value");
```


`eval()` は低速であり、可能な限り避けるべきです。また、 `strFormControl` は ID を必要としますが、フォームコントロールの名前と `id` は必須ではありません。代わりにブラケット表記法を使った方が良いでしょう。


```js
x = document.forms["form\_name"].elements[strFormControl].value;
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-property-accessors |

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

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

関連情報
----

* `Object`
* `Object.defineProperty()`
* オプショナルチェイニング
加算 (+)
======

**加算 (`+`)** 演算子は、数値オペランドの合計または文字列の連結を生成します。

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

構文
--


```js
x + y
```

解説
--

演算子 `+` は数値の加算と文字列の連結という 2 つの異なる操作のためにオーバーロードされています。評価するとき、まず両方のオペランドをプリミティブに変換します。その後、 2 つのオペランドの型がテストされます。

* 一方が文字列の場合、もう一方のオペランドも文字列に変換され、連結されます。
* もし両方が長整数であれば、長整数同士の加算が行われます。一方が長整数で、もう一方が長整数でない場合、`TypeError` 例外が発生します。
* そうでない場合は、両辺が数値へ変換され、数値同士の加算が行われます。

文字列の連結はテンプレートリテラルや `String.prototype.concat()` と等価だと思われがちですが、そうではありません。加算は `valueOf()` を優先的に呼び出して、式をプリミティブに変換します。一方、テンプレートリテラルと `concat()` は `toString()`を優先的に呼び出し、式を文字列に変換します。式が `@@toPrimitive` メソッドを持っている場合、文字列連結は `"default"` をヒントとしてそれを呼び出しますが、テンプレートリテラルは `"string"` を使用します。これは、文字列表現とプリミティブ表現が異なるオブジェクト、例えば、 Temporal のように `valueOf()` メソッドが例外を発生するようなオブジェクトにとって重要です。


```js
const t = Temporal.Now.instant();
"" + t; // TypeError が発生
`${t}`; // '2022-07-31T04:48:56.113918308Z'
"".concat(t); // '2022-07-31T04:48:56.113918308Z'
```


`"" + x` を使用して文字列に変換を行わないことをお勧めします。

例
-

### 数値の加算


```js
// 数値 + 数値 -> 加算
1 + 2; // 3

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

// 論理値 + 論理値 -> 加算
false + false; // 0
```

### 長整数の加算


```js
// 長整数 + 長整数 -> 加算
1n + 2n; // 3n

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

// 長整数を長整数以外に加算する場合は、どちらかのオペランドを変換する
1n + BigInt(2); // 3n
Number(1n) + 2; // 3
```

### 文字列の連結


```js
// 文字列 + 文字列 -> 連結
"foo" + "bar"; // "foobar"

// 数値 + 文字列 -> 連結
5 + "foo"; // "5foo"

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

// 文字列 + 数値 -> 連結
"2" + 2; // "22"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-addition-operator-plus |

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

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

関連情報
----

* 減算演算子
* 除算演算子
* 乗算演算子
* 剰余演算子
* べき乗演算子
* インクリメント演算子
* デクリメント演算子
* 単項マイナス演算子
* 単項プラス演算子
小なり (<)
=======

小なり演算子 (`<`) は、左辺のオペランドが右辺のオペランドより小さい場合は `true` を返し、それ以外の場合は `false` を返します。

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

構文
--


```js
x < y;
```

解説
--

オペランドは、抽象関係比較アルゴリズムを使用して比較されます。以下に大まかに要約します。

* 最初に、オブジェクトは `Symbol.ToPrimitive` の `hint` 引数を `'number'` として使用してプリミティブに変換されます。
* 両方の値が文字列である場合、それらに含まれる Unicode コードポイントの値に基づいて、文字列として比較されます。
* それ以外の場合、 JavaScript は非数値型を数値に変換しようとします。
    + 論理値 `true` および `false` は、それぞれ 1 および 0 に変換されます。
    + `null` は 0 に変換されます。
    + `undefined` は `NaN` に変換されます。
    + 文字列は、含まれている値に基づいて変換され、数値が含まれていない場合は `NaN` として変換されます。
* いずれかの値が `NaN` の場合、演算子は `false` を返します。
* それ以外の場合、値は数値として比較されます。
例
-

### 文字列と文字列の比較


```js
console.log("a" < "b"); // true
console.log("a" < "a"); // false
console.log("a" < "3"); // false
```

### 文字列と数値の比較


```js
console.log("5" < 3); // false
console.log("3" < 3); // false
console.log("3" < 5); // true

console.log("hello" < 5); // false
console.log(5 < "hello"); // false

console.log("5" < 3n); // false
console.log("3" < 5n); // true
```

### 数値と数値の比較


```js
console.log(5 < 3); // false
console.log(3 < 3); // false
console.log(3 < 5); // true
```

### Number と BigInt の比較


```js
console.log(5n < 3); // false
console.log(3 < 5n); // true
```

### 論理値、null、undefined、NaN の比較


```js
console.log(true < false); // false
console.log(false < true); // true

console.log(0 < true); // true
console.log(true < 1); // false

console.log(null < 0); // false
console.log(null < 1); // true

console.log(undefined < 3); // false
console.log(3 < undefined); // false

console.log(3 < NaN); // false
console.log(NaN < 3); // false
```

仕様書
---

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

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

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

関連情報
----

* 大なり演算子
* 大なりイコール演算子
* 小なりイコール演算子