エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【JavaScript】関数名が被らないように、オブジェクトに入れる【970日目】

関数名が被る?

<script>
  function xxx() {
    return "x";
  }
</script>

こんなふうにスクリプトタグに直接関数を書いた。

<script src="common.js"></script>

こんな感じにJavaScriptを別ファイルに書いていた場合、
common.jsと関数名が被る可能性があります。

すると、読み込み順によって動作が被る可能性があります。
それを避けたい。

関数をオブジェクトに入れる

common.js

const common = {
  xxx() {
    return "x";
  }
}

このように書くことで、common.jsに書かれた関数を書く際は、

<span onclick="common.xxx();"></span>

このように、 common.を付けて呼び出すことになり、重複を避けやすくなります。

commonという変数は付けられなくなりますが、
関数名一つ一つにルールをつけるより意識することが減るので、良さそうですφ(・