[javascript] 자바스크립트에서 좋은 코드 작성을 위한 코딩 스타일 가이드

26 Dec 2023

자바스크립트로 좋은 코드를 작성하기 위해서는 일관된 코딩 스타일을 유지하는 것이 중요합니다. 이 가이드는 자바스크립트 코드 작성 시 유용한 모범 사례와 규칙에 대해 소개합니다.

들여쓰기

들여쓰기에 일관성을 유지하여 가독성을 향상시키고 코드의 구조를 명확히 합니다. 2개의 공백 또는 탭 문자를 사용하여 들여쓰기를 권장합니다.

예시:

function calculateTotal(price, quantity) {
  let total = price * quantity;
  return total;
}

의미 있는 변수 및 상수명을 사용하여 코드의 가독성을 높이고 유지보수를 용이하게 합니다.

예시:

const PI = 3.14159;
let userName = "JohnDoe";
let itemCount = 10;

함수의 이름을 명확하고 의미 있는 것으로 정하고, 함수 내에서 일관된 반환 값 및 인자 처리를 유지합니다.

예시:

function calculateArea(radius) {
  return Math.PI * radius ** 2;
}

가독성을 향상시키기 위해 중괄호({}) 사용을 권장하고, 삼항 연산자를 활용하여 간결하게 표현할 수 있는 경우에 사용합니다.

예시:

if (age >= 18) {
  canVote = true;
} else {
  canVote = false;
}

// 삼항 연산자를 사용한 예시
canVote = (age >= 18) ? true : false;

for, while 등의 반복문을 사용할 때, 인덱스 변수명을 명확하게 정의하고, 반복 조건을 명확히 설정하여 코드의 의도를 명확히 합니다. 또한, 반복문 내에서 일관된 들여쓰기를 유지합니다.

예시:

for (let i = 0; i < 5; i++) {
  console.log("현재 인덱스: ", i);
}

복잡한 코드 또는 알고리즘의 경우 주석을 추가하여 다른 개발자가 코드를 이해할 수 있도록 돕습니다. 주석은 코드의 의도를 명확히 설명하고, 코드의 변화에 맞춰 유지보수되어야 합니다.

예시:

// 원 넓이를 계산하는 함수
function calculateArea(radius) {
  return Math.PI * radius ** 2; // 반지름의 제곱에 파이를 곱한 값
}

의미 있는 변수명을 사용하고, 카멜 표기법 또는 스네이크 표기법을 따르는 것이 좋습니다. 추가적으로 명명 규칙에 따라 변수명을 작성하는 것을 권장합니다.

예시:

let totalAmount = calculateTotal(price, quantity);

좋은 코딩 스타일은 코드를 이해하기 쉽게 만들고, 향후 유지보수를 쉽게 만듭니다. 위의 모범 사례를 참고하여 자바스크립트 코드 작성 시 일관된 스타일을 유지하고, 좋은 품질의 코드를 작성할 수 있도록 노력해 보세요.