{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/javascriptde/",
    "result": {"data":{"ghostPost":{"id":"Ghost__Post__60edc4b73986b000013a376e","title":"JavaScriptで [] === [] が falseになるのがなぜなのかわからなかったので言語化してみた","slug":"javascriptde","featured":false,"feature_image":null,"excerpt":"こんにちは、いわむらです\n\n先日ある処理の実装をしていた時に空配列の判定処理がうまくいかず試行錯誤している中で 空配列 === [] \nとしてみた時にfalseが返ってきたのですがその時になぜfalseになるか説明できずもやもやしていたのでちょっと調べてみました\n\n普段は 配列.length !== 0として比較していたのですが、今回気になった部分でやっていることを分解してみると以下のような記述と同じになります\n\nconst emptyArray = [];\nconst emptyArray1 = [];\n\nconsole.log(emptyArray === emptyArray1); // false\n\n// 参照同士の場合\nconst emptyArrayRef = [];\nconst emptyArrayRef1 = emptyArrayRef;\n\nconsole.log(emptyArrayRef === emptyArrayRef1); // true\n\nなぜ初めに検証した空配列同士の比較がfalseになるかというと、それぞれの変数が参照しているメモリ箇所を比較しているので","custom_excerpt":null,"visibility":"public","created_at_pretty":"13 July, 2021","published_at_pretty":"30 July, 2021","updated_at_pretty":"30 July, 2021","created_at":"2021-07-14T01:52:07.000+09:00","published_at":"2021-07-31T01:08:46.000+09:00","updated_at":"2021-07-31T01:08:46.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Jun Iwamura","slug":"jun","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Jun Iwamura","slug":"jun","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null},"primary_tag":null,"tags":[],"plaintext":"こんにちは、いわむらです\n\n先日ある処理の実装をしていた時に空配列の判定処理がうまくいかず試行錯誤している中で 空配列 === [] \nとしてみた時にfalseが返ってきたのですがその時になぜfalseになるか説明できずもやもやしていたのでちょっと調べてみました\n\n普段は 配列.length !== 0として比較していたのですが、今回気になった部分でやっていることを分解してみると以下のような記述と同じになります\n\nconst emptyArray = [];\nconst emptyArray1 = [];\n\nconsole.log(emptyArray === emptyArray1); // false\n\n// 参照同士の場合\nconst emptyArrayRef = [];\nconst emptyArrayRef1 = emptyArrayRef;\n\nconsole.log(emptyArrayRef === emptyArrayRef1); // true\n\nなぜ初めに検証した空配列同士の比較がfalseになるかというと、それぞれの変数が参照しているメモリ箇所を比較しているのでfalseになるということがわかりました\n\nこれでなぜ 空配列 === []がfalseを返すのが説明できるようになりました\n\nついでに元々実装しようとしていた部分がなぜうごかなかったのかも復習してみようと思います\n\ntype User = {\n\tid: number\n    name: string\n    description?: string[]\n}\n\nconst userNoDescription = {\n\tid: 1,\n    name: 'hoge',\n} as User\n\n// うまくいかなかない\nconst foo = function(description: string[]|undefined): void {\n\tif (description?.length !== 0) {\n    \t// do something\n    }\n}\n\nfoo(userNoDescription)\n\n上の実装だとなぜうまくいかなかったのかは引数の descriptionがundefinedの場合も空配列ではない時の処理が実行されてしまうという所が原因でした\n\n上の実装をいい感じに直すと以下のようになります\n\n// type User と const userNoDescriptionは省略\nconst foo = function(description: string[]|undefined): void {\n\tif (Array.isArray(description) && description.length !== 0) {\n    \t// do something\n    }\n}\n\nfoo(userNoDescription)\n\nこれで期待した通りの動きになりました\n\nすごく基本的な部分ですがちゃんと言語化できることって大事だなと気づきました。最後まで読んでいただきありがとうございました。","html":"<p>こんにちは、いわむらです</p><p>先日ある処理の実装をしていた時に空配列の判定処理がうまくいかず試行錯誤している中で <code>空配列 === []</code> としてみた時にfalseが返ってきたのですがその時になぜfalseになるか説明できずもやもやしていたのでちょっと調べてみました</p><p>普段は <code>配列.length !== 0</code>として比較していたのですが、今回気になった部分でやっていることを分解してみると以下のような記述と同じになります</p><pre><code class=\"language-JavaScript\">const emptyArray = [];\nconst emptyArray1 = [];\n\nconsole.log(emptyArray === emptyArray1); // false\n\n// 参照同士の場合\nconst emptyArrayRef = [];\nconst emptyArrayRef1 = emptyArrayRef;\n\nconsole.log(emptyArrayRef === emptyArrayRef1); // true</code></pre><p>なぜ初めに検証した空配列同士の比較がfalseになるかというと、それぞれの変数が参照しているメモリ箇所を比較しているのでfalseになるということがわかりました</p><p>これでなぜ <code>空配列 === []</code>がfalseを返すのが説明できるようになりました</p><p>ついでに元々実装しようとしていた部分がなぜうごかなかったのかも復習してみようと思います</p><pre><code class=\"language-TypeScript\">type User = {\n\tid: number\n    name: string\n    description?: string[]\n}\n\nconst userNoDescription = {\n\tid: 1,\n    name: 'hoge',\n} as User\n\n// うまくいかなかない\nconst foo = function(description: string[]|undefined): void {\n\tif (description?.length !== 0) {\n    \t// do something\n    }\n}\n\nfoo(userNoDescription)</code></pre><p>上の実装だとなぜうまくいかなかったのかは引数の <code>description</code>がundefinedの場合も空配列ではない時の処理が実行されてしまうという所が原因でした</p><p>上の実装をいい感じに直すと以下のようになります</p><pre><code class=\"language-TypeScript\">// type User と const userNoDescriptionは省略\nconst foo = function(description: string[]|undefined): void {\n\tif (Array.isArray(description) &amp;&amp; description.length !== 0) {\n    \t// do something\n    }\n}\n\nfoo(userNoDescription)</code></pre><p>これで期待した通りの動きになりました</p><p>すごく基本的な部分ですがちゃんと言語化できることって大事だなと気づきました。最後まで読んでいただきありがとうございました。</p>","url":"https://ghost.tech.anti-pattern.co.jp/javascriptde/","canonical_url":null,"uuid":"12ea320a-b17f-4875-b36e-c682b63006d9","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"60edc4b73986b000013a376e","reading_time":1}},"pageContext":{"slug":"javascriptde"}},
    "staticQueryHashes": ["176528973","2358152166","2561578252","2731221146","4145280475"]}