Code convention

goodjam92·2022년 7월 30일

Essential Knowledge

목록 보기

5/7

Javascript Code Convention

가독성이 좋은 코드를 작성하기 위한 규칙
누구나 쉽게 이해할 수 있는 코드로 작성해야 한다.
다른 개발자들과 함께 개발 및 유지보수가 가능하기 위함이다.
암묵적으로 만들어진 Convention에 맞춰서 코드를 짜는 것이 좋다.
개인 및 회사, 프로젝트 등의 상황에 따라 규칙들은 조금씩 달라질 수 있다.

일반적인 규칙

Camel Casting & Snake Casing

자바스크립트에선 일반적으로 띄어쓰기 대신 대문자로 표현하는 Camel Style로 변수명을 작성.
단, 상수 변수명을 지을 땐 Snake Case 활용
또한 이미 값이 정해진 상수의 변수명을 지을 땐 대문자로 작성

const camelCase;
const MAX_VALUE = 100;

Space 2

논리적으로 종속된 코드는 tab을 사용하지 않으며, space 2칸으로 작성

Naming

Variable names : 변수가 존재하는 목적을 토대로 한 단어로 표현
Boolean names : true of false를 나타내기에 이름 앞에 is 또는 are을 사용
Function names : 일반적으로 시작을 countNumber 같이 동사로 시작한다. 해당 함수가 어떤 역할과 수행을 하고 입력 값과 출력 값이 무엇인지 이름만 봐도 추측할 수 있도록 정함.
Capital letters in variable names : 생성자 함수 또는 변수가 포함된 class명에 첫글자를 대문자로 표현한다.
줄임말은 지양, foo, div 등 의미 없는 단어는 사용 금지
반복되는 Operator는 변수로 설정하면 가독성이 향상 됨.

function User () {
}

function isNumber (number) {
	alert(NaN(number));
}

Symbols / punctuation

문법적으로 생략이 가능한 경우에도 중괄호를 생략하면 안된다. ( if, for 등)
Quoting : 큰 따옴표보다 작은 따옴표를 사용. HTML은 태그 속성 주위에 큰 따옴표를 붙이기 때문.
Semicolons : 이하 예외를 제외하고 코드 문장의 끝에는 항상 세미콜론을 사용.
( if, for, while 구문의 끝에는 세미콜론을 사용하지 않는다)
(함수 표현식의 경우 세미콜론을 사용하지만, 함수 선언식의 경우 사용하지 않는다.)

 // 함수 표현식
 let greet = function () {
   alert('hi');
 };
 
 // 함수 선언문
 function () {
   alert('hi');
 }

Operators and keywords : === 혹은 !== 와 같은 strict mode연산자를 사용한다. == 혹은 !=의 경우는 변수의 타입까지 구분하지 못하여 잘못된 연산을 수행할 수 있음
3항 연산자 : 3항 연산자는 짧고 간결하게 표현할 수 있지만, 잘못 사용하게 되면 오히려 가독성을 떨어트림.
아주 짧고 명확한 코드를 쓸 때만 사용한다.
not 연산자!를 사용할 땐 띄어쓰기를 하지 말도록 한다.
switch 구문은 break 구문 누락으로 오류가 발생할 확률이 높으니 지양하도록 한다.

간결한 코드

코드는 최대한 간결하되 설명 없이도 과정 및 결과를 이해할 수 있는 자명한 코드여야 한다.

// Bad 🙅🏼‍♂️

function square(n) {
  let squaredN = n * n;
  return squaredN;
}

// Good 🙆‍♂️

function square(n) {
  return n * n;
}

가독성을 떨어트리는 부정 사용을 최대한 지양한다.
Boolean의 경우 결과값을 바로 return 하세요.

// Bad 🙅🏼‍♂️

if(charSet.size < text.length) {
  return false;
}
return true;

// Good 🙆‍♂️

return charSet.size > text.length;

코드 문장과 구문 사이 공간

특별한 규칙은 없지만 줄 바꿈은 간소화(일반적으로 1줄)하여 한눈에 많은 양을 볼 수 있는 코드를 만든다.
보기 어렵지 않다면 string padding 및 추가적인 들여쓰기는 활용해도 좋다. 다만, 처음과 끝에 들여쓰기를 동일하게 해준다.
모든 파일 마지막 줄에는 빈줄 하나를 추가하도록 한다.

// Good 🙆‍♂️

alert('Greeting Welcome My World!!');
alert( 'Greeting Welcome My World!!' );

// Bad 🙅🏼‍♂️

alert(  'Greeting Welcome My World!!' );

변수의 이름과 값을 같은 항목끼리 묶어서 보기 위해서 들여쓰기를 사용하는 것은 추천하지 않습니다.

// Bad 🙅🏼‍♂️

let firstItem		= getFirst();
let secondItem		= getSecond();
let thirteenthItem	= getThirteenth();

콤마 , 사이에 띄어쓰기를 해야한다.

//Bad 🙅🏼‍♂️

assertEqual(Math.pow(3,2),9,'Math.pow squares properly');

//Good 🙆‍♂️
assertEqual(Math.pow(3, 2), 9, 'Math.pow squares properly');

연산자 사이에 띄어쓰기를 해야한다.

//Bad 🙅🏼‍♂️

'Failed ['+testNumber+']'•••

//Good 🙆‍♂️

'Failed [' + testNumber + ']'•••

//Bad 🙅🏼‍♂️

if(actual===expected) {
  // action
}else{
  // alternate action
}

//Good 🙆‍♂️

if(actual === expected) {
  // action
} else {
  // alternate action
}