ESLint「Disallow new For Side Effects」のSide Effectsとは

Vue.jsで以下のようなコードを書くとESLintに怒られてしまう。

// Do not use 'new' for side effects. (no-new)
new Vue({
    el: '#app',
    ...
});

newをつけるとfunctionをconstructorとして新しいobjectを生成するので、それを変数へのアサインなしで使用するのはおかしいよね、という話。

それはそれでいいのだが「Side Effects」というのが何を指しているのかわからないので調べた。
newで生成されたobjectはそのままGCに回収されそうなので副作用なんてなさそうに思える。

jslintにも同じエラーがある。エラーの理由を解説しているGitHubリポジトリ があったのでそちらを参考にすると、

• functionの中でグローバル変数を参照する処理がある
• 例えば生成されたobjectの数をカウントするような
• newした結果を変数にアサインしなければカウントがずれるよね = side effect

ということだった。

let counter = 0;  // Studentインスタンスをカウントする

function Student(name) {
    this.name = name;
    counter++;
}

const s = new Student('Taro');  // counter === 1
new Student('Jiro');  // counter === 2 だけど参照できるStudentは1個 -> これがside effects

なんとなく腑に落ちないような気がするが、より一般化して説明するなら、

constructorとして使用されることを意図されたfunctionは、当然ながらnewした結果を変数にアサインすることを前提として処理が書かれているはず。そうでなければどんなside effectsが起きるかわからないよ

というところだろうか。