JavaScriptの落とし穴と、コードを書くときに気にかけると良いこと

2021年11月8日

クイズです。以下はあるアプリケーションのコードの一部です。

<div id="hoge">hoge</div>

const el = document.getElementById('hoge')

変数elにはどのような値が入るでしょうか。

正解はid="hoge"のdiv要素です。

しかし、これだけだとなんともいえないと答えた人も正解です！

undefinedになるかもしれないし、1になるかもしれないし、tamibouzという文字列になる可能性も秘めています。

JavaScriptでは既存のオブジェクトのメソッドを上書きしたり、削除したり、追加したりすることが容易です。

先ほどの例で、もし開発チームの誰かが、別のJSファイルで以下のようなことをしていたらどうでしょうか。

document.getElementById = () => null

恐ろしいことに、すべてのdocument.getElementByIdの結果は問答無用でnullになります。

これは過激な例ですが、これに近いことがプロジェクト内で起きることがあります。

ArrayやStringのようなネイティブなオブジェクトではなく、そのアプリケーションのために作られたオブジェクト(ユーザーを表すUserオブジェクトや、商品を表すProductオブジェクトなど)でも、メソッドの変更や削除は容易です。

JavaScriptでは、このようなオブジェクトへの変更が容易に、しかも、どこからでもできてしまいます。

そのため、自分でコードを書く時は、「このコードは既存のオブジェクトを変更していないか」ということを頭の片隅におくと良いと思っています。