[개발 규칙] Javascript 규칙

JavaScript 코딩 컨벤션과 네이밍 컨벤션에 대해 더욱 자세히 설명드리겠습니다. 여기서는 Google JavaScript 스타일 가이드, Airbnb JavaScript 스타일 가이드 등 유명한 스타일 가이드를 참고한 내용을 포함합니다.

1. 코딩 컨벤션

코드 스타일

• 들여쓰기:

  • 보통 2칸 스페이스를 사용합니다. 탭보다는 스페이스를 사용하는 것이 일반적입니다.

    function example() {
      if (true) {
        console.log("Hello, world!");
      }
    }

• 세미콜론:

  • 명령문 끝에 세미콜론을 사용합니다.

    let x = 1;
    let y = 2;

• 중괄호:

  • 조건문, 반복문 등에서 중괄호를 사용하는 것을 권장합니다.

    if (condition) {
        // code block
    }

• 공백:

  • 연산자와 피연산자 사이, 콤마와 그 뒤의 요소 사이에 공백을 둡니다.

    let sum = a + b;

• 라인 길이:

  • 코드의 각 줄은 80자 또는 100자를 넘지 않도록 합니다.

• 빈 줄:

  • 함수 사이, 블록 사이에는 빈 줄을 넣어 가독성을 높입니다.

주석

• 단일 행 주석:

• // This is a single line comment

• 여러 행 주석:

• /* * This is a multi-line comment */

• 문서화 주석:

  • JSDoc을 사용하여 함수, 클래스, 모듈 등의 주석을 작성합니다.

    /**
    * Adds two numbers together.
    * @param {number} a - The first number.
    * @param {number} b - The second number.
    * @return {number} The sum of the two numbers.
    */
    function add(a, b) {
        return a + b;
    }

2. 네이밍 컨벤션

변수와 함수

• 카멜 케이스:

  • 변수명과 함수명은 소문자로 시작하고 이후 각 단어의 첫 글자를 대문자로 합니다.

    let myVariable = 10;
    function myFunction() {
        // code
    }

• 의미 있는 이름:

  • 변수명과 함수명은 그 역할을 명확히 나타내도록 의미 있는 이름을 사용합니다.

    let userAge = 25;
    function calculateSum(a, b) {
        return a + b;
    }

클래스

• 파스칼 케이스:

  • 클래스명은 각 단어의 첫 글자를 대문자로 합니다.

    class MyClass {
      constructor() {
        // code
      }
    }

상수

• 대문자 스네이크 케이스:

  • 상수명은 모든 글자를 대문자로 하고, 단어 사이에 언더스코어(_)를 사용합니다.

    const MAX_SIZE = 100;

3. 규칙

변수 선언

• let, const 사용:

  • var 대신 let과 const를 사용합니다. 재할당이 필요 없는 경우에는 const를 사용합니다.

    const name = "John";
    let age = 25;

• 스코프:

  • 변수를 필요한 범위 내에서만 선언합니다.

    function example() {
        let localVariable = "I am local";
    }

함수 선언

• 함수 표현식:

  • 가능한 경우 함수 표현식을 사용하여 변수에 할당합니다.

    const myFunction = function() {
        // code
    };

• 화살표 함수:

  • 화살표 함수는 특히 콜백이나 익명 함수를 작성할 때 사용합니다.

    const add = (a, b) => a + b;

문자열

• 템플릿 리터럴:

  • 문자열을 연결할 때는 백틱(`)을 사용한 템플릿 리터럴을 사용합니다.

    const message = `Hello, ${name}!`;

• 문자열 선언:

  • 문자열은 작은따옴표(')를 사용하여 선언합니다.

    const greeting = 'Hello, world!';

비교 연산자

• 엄격한 비교 연산자:

  • == 대신 ===를 사용하여 형 변환 없이 값을 비교합니다.

    if (a === b) {
        // code
    }

객체 및 배열

• 비구조화 할당:

  • 객체나 배열을 다룰 때는 비구조화 할당을 사용하여 코드의 가독성을 높입니다.

    const person = { name: 'John', age: 25 };
    const { name, age } = person;
    const array = [1, 2, 3];  
    const [first, second] = array;

• 스프레드 연산자:

  • 배열이나 객체를 복사하거나 병합할 때 스프레드 연산자를 사용합니다.

    const newArray = [...array, 4, 5];
    const newObject = { ...person, location: 'New York' };

오류 처리

• try-catch:

  • 예외 상황을 처리하기 위해 try-catch 블록을 사용합니다.

    try {
        // code that may throw an error
    } catch (error) {
        console.error(error);
    }

모듈화

• ES6 모듈:

  • ES6의 import와 export를 사용하여 모듈을 구성합니다.

    // module.js
    export const myFunction = () => {
        // code
    };
    
    // main.js  
       import { myFunction } from './module';