[ESLint es6] JavaScript 이해하기 1 Errors

ESLint Rules는 JavaScript의 역사와 지식이 담겨있습니다. 그래서 ESLint Rules를 공부하는 것만으로도 자바스크립트를 깊이 이해할 수 있습니다.

아래 코드는 어디까지나 대표적인 예시입니다. 각각의 규칙은 옵션에 따라 규칙을 변경할 수 있어서 최적의 코드는 아닐 수 있습니다.

하지만, 아래 소개할 글은 (비록 길지만) 정독해두면 코딩할 때 많은 도움이 될 거라 생각합니다.

for-direction

for문 긍정적인 방향으로 작성하는 것을 강제합니다.

// NG

for (var i = 0; i < 10; i--) {

  console.log(i)

}

// OK

for (var i = 0; i < 10; i++) {

  console.log(i)

}

getter-return

get 구문에서 return을 무조건 작성해야 합니다.

// NG

var hoge = {

  get name () {

    console.log('hoge')

  }

}

// OK

var hoge = {

  get name () {

    return 'hoge'

  }

}

no-await-in-loop

await를 반복문에서 사용하는 것을 금지합니다.

// NG

async function ngHoge () {

  let dataList = []

  let data

  for (let i = 0; i < 10; i++) {

    data = await doSomething(i)

    dataList.push(data)

  }

  return dataList

}

// OK

async function okHoge () {

  let dataList = []

  for (let i = 0; i < 10; i++) {

    dataList.push(doSomething)

  }

  return await Promise.all(dataList)

}

no-compare-neg-zero

-0과 비교하는 것을 금지합니다.

// NG

var i = 0

if (i === -0) {

  console.log(i)

}

no-cond-assign

조건식에서 대입하는 것을 금지합니다.

// NG

const obj = {}

if (obj.hoge = true) {

  console.log(i)

}

no-console

console 사용하는 것을 금지합니다.

console은 production 환경을 푸시하기 전에 제거되어야 합니다.

// NG

console.log('log')

console.warn('warn')

console.error('error')

no-constant-condition

조건식 상수(예를 들어 리터럴)를 삽입하는 것을 금지합니다.

// NG

if (false) {

  doSomethingForDevelopment()

}

// OK

if (env === 'development') {

  doSomethingForDevelopment()

}

no-control-regex

정규표현식에서 제어 문자 지정하는 것을 금지합니다.

정규표현식에서 제어 문자 사용하는 것은 드물며 대부분의 경우 오타입니다.

// NG

var pattern1 = /Hello¥x0aWorld/

var pattern2 = new RegExp("Hello¥x0aWorld")

// OK

var pattern1 = /Hello¥sWorld/

var pattern2 = new RegExp("Hello¥sWorld")

no-debugger

debugger 문장 사용을 금지합니다.

debugger 디버그를 위해 사용하는 코드에 포함되면 안 됩니다.

// NG

function hoge () {

  debugger

  console.log('hoge')

}

no-dupe-args

함수 정의 시에 중복 인수를 금지합니다.

// NG

function example (hoge, fuga, hoge) {

  console.log(hoge)

}

no-dupe-keys

객체 정의 시 중복된 키 이름을 금지합니다.

// NG

const obj = {

  key1: 'key1',

  key1: 'key2'

}

no-duplicate-case

switch 문에 중복된 케이스 라벨을 금지합니다.

// NG

switch (hoge) {

  case 1:

    console.log('This is case 1')

    break

  case 2:

    console.log('This is case 2')

    break

  case 1:

    console.log('This is case 3')

    break

}

no-empty

빈 블록을 금지합니다.

기술적으로 잘못된 것은 아니지만, 코드를 읽을 때 헷갈릴 수 있습니다.

// NG

function example (x) {

  if (x) {

  }

  switch (x) {

  }

}

no-empty-character-class

정규표현식에서 빈 character classes[]를 사용하는 것을 금지합니다.

빈 []은 무엇과도 일치하지 않으므로 오타입니다.

// NG

var hoge = /abc[]/

// OK

var fuga = /abc[a-z]/

no-ex-assign

cache절에서 예외 개체에 대한 재할당을 금지합니다.

예외 개체에 대한 대체 연결 수단은 존재하지 않아 대입할 경우 무조건 에러입니다.

// NG

try {

} catch (e) {

  e = new Error()

}

no-extra-boolean-cast

불필요한 Boolean 형태로 변환하는 것을 금지합니다.

if문 등의 조건식에는 식의 결과가 무조건 Boolean입니다.

var example = 10

// NG

if (Boolean(example)) {

}

if (!!example) {

}

// OK

if (example) {

}

if (!example) {

}

no-extra-parens

불필요한 괄호를 금지합니다.

// NG

var total = (10 * 20) - 30

no-extra-semi

불필요한 세미콜론을 금지합니다.

불필요한 세미콜론은 기술적인 오류는 아니지만, 코드를 읽을 때 헷갈립니다.

// NG

var example = 5;;

function example () {

  console.log('sample')

};

no-func-assign

함수에 다시 대입하는 것을 금지합니다.

// NG

function example () {

  console.log('before')

}

example = true

no-inner-declarations

블록 내에서 함수 선언을 금지합니다. 그러나 블록 내에서의 함수식은 허용됩니다.

// NG

if (true) {

  function example () {

    console.log('example')

  }

}

// OK

if (true) {

  var example = function () {

    console.log('example')

  }

}

no-invalid-regexp

RegExp 생성자에서 잘못된 정규식을 지정하는 것을 금지합니다.

정규식 리터럴을 사용했을 때 코드를 파싱하면 SyntaxError가 발생하지만, RegExp 개체의 경우 코드가 실행되었을 때 SyntaxError가 발생하기 때문입니다.

// NG

var regexp = new RegExp('[')

no-irregular-whitespace

잘못된 공백을 금지합니다.

무효 또는 불규칙한 공백은 ECMAScript5 파서에서 문제를 일으키는 코드의 디버깅을 어렵게 합니다.

// NG

function thing() {

    return 'test'; /*<ENSP>*/

}

function thing() {

    return `template <NBSP>string`;

}

no-obj-calls

글로버 객체를 함수로 호출하는 것을 금지합니다.

EcmaScript는 대문자 전역 개체를 제공하지만, 그 함수들은 실행하면 오류가 발생합니다.

// NG

Math()

var json = JSON()

var reflect = Reflect()

no-prototype-builtins

Object.create에서 생성한 객체에 대해 Object.prototypes의 메소드(함수) 직접 호출을 금지합니다.

var parent = function () {

  return this

}

parent.prototype.hoge = function () {

  console.log('hoge')

}

var child = Object.create(parent)

// NG

var hasHoge = child.hasOwnProperty('hoge')

// OK

var hasHoge = Object.hasOwnProperty.call(child, 'hoge')

no-regex-spaces

정규표현식에서 여러 공백을 금지합니다.

정규표현식은 실수를 없애기 위해 가능한 한 단순하게 유지해야 합니다.

// NG

var regex = /Hell   World/

var regex = new RegExp("Hello   World")

// OK

var regex = /Hell {3}World/

var regex = new RegExp("Hello {3}World")

no-sparse-arrays

빈 배열을 만드는데 스퍼스(Spurs) 배열 사용하는 것을 금지합니다.

스퍼스 배열 구현 의도를 이해하기 어렵고 혼란스럽습니다.

// NG

var array1 = [,,]

var array2 = ['red',,'blue']

// OK

var array1 = new Array(3)

var array2 = ['red', 'blue', ] // 마지막 쉼표는 OK

no-template-curly-in-string

일반적으로 문자열에서 템플릿 문자열의 자리 표시자 사용을 금지합니다.

템플릿 문자열을 잘못된 일반 문자열로 사용하는 것을 방지합니다.

// NG

var str1 = "Hello ${wld}"

var str2 = 'Hello ${wld}'

no-unexpected-multiline

혼란스러운 여러 줄(개행)은 금지합니다.

개행은 몇 가지 규칙을 제외하고 자동 세미콜론 삽입하여 끝냅니다.

// NG

var foo = bar

(1 || 2).baz();

(개행)

(개행)

// OK

var foo = bar;

(1 || 2).baz();

no-unreachable

return, throw, continue, break 문에 닿지 못하는 코드를 금지합니다.

// NG

function hoge () {

  return 'hoge'

  console.log('hoge')

}

no-unsafe-finally

return, throw, continue, break 문을 finally 블록으로 정의하는 것을 금지합니다.

이건 try~catch 구문에 의해 예기치 않은 동작을 방지할 수 있습니다.

// NG

try {

  return 1

} catch (e) {

  return 2

} finally {

  return 3

}

no-unsafe-negation

관계 연산자에서 왼쪽 피연산자로 부정하는 것을 금지합니다.

개발자 의도완 다르게 작동할 가능성이 있기 때문입니다.

// NG

if (!hoge in obj) {

}

if (!hoge instanceof Object) {

}

// OK

if (!(hoge in obj)) {

}

if (!(hoge instanceof Object)) {

}

use-isnan

NaN을 판정할 때에는 isNaN()을 사용해야 합니다.

NaN으로 비교했을 경우 결과가 혼란스럽기 때문입니다.

// NG

if (hoge === NaN) {

}

// OK

if (isNaN(hoge)) {

}

valid-jsdoc

JSDoc 주석은 무조건 추가해야 합니다.

// NG

/**

 * Add two numbers.

 * @param {number} num The first number.

 * @returns The sum of the two numbers.

 */

function add(num1, num2) {

  return num1 + num2;

}

// OK

/**

 * Add two numbers.

 * @param {number} num1 The first number.

 * @param {number} num2 The second number.

 * @returns {number} The sum of the two numbers.

 */

function add(num1, num2) {

  return num1 + num2;

}

valid-typeof

typeof로 비교할 때 문자열이 유효한지 확인해야 합니다.

// NG

if (typeof hoge === 'undefiend') {

}

if (typeof hoge === 'stirng') {

}

// OK

if (typeof hoge === 'undefined') {

}

if (typeof hoge === 'object') {

}

다음 편으로 이어집니다. [ESLint es6] JavaScript 이해하기 2 최선의 예제 이어 보세요.