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

Bam·2022년 2월 18일
0

Javascript

목록 보기
6/106
post-thumbnail

코딩 컨벤션

코딩 컨벤션이란 내가 나의 코드를, 다른 사람이 나의 코드를 보고 원활하게 의사소통하고 해석하기 위한 규칙입니다. 코딩 컨벤션을 규정하는 이유느 사람마다 코딩 스타일이 제각각이기 때문입니다. 다음은 자바스크립트에서 if문을 사용하는 세 가지 방식입니다.

if() {
	return;
}

if()
{
	return;
}

if() return;

이처럼 사람마다 제각각인 코딩 스타일들을 하나로 통일해서 가독성과 유지보수성을 높이고, 원만한 협업을 할 수 있게 미리 약속해둔 코딩 규칙을 코딩 컨벤션이라고 합니다.

자바스크립트의 코딩 컨벤션은 회사마다, 집단마다 조금씩 차이가 있기 때문에 저는 공통적인 코딩 컨벤션들을 가지고 소개해드리겠습니다. 따라서 제가 소개해드리는 컨벤션은 정형화된 정석이 아닙니다.


소스 파일

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

공백

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

구문

명명규칙

  • 대문자와 소문자를 엄격하게 구분한다.
  • 변수명과 함수명은 CamelCase를 따른다. (예. getReady(), colorOfCar)
  • 상수명은 대문자의 언더 스코어방식을 이용한다. (예. PI, MAX_VERTEX)
  • 생성자와 클래스명은 PascalCase를 따른다. (예. Student, MyClass)
  • 프라이빗 멤버들은 언더바_로 시작한다. (예. _id, _name)
  • 이벤트 핸들러 함수는 on으로 시작한다. (예. onClick, onMove)
  • 명명할 때 축약보다는 의미를 알기 쉽게 풀어쓴다.
//변수와 함수명
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;
  }
}

중괄호 블록 { }

  • 블록은 열기 전에 개행하지 않는다.
  • 중괄호 블록은 닫기 전에 개행한다.
if ()	//나쁜 작성
{
}

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

제어문

  • 제어문 키워드 뒤에 한 칸의 공백을 가지고 괄호를 사용한다.
  • 중괄호는 모든 제어문에서 한 줄의 명령을 갖더라도 반드시 써야하낟.
  • 단, 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)  //좋은 작성

변수

  • 변수 선언에서 var대신 let, const를 사용한다.
  • 한 번의 선언에서 하나의 변수만을 선언한다.
  • 문자열은 큰 따옴표"대신 작은 따옴표'를 사용한다.
var num1;  //var 선언은 지양할 것. 블록 스코프와 관련한 문제가 있습니다.
let num2;
const num3;

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

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

기타 구문

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


//나쁜 작성
function() {
  let result;
  
  result = 1+1;
  
  return result;
}

//좋은 작성
function() {
  return 1+1;
}

참조

0개의 댓글