Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@seihmd

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

More than 3 years have passed since last update.

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が起きるかわからないよ

というところだろうか。

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
seihmd

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?