[2019.02.21] Javascript 코딩 스타일 규칙

코드를 짜다보면 문제를 해결하는 것을 우선으로 하다보니, 코드를 뒤죽박죽으로 짤 때가 많다. 특히나 코드가 길어지고, 복잡해져서 다른 사람들이 봤을 때 보기 힘든 소스코드를 작성하게 되는 것 같다.

더불어 나는 규칙성이 항상 없어서 더욱 그런것 같다. 그런데 이번에 '코드스트테이츠' 부트캠프의 학습내용 중 'Javascript 코딩 가이드' 라는 것이 있는데, 내게 필요한 내용이 아주 많았다.

이미 내가 지키고 있는 것도 있었지만, 못하는 부분, 몰랐던 부분이 더 많았던 것 같다. 그래서 내가 이미 지키고 있는 스타일 외에, 내가 앞으로 지켜야 하는 코딩 스타일을 기준으로 밑에서부터 정리해보려고 한다.

 

Javascript 코딩 스타일

# 1 - 들여쓰기는 Tab이 아닌 '스페이스 2번'

'스페이스 2번 vs 탭' 논란이 GitHub에서 엄청 많았다고 한다. 그러나 갈수록 스페이스 2번으로 들여쓰기 하는 방식이 더 우위적으로 선호하게 되었다고 한다.

# 2 - Naming - 핵심 키워드, 변수의 존재와 목적

난 항상 변수명 지을 때, 타입이 'List'면 뒤에 'List', 'Array'면 'Array'를 붙였다. 그리고 잠깐 쓰는 변수면 무조건 'Temp'라고 지었던 것 같다.

항상 잠깐 쓰는 변수라도 그 변수는 존재하는 이유, 목적으로 쓸 수 있도록 해야한다. 

그리고 변수 타입마다 코딩 약속처럼 붙여쓰는 키워드가 있다. Boolean타입의 변수면, 앞에 'is' 또는 'are', 함수명을 지으면 맨 앞을 동사로 꼭 시작하도록 한다. ex) Boolean타입 변수명 : isValid, areAvailable, 함수명 : calculateArrayValues;

# 3 - 중괄호는 절대 생략하지 말 것 

난 간단한 if문이나 whlie문을 한줄로 끝낼 수 있으면 중괄호를 사용하지 않았다. true시 실행하는 부분도 아예 줄바꿈을 하지도 않았다. 이유는 최대한 짧고 간결하도록 보이게 하기 위해서이다

ex)  if(a > b) a = a + a;

그런데 중괄호는 생략하니, true성립 시 실행하는 부분에, 한줄이 아닌 추가적으로 작업할 코드가 있으면 추가를 하되, 중괄호를 생략한 것을 까먹고 그냥 그대로 실행시킨적이 몇 번 있었다.

ex) if(a > b) 

     a = a + a;

     a = a * a;

'a = a * a'까지 실행되야 하는게, 'a = a + a'까지만 만 작동하고 끝나는 것이다.그 작은 오류를 찾느라 시간을 무지하게 잡아먹는 일이 몇 번 있었던 것 같다.

# 4 - 문자열 사용 시, 작은 따옴표를 사용할 것

자바스크립트를 제외한 다른 언어에서는, 작은 따옴표는 하나의 문자, 큰 따옴표는 문자열로 달랐었는데, 자바스크립트에서는 똑같이 하나의 문자도 문자열로 사용된다. 통일성 있게 따옴표를 쓰되, 되도록 작은 따옴표를 쓰는것을 추천하는 것 같다.

# 5 - 비교구문 ==, ===

자바스크립트느 이퀄 기호 세개를 쓰는것이 가능하다. 자바스크립트에서는 타입이 잘 명시되지않고 동적으로 잘 변하는 언어이다. '=='는 느슨한 비교, '==='는 엄격한 비교구문이라서, '=='로 하면 원치않는 비교성립이 되어 에러가 날 수도 있다.

ex) if(1 == '1'){ } // -> true , if(1 === '1') // -> false

# 4 - 짧게 쓰기

당연한 말이지만... 되도록 굳이 쓰지 않아도 되는 변수를 만들어서 사용한다던가.. 하는 일은 피하는게 좋겠다. Boolean 결과값도 마찬가지이다.

ex) fucntion t(n) {

  return n * n;  // -> n * n을 담는 변수를 따로 만드는 일이 없게 하자.   

    }

# 5 - 변수명 이름 짓기

 Camel Casing 형태로 변수명을 짓도록 한다. 상수 변수는 대문자로 하고 '_'언더바를 이용한다.

ex) const MAX_ITEMS, var camelCases