# 等価演算子の同一性

## 等価演算子(Equality)

JavaScriptで注意するべき点の1つは`==`と `===`の違いです。 JavaScriptはエラーが起きにくい仕様であるため、`==`は、2つの変数の型変換を行います。 例えば、下記の場合、文字列は数値に変換されます。

```javascript
console.log(5 == "5"); // true   , TS Error
console.log(5 === "5"); // false , TS Error
```

しかし、JavaScriptの選択は必ずしも理想的ではありません。下の例の最初の行は`""`と `"0"`は両方とも文字列であり、明らかに等しくないため、falseです。しかし、第2のケースでは、`0`と空文字列(`""`)はfalsy(`false`のように振る舞う)であるため、`==`を使った比較ではtrueになります。両方とも`===`を使うとfalseになります。

```javascript
console.log("" == "0"); // false
console.log(0 == ""); // true

console.log("" === "0"); // false
console.log(0 === ""); // false
```

> TypeScriptの場合、`string == number`と`string === number`はどちらもコンパイルエラーであることに注意してください。通常は心配する必要はありません。

`==`と `===`と同様に、 `!=`と `!==`でも同じです。

そのため、(プロとしてのアドバイス：)我々は、後で説明するnullチェック以外は、常に`===`と `!==`を使います。

## 構造の等価性(Structural Equality)

`==`/`===`は、2つのオブジェクトの構造を比較したい場合は、使えません。例:

```javascript
console.log({a:123} == {a:123}); // False
console.log({a:123} === {a:123}); // False
```

このようなチェックを行うには、[deep-equal](https://www.npmjs.com/package/deep-equal) npmパッケージを使用します。

```javascript
import * as deepEqual from "deep-equal";

console.log(deepEqual({a:123},{a:123})); // True
```

しかし、一般的に、深い比較(deep equal)は必要ありません。開発者が本当に必要としていることは、`id`等でチェックすることで実現できます。

```typescript
type IdDisplay = {
  id: string,
  display: string
}
const list: IdDisplay[] = [
  {
    id: 'foo',
    display: 'Foo Select'
  },
  {
    id: 'bar',
    display: 'Bar Select'
  },
]

const fooIndex = list.map(i => i.id).indexOf('foo');
console.log(fooIndex); // 0
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://typescript-jp.gitbook.io/deep-dive/recap/equality.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.