일반 코딩 표준 JavaScript.

일반 코딩 표준

1. 의미 있는 이름:
   • 의미 있고 설명이 포함된 변수 및 함수 이름을 사용하세요.
   • 루프 카운터를 제외하고 약어와 한 글자로 된 이름은 사용하지 마세요.

   // Good
   const userAge = 25;
   function calculateTotalPrice(items) { ... }

   // Bad
   const a = 25;
   function calc(items) { ... }

1. 일관적인 명명 규칙:
   • 변수와 함수에는 camelCase를 사용하세요.
   • 클래스 이름에는 PascalCase를 사용하세요.

   const userAge = 25;
   function calculateTotalPrice(items) { ... }
   class UserProfile { ... }

1. 반복 방지:
   • 반복되는 코드를 함수로 캡슐화하여 DRY(Don't Repeat Yourself) 원칙을 따릅니다.

   // Good
   function calculateDiscount(price, discount) { ... }
   const price1 = calculateDiscount(100, 10);
   const price2 = calculateDiscount(200, 20);

   // Bad
   const price1 = 100 - 10;
   const price2 = 200 - 20;

1. 오류 처리:
   • try-catch 블록으로 API 호출과 기타 비동기 작업을 래핑합니다.

   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

1. 최첨단 케이스:
   • 항상 극단적인 경우를 고려하고 입력 내용을 검증하세요.

   function getUserAge(user) {
     if (!user || !user.age) {
       return 'Age not available';
     }
     return user.age;
   }

1. 일관된 형식:
   • 일관적인 코드 형식 지정 스타일(들여쓰기, 간격 등)을 따르세요. 이를 자동화하려면 Prettier와 같은 도구를 사용하세요.

   if (condition) {
     doSomething();
   } else {
     doSomethingElse();
   }

코드 구성

1. 모듈화:
   • 코드를 재사용 가능한 작은 모듈이나 함수로 나눕니다.

   // utils.js
   export function calculateDiscount(price, discount) { ... }

   // main.js
   import { calculateDiscount } from './utils.js';

1. 우려사항 분리:
   • 다양한 문제(예: UI 로직, 비즈니스 로직, 데이터 처리)를 다양한 파일이나 기능으로 분리합니다.

   // ui.js
   function updateUI(data) { ... }

   // data.js
   async function fetchData() { ... }

   // main.js
   import { updateUI } from './ui.js';
   import { fetchData } from './data.js';

모범 사례

1. 엄격 모드 사용:
   • 일반적인 코딩 오류를 포착하려면 항상 엄격 모드를 활성화하세요.

   'use strict';

1. 상수 사용:
   • 변경되지 않는 값에는 상수를 사용하세요.

   const MAX_USERS = 100;

1. 전역 변수 피하기:
   • 충돌과 의도하지 않은 동작을 방지하려면 전역 변수 사용을 최소화하세요.

   // Good
   (function() {
     const localVariable = 'This is local';
   })();

   // Bad
   var globalVariable = 'This is global';

1. 댓글 달기 및 문서화:
   • 코드의 목적과 기능을 설명하는 주석과 문서를 작성하세요.

   /**
    * Calculates the total price after applying a discount.
    * @param {number} price - The original price.
    * @param {number} discount - The discount to apply.
    * @returns {number} - The total price after discount.
    */
   function calculateTotalPrice(price, discount) { ... }

1. 오류 처리에 Promise 및 Async/Await 사용:
   • 비동기 작업에는 promise와 async/await를 사용하고 오류 처리를 위해 try-catch 블록으로 래핑하는 것을 선호합니다.

   // Good
   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

   // Bad
   function fetchData(callback) {
     fetch('api/url')
       .then(response => response.json())
       .then(data => callback(data))
       .catch(error => console.error('Error fetching data:', error));
   }

1. 객체 파괴:
   • 객체 구조 분해를 사용하면 객체에서 여러 속성을 간결하게 추출할 수 있습니다.

   // Good
   const vehicle = { make: 'Toyota', model: 'Camry' };
   const { make, model } = vehicle;

   // Bad
   const vehicleMake = vehicle.make;
   const vehicleModel = vehicle.model;

이러한 표준을 따르면 JavaScript 코드가 깔끔하고 유지 관리가 가능하며 효율적인지 확인할 수 있습니다.

위 내용은 일반 코딩 표준 JavaScript.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!