[JS] 스타일 가이드

개요

스타일 가이드는 오류, 버그를 좀 더 원활하게 찾고, 가독성을 높이기 위해 알아두면 좋다.

코드 들여쓰기

함수 등을 사용할 때에는 들여쓰기를 하는 것이 가독성에 좋다. 이 때, 사용자가 직접 들여쓰기 할 때에는 되도록 공백 2칸을 하도록 권장된다.

문장 구분: 세미콜론(;)

문장 끝에 세미콜론을 붙이지 않더라도 실행은 되지만, 오류, 버그 파악을 쉽게 하기 위해 보통 문장 끝에 세미콜론(;)을 붙인다. 이 때, 한 줄에 한 문장만 작성하는 것이 가독성에 좋다.

공백

키워드, 연산자, 값 사이에 공백 한 칸을 넣는 것이 좋다.

area=3.14*radius**2; /* bad */ 
area = 3.14 * radius ** 2; /* good */

주석(commment)

자바스크립트 소스 코드를 나중에 확인할 때 그 코드를 설명해주는 설명문이 필요하다. 이 때 주석을 활용한다. 자바스크립트에서 주석 문법은 두 가지이다.

한 줄 주석으로 작성하고자 할 때에는 슬래시 2개 (//) 를 쓴 뒤 그 뒤에 주석을 작성하면 된다. 이 기호를 사용할 때 주석이 한 줄을 넘기면 그 줄 부터는 주석으로 인식이 되지 않는다.

만약 여러 줄에 걸쳐서 주석을 달고자 한다면 물론 슬래시 2개 (//) 기호를 일일이 여러 줄 주석의 모든 줄 앞에 작성해도 되지만, 이 경우 조금 번거롭다. 이 때 대신 사용할 수 있는 기호로 /*와 */이다. 이 기호 사이에 작성한 글은 주석 처리되며, 여러 줄에 걸쳐서 사용할 수 있다.

var n = 10;  // 숫자 10 선언
/*
	여러 줄에 걸쳐서 
  주석 작성 가능.
*/

식별자 (Identifier)

식별자란, 변수, 함수, 속성 등에 대해 다른 변수, 함수, 속성과 구별하기 위해 고유하게 붙인 이름을 의미한다. 즉, 변수명, 함수명, 속성명이다.

자바스크립트에서는 식별자 이름 명명 규칙이 있으며, 다음과 같다.

• 첫 글자는 영문자, 언더바(_), 달러 기호($) 중 하나로 시작되어야 한다.
• 첫 글자 이상부터는 영문자, 언더바(_), 달러 기호와 더불어 숫자도 사용 가능하다. 즉, 첫 글자는 숫자로 시작되면 안된다.
• 둘 이상의 단어들을 조합해서 이름을 정할 경우, 단어 사이를 하이픈(-), 언더바(_)로 구분하거나, 두 번째 단어부터 첫 글자를 대문자로 시작하게 한다(단어 사이에 공백 없이). 참고로 식별자 안에 공백을 넣을 수는 없다. 예) todayTime, today_time, today-time, today_Time. 참고로 todayTime, today_Time처럼 두 번째 이상의 단어 첫 글자를 대문자로 쓰는 규칙을 “낙타 표기법(camel case)”이라 한다.
• 이미 자바스크립트 자체에서 정해둔 키워드를 그대로 식별자로 사용할 수는 없다.
• 자바스크립트에서는 영어 소문자와 대문자를 구분한다. hi와 Hi는 서로 다른 식별자이다.

이 외에도, 식별자 이름을 정할 때는 그 식별자가 어떤 기능을 하는지를 잘 설명해주는 이름으로 지어주는 게 좋다.

---

References

[1] 고경희 - Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석

[2] 구글 자바스크립트 스타일 가이드

Google JavaScript Style Guide

This content is licensed under CC BY-NC 4.0