Do not use 'new' for side effects :: 마이구미

이번 글은 Linter에서 검출해주는 에러 중 하나인 "Do not use 'new' for side effects" 에 대해 다뤄본다.

관련 에러는 new 키워드에 대한 에러 검출이다.

대부분 Linter에서 발생되는 에러이지만, 본인은 standard.js 를 기준으로 한다는 점을 참고바란다.

Do not use 'new' for side effects

에러는 new 키워드를 통해 인스턴스를 생성하는 과정에서 발생한다.

위와 같은 에러가 뜨는 코드는 아래와 같다.

new Vue({
    el: '#demo',
    data: {
        message: 'Hello Vue.js!'
    }
})

or

new App()

이러한 코드는 인스턴스 생성만이 목적일 때(main.js 또는 app.js), 간결하게 많이 사용된다.

하지만, 일반적으로 인스턴스는 변수에 할당되어 사용된다.

그렇기에, new 키워드로 인한 부작용을 예측하여 에러로 검출된다.

해결방법으로 간단히 생각할 수 있는 건, 그냥 변수에 할당하면 된다.

const dummyInstance = new App()

하지만, 이 경우에는 또 다른 에러가 검출된다.

dummyInstance' is assigned a value but never used.

할당되었지만, 사용되지 않고 있기에, 관련 에러가 발생했다.

다른 해결 방법으로는 함수를 이용하면 된다.

function makeApp(el, options) {
  return new App()
}

makeApp()

이러한 코드는 위 두가지 에러가 발생하지 않게 된다.

하지만, 문제점은 불필요한 코드 및 기괴한 코드로 보여질 수 있다.

최종 방법으로는, 즉시실행함수를 이용할 수 있다.

(() => {
  return new App()
})()

Vue 같은 경우는 이미 존재하는 Vue 객체를 이용함으로써, 훨씬 좋은 코드로 만들어질 수 있다.

Vue.create = ((options) => {
  return new Vue(options)
})({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
})

Compatibility with linters's rules "no-new" and "no-undef"

https://github.com/vuejs/vue/issues/1948