15개의 간단한 JS 인코딩 표준이 당신의 코드를 더욱 깔끔하게 합니다(소결)

작가 | Daniel Anderson
본고는 최초로 Medium 사이트에 발표되었고 원작자의 권한을 위임받은 후에 번역하고 공유합니다.
인코딩 표준은 다음과 같은 측면에 도움이 됩니다.

코드 일치 유지

읽기와 이해가 쉽다

유지 보수가 용이합니다

아래의 인코딩 표준은 내가 상술한 몇 가지에 대해 도움이 되는 견해이다.
1. 비교할 때 = = = 대신
이것은 매우 중요합니다. JavaScript는 동적 언어이기 때문에 = = 를 사용하면 형식이 다르기 때문에 예상치 못한 결과를 가져올 수 있습니다.
Fail:

if (val == 2)

Pass:

if (val === 2)

2. 영원히 var을 사용하지 말고 let으로 대체
let을 사용하면 JavaScript의 다양한 var에서 발생하는 역할 영역 문제를 피하는 데 도움이 됩니다.
Fail:

var myVar = 10;

Pass:

let myVar = 10;

3. let 대신 const 사용하기
개발자가 하지 말아야 할 일을 바꾸는 것을 막고 가독성을 높이는 데 도움이 된다.
Fail:

let VAT_PERCENT = 20;

Pass:

const VAT_PERCENT = 20;

4. 항상 세미콜론 사용(;)
비록 이것은 자바스크립트에서 선택할 수 있지만, 다른 언어처럼 문장의 종지부로 구분해야 하는 것은 아니다.하지만 사용하기;코드를 일치하게 유지하는 데 도움이 된다.
Fail:

const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, vatPercent)

Pass:

const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);

5. JavaScript의 명명 규칙

let은 낙타봉으로 명명해야 하는데..

const는 파일의 맨 위에 대문자로 된 뱀 모양 명명법을 사용합니다.파일 맨 위에 있지 않으면 낙타 봉우리를 사용하여 이름을 지정합니다.

.클래스는 파스카 명명법: MyClass일 것입니다

functions 함수는 낙타봉 명명법: myFunction

6. 문자열을 결합할 때 템플릿 문자열 사용
템플릿 문자열에 표현식을 포함할 수 있습니다.
Fail:

let fullName = firstName + " " + lastName;

Pass:

let fullName = `${firstName} ${lastName}`;

7. 가능한 한 ES6 화살표 함수 사용
화살표 함수는 함수 표현식을 작성하는 더욱 간결한 문법이다.
Fail:

var multiply = function(a, b) {
 return a* b;
};

Pass:

const multiply = (a, b) => { return a * b};

8. 항상 Control Fabric 주위에 괄호를 사용합니다.
모든 제어 구조는 반드시 괄호 (예를 들어,if,else,for,do,while 등) 를 사용해야 한다. 이렇게 하면 후기에 유지보수할 때 오류가 발생하기 쉽다.
Fail:

if (valid)
  doSomething();
if (amount > 100) 
  doSomething();
else if(amount > 200)
  doSomethingElse();

Pass:

if (valid) {
  doSomething();
}
if (amount > 100) {
  doSomething();
} 
else if(amount > 200) {
  doSomethingElse();
}

9. 괄호가 같은 줄에서 시작하고 중간에 빈칸이 있는지 확인
Fail:

if (myNumber === 0)
{
  doSomething();
}

Pass:

if (myNumber === 0) {
  doSomething();
}

10. 중첩 감소 시도
if 내의 if는 혼란스러워지고 읽기 어려워집니다.때때로 너는 문제를 해결할 수 없을 수도 있지만, 코드 구조를 잘 체크해서 개선할 수 있는지 없는지를 볼 수 있다.
Fail:

if (myNumber > 0) {
  if (myNumber > 100) {
       if (!hasDiscountAlready) {
           return addDiscountPercent(0);
       } else {
           return addDiscountPercent(10);
       }
  } else if (myNumber > 50) {
    if (hasDiscountAlready) {
       return addDiscountPercent(5);
    }
  } else {
    if (!hasDiscountAlready) {
      return addDiscountPercent(0);
    } else {
      return addDiscountPercent(1);
    }
  }
} else {
     error();
}

Pass:

if (myNumber <= 0) {
   return error;
}
if (!hasDiscountAlready) {
    return addDiscountPercent(0);
}
if (myNumber > 100) { 
    return addDiscountPercent(10);
}
if (myNumber > 50) { 
    return addDiscountPercent(5);
}
return addDiscountPercent(1);

위의 예시를 통해 알 수 있듯이 끼워넣기를 줄이면 읽기 쉬워진다.
11. 가능한 한 기본 매개 변수 사용하기
자바스크립트에서 함수를 호출할 때 매개 변수를 전달하지 않으면 undefined
Fail:

myFunction(a, b) {
 return a + b;
}

Pass:

myFunction(a = 0, b = 0) { 
 return a + b;
}

12. "Switch"문구는 "break"와 "default"를 사용해야 한다
나는 보통 switch 문장을 사용하지 않으려고 시도하지만, 당신이 그것을 사용하고 싶은 것은 확실합니다. 모든 조건이break이고 defalut를 썼는지 확인하십시오.
Fail:

switch (myNumber)
{
 case 10: 
 addDiscountPercent(0);
 case 20: 
 addDiscountPercent(2);
 case 30:
 addDiscountPercent(3);
}

Pass:

switch (myNumber)
{
  case 10: 
    addDiscountPercent(0);
    break;
  case 20: 
    addDiscountPercent(2);
    break;
  case 30:
    addDiscountPercent(3);
    break;
  default: 
    addDiscountPercent(0);
    break;
}

13. 와일드카드로 가져오지 마십시오.
Fail:

import * as Foo from './Foo';

Pass:

import Foo from './Foo';

14. 부울 값을 사용하는 단축키
Fail:

if (isValid === true)
if (isValid === false)

Pass:

if (isValid)
if (!isValid)

15. 불필요한 삼원어구를 피하려 한다
Fail:

const boo = a ? a : b;

Pass:

const boo = a || b;

총결산
모든 언어의 인코딩 표준은 응용 프로그램의 가독성과 유지보수성을 향상시키는 데 진정으로 도움을 줄 수 있다.만약 당신이 팀에서 일한다면, 매우 어려운 일은 인코딩 표준을 강제로 집행하는 것이다.여기에 당신을 도울 수 있는 조언이 있습니다.

코드 심사, 한 줄 한 줄 패스 코드..

어떤 코드 분석기를 정리하거나 사용합니다

새로운 내용을 만들 때, 당신들의 고급 개발자를 초기화하고, 다른 개발자들은 이 코드를 지도로 사용할 수 있습니다

원문 링크:https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0
이 간단한 JS 인코딩 표준 15개에 대한 당신의 코드를 더욱 깔끔하게 하기 위한 이 글은 여기에 소개되었습니다. 더 많은 JS 인코딩 표준 내용은 우리의 이전 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!