[Javascript] Javascript 규칙

JavaScript 코딩 컨벤션, 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성, 유지보수성, 일관성이 크게 향상됩니다. 아래에 JavaScript를 작성할 때 지켜야 할 주요 컨벤션과 규칙을 정리했습니다.

JavaScript 코딩 컨벤션

1. 들여쓰기와 공백

• 들여쓰기: 일반적으로 2칸 또는 4칸의 공백을 사용합니다. 일관된 들여쓰기를 유지합니다.
• 공백: 연산자 주변, 코드 블록 사이, 함수 인수 목록 등에 적절한 공백을 사용하여 가독성을 높입니다.

// 2칸 들여쓰기 예시
function add(a, b) {
  return a + b;
}

// 공백 사용 예시
let sum = add(2, 3);
if (sum > 5) {
  console.log('Sum is greater than 5');
}

2. 중괄호와 줄바꿈

• 중괄호: 조건문, 반복문, 함수 정의 등 모든 코드 블록에서 중괄호를 사용합니다.
• 줄바꿈: 코드 블록의 시작 중괄호는 같은 줄에 작성하고, 종료 중괄호는 새로운 줄에 작성합니다.

if (true) {
  console.log('Condition is true');
} else {
  console.log('Condition is false');
}

3. 세미콜론

• 세미콜론: 모든 문(statement) 끝에 세미콜론을 사용합니다.

let name = 'John';
let age = 30;

4. 변수 선언

• var 대신 let과 const 사용: 변수 선언 시 블록 스코프를 가지는 let과 const를 사용합니다. 변경되지 않는 값에는 const를 사용합니다.

const pi = 3.14;
let count = 0;

JavaScript 네이밍 컨벤션

1. 변수와 함수 네이밍

• 카멜 케이스(Camel Case): 변수와 함수 이름은 소문자로 시작하고, 각 단어의 첫 글자를 대문자로 합니다. (예: let myVariableName, function myFunctionName())

let myVariableName = 'value';
function myFunctionName() {
  // ...
}

2. 상수 네이밍

• 대문자 스네이크 케이스(Uppercase Snake Case): 상수는 모든 문자를 대문자로 하고, 단어 사이에 언더스코어(_)를 사용합니다. (예: const MAX_LIMIT)

const MAX_LIMIT = 100;

3. 클래스 네이밍

• 파스칼 케이스(Pascal Case): 클래스 이름은 각 단어의 첫 글자를 대문자로 합니다. (예: class MyClassName)

class MyClassName {
  constructor() {
    // ...
  }
}

4. 파일 네이밍

• 케밥 케이스(Kebab Case): 파일 이름은 모두 소문자로 하고, 단어 사이에 하이픈(-)을 사용합니다. (예: my-file-name.js)

my-file-name.js

JavaScript 코드 스타일 규칙

1. 함수

• 함수 선언: 함수 이름은 동사로 시작하고, 함수의 역할을 명확히 나타내야 합니다.
• 화살표 함수: 콜백 함수나 간단한 함수 표현에는 화살표 함수를 사용합니다.

// 함수 선언
function calculateSum(a, b) {
  return a + b;
}

// 화살표 함수
const multiply = (a, b) => a * b;

2. 객체와 배열

• 객체와 배열의 선언: 객체와 배열을 선언할 때, 가독성을 위해 각 프로퍼티나 요소를 개별 줄에 작성합니다.

// 객체 선언
let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// 배열 선언
let fruits = [
  'Apple',
  'Banana',
  'Cherry'
];

3. 주석

• 주석 사용: 코드의 목적과 동작을 설명하는 주석을 적절히 사용합니다. 주석은 코드 상단이나 각 섹션별로 작성합니다.

// 이 함수는 두 수를 더합니다.
function add(a, b) {
  return a + b;
}

4. 공통 규칙

• DRY (Don't Repeat Yourself): 중복된 코드를 피하고, 재사용 가능한 함수를 작성합니다.
• KISS (Keep It Simple, Stupid): 코드를 간단하고 명확하게 유지합니다.
• YAGNI (You Aren't Gonna Need It): 현재 필요하지 않은 기능은 작성하지 않습니다.

예시 코드

// 상수 선언
const MAX_LIMIT = 100;

// 함수 선언
function calculateSum(a, b) {
  return a + b;
}

// 화살표 함수
const multiply = (a, b) => a * b;

// 객체와 배열 선언
let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

let fruits = [
  'Apple',
  'Banana',
  'Cherry'
];

// 조건문과 반복문
if (person.age > 18) {
  console.log(`${person.name} is an adult.`);
} else {
  console.log(`${person.name} is not an adult.`);
}

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 함수 호출
let sum = calculateSum(5, 10);
let product = multiply(5, 10);
console.log(`Sum: ${sum}, Product: ${product}`);