[Javascript] 자바스크립트 코딩 컨벤션

어쩌면 이 글이 이 카테고리의 맨 앞으로 갔어야 할지도 모릅니다. 하지만 중요성을 잊고있다가 최근 파일 정리를 하면서 보니까 자바스크립트의 표준 코딩 규약과는 다르게 해놓은 것들이 많아서 스스로 다시 정리할 필요성을 느끼게 되었습니다. 늦었지만 이제서라도 한 번 다시 정리해보려고 합니다.

 

---

0. 코딩 컨벤션

코딩 규약, 코딩 컨벤션, 코딩 규칙 등이라고 불리는 이 규칙들은 다른 사람들이 내 코드를, 내가 다른 사람의 코드를 리뷰할 때 의사소통을 원활하게 만들어주는 규칙들입니다. 사람마다 익숙한 표기법이 있고 스타일이 있기 때문에 협업을 하게된다면 서로의 코딩 스타일이 달라서 읽고 해석하는데 애를 먹게 되죠. 실제로 지금 3학년이 되어 1학년때 과제로 냈던 소스 코드들을 살펴보면 변수명 규칙이나 띄어쓰기가 통일 되지 않아서 학부 1학년 수준인데도 읽을 때 난감한 부분이 있었던 경험이 있습니다. 

당장 if문만 해도 다음과 같이 여러 방식으로 표기할 수 있습니다.

if() {
	return;
}

if()
{
	return;
}

if() return;

이처럼 제각각인 코딩스타일을 하나로 통일해 가독성과 유지보수성을 챙기기 위해 미리 약속한 코딩 규칙을 코딩 컨벤션 이라고 합니다.

코딩 컨벤션은 프로젝트나 회사마다 조금씩 차이가 나기 때문에 여러곳의 코딩 컨벤션과 책자들을 참고해서 공통적으로 통일되어있는 부분만을 정리해보겠습니다.

 

 

1. 소스 파일의 기본 규칙

• 소스 파일의 이름은 알파벳 소문자, 하이픈(-), 언더바(_)로만 작성한다.
• 소스 파일의 확장자는 .js로 통일한다.
• 소스 파일의 인코딩은 UTF-8을 이용한다.
• 한 행에 하나의 명령만을 작성한다.
• 1행당 문자의 최대 수는 80자 이내로 한다.
• 파일의 맨 끝은 개행한다.
• 세미콜론이 필수는 아닌 언어이지만 반드시 붙여준다.

 

2. 공백

• 들여쓰기에 탭을 이용하지 않고 스페이스 2개로 표현한다.
• 공백에 스페이스와 탭을 섞어 쓰지 않는다.
• 콤마와 세미콜론의 뒤에 공백을 넣는다.
• 함수나 객체 등을 정의한 블록의 전후에는 공백 행을 넣는다.
• 공백 행을 연속으로 2개 이상 사용하지 않는다.

 

3. 구문

3-1. 명명 규칙

• 변수명과 함수명은 camelCase를 따라서 작성한다. (예] getReady(), speedOfCar)
• 상수명은 대문자의 언더 스코어 방식을 이용한다. (예] PI, MAX_VERTEX)
• 생성자와 클래스명은 PascalCase를 따라서 작성한다. (예] ImClass)
• 프라이빗 멤버(클래스의 private 멤버 변수)들은 언더바(_)로 시작한다. (예] _name, _id)
• 이벤트 핸들러 함수들은 'on'이라는 단어로 시작한다. (예] onclick, onload)
• 명명할 때 축약어 보다는 의미를 살린 긴 이름을 이용하도록 한다.

//변수와 함수명
const PI = 3.14;
let number = 2;

let getSquare = (number) => {
  return number * number;
};


//클래스 명명과 프라이빗 멤버
class StudentInfo {
  let _name;
  let _id;
 
  constructor(name, id) {
    this._name = name;
    this._id = id;
  }
}

 

3-2. 중괄호 블록

• 중괄호 블록을 열기 전에 개행하지 않는다.
• 중괄호 블록을 닫기 전에 개행한다.

if ()	//나쁜 작성
{
}

if () {	//나쁜 작성
  callFunction(); }
  
if () {	//좋은 작성
  callFunction();
}

 

3-2. 제어문

• 제어문 키워드 뒤에 한 칸의 공백을 가지고 괄호를 사용한다.
• 중괄호는 모든 제어문에서 한 줄의 명령을 가지더라도 반드시 포함해야 한다.
• 단, if문에 대해서는 하나의 한 줄의 명령을 가지면 같은 라인에 명령을 작성하고 중괄호를 생략 가능하다.
• 조건문의 조건부는 간단하게 기술한다.

  for (let i=0; i<3; i++) callFunction();	//나쁜 작성
  
  
  for (let i=0; i<3; i++) {	//종은 작성
    callFunction();
  }
  
  //단, if문은 다음과 같은 작성을 허용
  if () callFunction();
  
  //조건부는 쓸데없이 길어지지 않도록 한다.
  if (foo === true)  //나쁜 작성
  if (foo)  //좋은 작성

3-3. 변수

• 변수 선언에서 var의 사용 대신 let이나 const를 이용한다.
• 한 번의 선언에서는 하나의 변수만을 선언한다.
• 문자열을 사용할 때는 큰 따옴표(")보단 작은 따옴표(')를 이용한다.

var num1;  //var 선언은 지양할 것. 블록 스코프와 관련한 문제가 있습니다.
let num2;
const num3;

let a, b;  //한 번에 여러개의 선언보단,
let c;
let d;  //나눠서 이용하기

//문자열은 작은 따옴표 이용하기
let str = "문자열입니다.";
let str = '문자열입니다.';

 

3-4. 기타 구문

• ==과 != 대신에 ===과 !==을 이용한다.
• 숫자는 2/8/10/16진수로 표기하며, b/o/x 이후에 불필요한 0은 표기하지 않는다.
• 문자열에서 eval() 함수는 사용하지 않는다.
• return문을 위한 불필요한 변수 선언은 자제한다.

  if (a==b)  //나쁜 작성
  if (a===b)  //좋은 작성
  
  
  //나쁜 작성
  function() {
    let result;
    
    result = 1+1;
    
    return result;
  }
  
  //좋은 작성
  function() {
    return 1+1;
  }

---

참조

https://google.github.io/styleguide/jsguide.html

Google JavaScript Style Guide

https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/JavaScript#general_javascript_guidelines

JavaScript guidelines - The MDN project | MDN

https://github.com/airbnb/javascript

GitHub - airbnb/javascript: JavaScript Style Guide

방대하고 잘 정리되어있는 블로그 글도 발견하여 첨부해드립니다.

https://velog.io/@cada/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%94%EB%94%A9-%EB%B0%8F-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-1%ED%8E%B8

자바스크립트 스타일 가이드 - 코딩 컨벤션 편