[javascript] javascript 코딩 스타일 가이드

안녕하세요. 오늘은 javascript의 2번째 시간입니다. 오늘은 javacript 코딩 스타일 가이드에 대해서 알아보는 시간을 가져보도록 하겠습니다. 코딩은 대부분이 협업이기 때문에 스타일 가이드를 가지고 따르는 것이 중요합니다. 회사에서 정해진 스타일 가이드를 얼마나 잘 따르는지가 코드의 가독성을 높일 수 있기 때문입니다. 코드의 가독성이 높아진다는 것은 즉 유지보수가 쉬워진다는 뜻입니다. 스타일 가이드의 예로는 변수명은 어떻게 정할지, {}는 어떻게 표현할 지 등등이 있습니다. 오늘 여러분들에게 알려드릴 스타일 가이드는 w3schools과 google에서 제시하는 Style Guide를 참조하였습니다.

이름 정하기

먼저 이름을 정하는 방법에 대해서 알아보겠습니다. javascript에는 다양한 Type이 존재합니다. 변수, 함수, 객체, class, enum 등등 말이죠. 이들의 이름으 정할 때 기준이 되는 가이드를 먼저 보겠습니다.

함수(Function)와 변수(Variable)의 이름

함수와 변수의 이름은 일반적으로 camelCase를 사용합니다. CamelCase란 처음 단어에 대해서는 시작을 소문자로 하고 두번째 단어부터는 대문자로 적는 방법입니다. 또한 이런 이름에는 문자또는 숫자만 사용하도록 합시다. 하지만 테스트 코드를 작성하던지하는 특별한 경우에 특수문자 _를 사용하기도 하고 아주 드물게 $를 추가하여 사용하는 경우도 있습니다.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice : fucntion() {
  return price + (price * tax);
}

또한 모호하거나 익숙하지 않은 약어를 사용하기 보다는 풀 네임을 사용하는 것을 권장합니다. 약어를 사용하고자 할때는 누구나 알 수 있는 약어 또는 팀 안에서 명확한 정의가 되어있는 것을 사용할 필요가 있습니다.

클래스(Class)와 이넘(Enum)의 이름

Class와 Enum은 UpperCamelCase를 이용합니다. UpperCamelCase란 CamelCase를 따르지만 첫 글자부터 대문자로 시작하는 방법입니다. 다른 말로 PascalCase(파스칼 케이스)라고 부르기도 합니다.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

enum CarColor {
  red,
  orange,
  yellow,
  green,
  blue,
  purple,
}

상수 이름

상수 이름은 CONSTANT_CASE를 사용합니다. 해당 방법은 모든 단어는 대문자로 사용하며 각 단어사이에 _를 이용하여 이어주는 방법입니다.

const PHONE_NUMBER = '010-xxxx-xxxx';

포매팅(formatting)

2번째로 알아볼 내용은 포매팅입니다. 포매팅이란 {}를 어떻게 사용할지, 한 줄에 최대 몇자까지 적을 지, 그리고 들여쓰기는 어느정도의 space를 이용할지 등을 정하는 것입니다.

들여쓰기

먼저 들여쓰기는 w3schools과 google 모두 space 2칸을 권장하고 있습니다. tabs 사용을 권장하지 않습니다. 그 이유는 사용하는 IDE에 따라서 tabs의 길이가 다르기 때문입니다. 예를 들어 visual studio code의 경우에는 space 4칸으로 기본설정이 되어있으므로 변경이 필요합니다.

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32); // 들여쓰기로 space 2칸이 적용됬을 때 함수의 모습
}

띄어쓰기

사칙연산 (+, -, *, /)를 포함한 Operation( = 등등)의 앞과 뒤는 항상 띄어쓰기를 하도록 합시다.

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

세미콜론

변수 선언 및 명령문 사용에 대해서 마지막에는 항상 세미콜론(;)을 붙여주도록 합시다.

var values = ["Volvo", "Saab", "Fiat"];

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

함수, 루프문, 조건문, 객체의 경우 첫 여는 중괄호({)는 선언문과 동일한 첫번째 라인에 씁니다. 엔터 후 본문을 작성합니다. 그리고 마지막 닫는 중괄호(})는 엔터 후 작성합니다. 아래의 예제들을 각각 참고해주세요.

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

for (i = 0; i < 5; i++) {
  x += i;
}

if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Line 길이

w3shcools와 google은 모두 80자 제한을 두고 있습니다. 이는 어떤 모니터에서도 잘 볼 수 있도록 하기 위함이라고 합니다. 요즘 모니터에서는 80자가 아니라 좀 더 넓게 많이 볼 수 있기 때문에 120자 제한을 두고 사용하는 곳도 많이 있습니다.

마무리

오늘은 이렇게 자바스크립트의 코딩 스타일에 대해서 알아보는 시간을 가졌습니다.

감사합니다.

참조

w3shcools_conventions

google_style_guide_javascript