코딩 기록

[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 최선의 예제 이어 보세요.




댓글(4)

  • 베르무트
    2020.04.24 16:59

    1. 첫줄부터 궁금한게 생겼는데 for 예시에서 i-- 를 사용하지 말라는건가요? 아니면 저 경우 0 에서 10 으로 갈 수 없으니까 오류라는건가요?

    2. no-control-regex 좀 설명해주실 수 있나요?

    3. no-template-curly-in-string
    ' 대신 ` 쓰라는 뜻인가요?

    • 1234
      2020.04.24 18:23

      1. 일때보면,,, i--를하게되면 i<10일때 계속 돌게되어 무한루프돌겠네요 ㅎㅎ

    • 베르무트
      2020.04.27 17:10

      1 번의 경우 제가 인터넷 검색해보니까 단순히 i-- 를 사용하지 말라는게 아니라 0 에서 10 으로 갈 수 없고 무한루프 도니까 사용하지 말라는거였네요...
      반대로
      for(var i = 9; i > -1; i--){
      console.log(i);
      }
      는 사용해도 된다네요...저처럼 다른분들 헷갈리지 말길...

    • 회사에서
      2020.04.29 14:47

      1. 무한루프 방지 : https://eslint.org/docs/rules/for-direction

      2. 아스키 범위 0-31 사이의 특수하면서도 보이지 않는 문자입니다. 자바스크립트에선 거의 사용하지 않기에 실제로 코딩되었더라도 실수일 확률이 높습니다 : https://eslint.org/docs/rules/no-control-regex

      3. 쌍따옴표 대신 2개의 역 따옴표 사용을 권하는 겁니다. 잘못된 따옴표 사용을 방지하는 의미입니다 : https://eslint.org/docs/rules/no-template-curly-in-string


      전체 룰에 대해선 https://eslint.org/docs/rules/ 이 사이트를 참고하세요.

Designed by JB FACTORY