스타일 가이드의 핵심은 기본 포맷 규칙이다.
규칙에 따라 코드를 어떻게 작성할지 큰 틀에서 정함.
개발자가 팀에서 정한 스타일대로 코드를 작성할 수 있게 안내하는 역할을 한다.
코드를 일관되게 작성하려면 이러한 모든 규칙이 중요.
1.1 들여쓰기
- 들여쓰기는 거의 모든 언어에서 첫 번째로 결정하는 부분.
- 탭을 이용한 들여쓰기
한단계 들여쓰기는 탭 한번, 두 단계 들여쓰기는 탭 두번, 이런 식으로 사용.
* 장점 1. 탭과 들여쓰기 단계가 일대일 대응되어 논리적. 2. 각 텍스트 에디터에서 탭 크기를 원하는 대로 설정할 수 있어 들여쓰기를 좁게 설정하는 개발자나 넓게 설정하는 개발자 모두 원하는대로 볼 수 있다.
* 단점 1. 시스템마다 탭 크기를 다르게 표현한다는 단점. - 에디터나 시스템에서 열었던 파일을 다른 데서 열었을 떄 자신이 보던 방식과 달라 난감할 수도 있다.
이는 개발자 마다 같은 코드를 다른 방식으로 본다는 것이고, 협업에서 좋지 않다. |
- 공백을 이용한 들여쓰기
2개/3/개/8개 공백 중 한 가지 방식을 이용해서 들여쓰기 하는 것이 일반적. 이 방법은 자바스크립트뿐 아니라 프로그래밍 언어에서 전반적으로 사용. 실무에서는 보통 2/8개의 절충안으로 4개 공백 들여쓰기 사용.
* 장점 1. 어떤 에디터 시스템에서도 똑같이 보인다는 점. - 텍스트 에디터에서 탭 키를 누르면 여러 개의 공백을 입력하도록 설정이 가능. - 즉, 모든 개발자가 소스 코드를 동일하게 볼수 있다.
* 단점 1. 개발자 중 한명이라도 에디터 설정을 잘못하면 서식에 문제가 생길 수 있다. |
개인마다 다른 방법을 추구할 수 있지만, 팀 내 의견을 하나로 모으는 것이 무엇보다 중요.
다음은 참고할 만한 다른 스타일 가이드의 들여쓰기 방법.
- jQuery 코어 스타일 가이드 : 탭 - 더글라스 크락포드의 자바스크립트 코드 컨벤션 : 공백 4개 - SproutCore 스타일 가이드 : 공백 2개 - Dojo 스타일 가이드 : 탭 |
- 추천 : 공백 4개
- 많은 텍스트 에디터에서 탭 키 대신 공백을 사용하도록 설정하면 기본값으로 공백 4개를 사용.
- 공백 2개로 들여쓰기를 하면 들여쓰기 했는지 구분이 어려울 수도 있다.
Note. 탭으로 하던 공백으로 하던 선호에 따라 다르지만 혼용하여 사용하면 안된다. |
1.2 문장 종료
- C++이나 자바처럼 C와 비슷한 언어는 보통 세미콜론(;)으로 문장을 종료.
- 흥미롭게도 가장 혼란스러운 것이 자바스크립트 문장은 세미콜론(;)이나 줄 바꿈으로 끝난다.
var name = "hashmap27"; function sayName() { alert(name); }
var name = "hashmap27 function sayName() alert(name) }
두가지 스타일의 자바스크립트 문장이 모두 유효한 문장이다. 단 아래 문장은 권장하지 않는다. |
- 세미콜론을 입력하지 않아도 자바스크립트에서는 ASI(Automatic Semicolon Insertion) 메커니즘 덕분에 정상적으로 동작.
- ASI는 대부분 문제없이 작동. 그러나 ASI가 세미콜론을 찾는 규칙은 기억하기 어려울 정도로 복잡하므로 명시적으로 세미콜론을 넣기를 권장.
- 일반적으로 ASI가 수행되는 시나리오는 정해져있다. 주로 세미콜론이 없어도 ASI에서 알아서 넣어주겠지 하는 안일한 생각에서 발생하며, 또는 경험이 부족한 개발자가 세미콜론을 빠뜨리는 실수로 인해 발생한다.
- 더글라스 크락포드 컨벤션, jQuery 컨벤션, 구글 자바스크립트 컨벤션, Dojo 컨벤션 모두 세미콜론 사용을 권장한다.
- JSLint와 JSHint 모두 기본적으로 세미콜론이 없으면 경고 메시지를 출력.
1.3 줄 길이
- 줄 길이는 들여쓰기와 깊은 관계가 존재.
- 코드가 가로 스크롤이 생길 만큼 길면 가독성이 떨어짐.
- 줄 길이 최대 80자는 다른 언어에서도 많이 사용하는 코딩 규칙.
- 일반적으로 추천하는 줄 길이
- 자바 : 소스 코드의 최대 줄 길이는 80자, 문서화 주석의 경우 70자 - 안드로이드 : 최대 100자 - 루비 : 최대 80자(비공식) - 파이썬 : 라인 당 79자 |
- 자바스크립트 스타일 가이드라인에서는 대부분 줄 길이를 정의하지 않지만, 크락포드 코드 컨벤션에서는 최대 80자로 정의.
1.4 줄 바꿈
- 줄이 최대 글자수에 도달하면 두 줄로 나누어야 하는데 보통은 연산자 다음에 줄을 바꾸고 두 단계 들여쓰기를 한다.
- ,(콤마)는 연산자이므로 이전 줄에 있어야 한다.
연산자 위치는 ASI 메커니즘과 연관이 있는데 연산자가 다음 줄로 넘어가면 ASI가 자동으로 세미콜론을 삽입할 수도 있어 굉장히 중요하다. 따라서 줄을 바꿀 떄 연산자를 마지막에 찍는 습관을 들이면 ASI 에러를 방지 할 수 있다. |
- 줄을 바꿀때 한 가지 예외 사항이 존재.
변수를 다른 변수에 대입할 때 두 번째 줄의 들여쓰기는 첫 번째 변수와 열을 맞춤. ex) var result = "aaaa" + "bbbb" + "cccc" + "dddd" + "eeee"; 이와 같이 맞춘다. |
1.5 빈 줄 넣기
- 빈 줄은 코드 스타일에서 자주 간과 되는 부분.
- 코드는 하나의 커다란 덩어리보다는 여러개의 문단으로 구성.
- 적절한 빈 줄은 코드의 가독성을 높힌다.
- 보통 다음의 경우 빈줄을 추가하는 것이 좋다.
- 메서드 사이 - 메서드 내 지역 변수와 첫 번째 문장 사이 - 한 줄 또는 여러 줄 주석 전 - 가독성을 높이기 위해 메서드 내에서 논리적으로 구분되는 곳. |
1.6 이름 규칙
"컴퓨터 과학에서 가장 어려운 두 가지 문제는 캐시 무효화와 네이밍이다"
- 필 칼튼
- 우리가 짜는 코드 대부분은 변수와 함수를 사용.
- 변수명과 함수명에 대한 이름 규칙은 이해하기 쉬운 코드를 작성하는 데 꼭 필요하고 중요함.
- 자바스크립트의 기반이 되는 ECMAScript는 낙타 표기법(Camel casing)으로 작성.
- 낙타 표기법은 소문자로 시작하고 새로운 단어를 사용할 때 마다 첫 문자는 대문자로 입력하는 방식.
- 일반적으로 자신이 사용하는 언어의 표준 라이브러리에서 따르는 이름 규칙을 사용.
- 대부분의 자바스크립트 개발자들은 변수명과 함수명을 지을 때 낙타 표기법을 사용.
- 구글 자바스크립트 스타일 가이드와 SproutCode 스타일 가이드, Dojo 스타일 가이드 모두 낙타 표기법을 사용하고 명시.
Note. 2000년도쯤까지 자바스크립트에서 헝가리안 표기법이 많이 사용 됨. 이 표기법은 변수명 앞에 변수의 타입을 붙이는 방식으로 sName은 문자열을 의미, iCount는 정수형 변수를 의미. 이제는 많이 쓰지 않고, 주요 스타일 가이드에서도 추천하지 않는 표기법. |
1.6.1 변수와 함수
- 변수명은 낙타 표기법으로 사용, 명사로 시작.
- 변수명은 명사로, 함수명은 동사로 시작하면 서로 구분하기 용이.
- 의미를 빠르고 정확하게 전달하기 위해 가능한 한 짧게 정하는게 좋음.
- 변수명은 변수 이름만으로 데이터 타입을 알 수 있도록 만든다.
ex) count, length, size와 같은 이름은 데이터 타입이 숫자인 것을 알 수 있고 name, title, message 같은 이름은 문자열임을 알 수 있다. i, j, k같이 한글자로 된 변수는 보통 반복문에서만 사용. |
- 의미없는 변수명은 사용하지 않아야 함.
- foo, bar, temp같은 변수명은 다른 개발자가 봤을 떄 전체 코드를 보지 않으면 변수가 어떻게 사용되는지 알 수 없다.
- 함수명과 메서드명의 첫 번째 단어는 동사로 시작해야 한다.
- 보통 많이 사용하는 동사는 다음과 같다.
동사 |
의미 |
can |
불리언 값을 반환하는 함수 |
has |
불리언 값을 반환하는 함수 |
is |
불리언 값을 반환하는 함수 |
get |
불리언 이외의 값을 반환하는 함수 |
set |
값을 저장하기 위해 사용하는 함수 |
- 이러한 규칙을 따라는 것이 읽기 좋은 코드를 작성하는 시작점.
Note. jQuery의 함수명은 위에서 설명한 규칙을 따르지 않는다. jQuery의 많은 메서드가 getter와 setter의 역할을 동시에 하기 떄문. |
1.6.2 상수
- ECMAScript6 이전까지 자바스크립트에는 상수 개념이 없었다.
- 있다고 해도 개발자들은 변수를 선언해 상수 처럼 사용해왔다.
- C에서 사용하는 규칙을 가져와 상수는 모든 문자를 대문자로 쓰고, 단어가 바뀔 떄는 밑줄을 사용.
1.6.3 생성자
- 자바스크립트에서 생성자는 new 연산자로 새로운 객체를 생성하는 사용.
- 생성자는 단순한 함수.
- 자바스크립트에는 Object나 RegExp와 같은 내장된 생성자가 많이 존재.
- 또 개발자가 새로운 타입을 만들려고 새로운 생성자를 추가할 수 도 있음.
- 자바스크립트에서 생성자는 파스칼 표기법(Pascal Case)을 사용.
파스칼 표기법은 낙타 표기법과 유사. 낙타 표기법과 다르게 첫 글자는 대문자로 시작한다. |
- 크락포드의 코드 컨벤션, 구글 자바스크립트 스타일 가이드, Dojo 스타일 가이드 모두 파스칼 표기법을 추천.
- JSLint는 생성자가 대문자로 시작하지 않거나 생성자 함수가 new 연산자로 시작하지 않으면 경고 메시지 출력.
- JSHint에서는 newcap 옵션을 추가했을 때, 생성자가 대문자로 시작하지 않으면 경고 메시지 출력.
1.7 리터럴 값
- 자바스크립트에는 다양한 타입의 기본 리터럴 값이 존재.
- string, number, boolean, numm, undefinde, 객체 리터럴과 배열 리터럴도 존재.
1..7.1 문자열
- 특별히 자바스크립트 문자열은 큰따옴표와 작은따옴표 모두 사용 가능.
- 자바나 PHP같은 언어와 달리 자바스크립트의 문자열에는 큰따옴표나 작은따옴표에 기능적 차이가 전혀 없다.
- 동작도 완벽하게 동일.
- 차이가 있다면 문자열 구분자로 역슬레시(\)를 사용하는 점.
- 큰 따옴표, 작은 따옴표 어느 것을 선택해도 무방하지만 하나만 선택하여 코드 전체에 통일성을 부여해야 한다.
- 크락포드, jQuery는 모든 문자열에는 큰따옴표 사용을 권장.
- 구글에서는 문자열에 작은따옴표를 권장.
- 여러 줄에 걸쳐있는 문자열에 대해 문자열을 여러개로 나눠 합치는 방법을 권장
ex) vae longString = "Here's the story, of a man " + "named Brady."; |
1.7.2 숫자
- 자바스크립트에서 숫자는 정수, 실수에 상관없이 모든 타입이 숫자 타입에 저장.
- 다양한 숫자 형식을 표현하기 위해 다양한 숫자 선언 방법을 제공.
//정수 var count = 10;
//십진수 var price = 10.0; var price = 10.00;
//8진수 - 권장하지 않음. var num = 010;
//16진수 var num = 0xA2;
//지수 표기 var num = 1e23; |
- 8진수 포캣 사용은 에러를 유발하고 혼동하기에도 쉽다.
1.7.3 null
- 보통 null에 대해 잘못 알고 있거나 undefinded와 많이 혼동한다.
- null은 다음과 같이 한정된 곳에서만 사용해야 한다.
- 나중에 값을 할당할 변수를 초기화할 때 - 선언한 변수에 값이 할당되었는지 비교할 때 - 인자 값으로 객체(Object)를 넘기는 함수를 호출했을 때 - 함수를 호출한 곳에서 반환값으로 객체(Object)를 기대할 때 |
- 다음은 null을 사용하면 안되는 경우
- 함수의 인자 값을 확인하기 위해 null 비교. - 초기화되지 않은 변수를 null 비교 |
- null은 obejct를 대신한다고 생각하는 것이 가장 좋다.
1.7.4 undefinded
- 대부분undefinded와 null을 자주 혼동.
- 이 둘을 잘 구분하지 못하는 이유는 null == undefinded가 true이기 때문.
- 그러나 undefinded와 null의 사용법은 많이 다름.
- 초기화되지 않은 변수는 초기 값으로 undefinded를 갖는다. 즉, 변수가 실제 값으로 초기화 되기를 기다린다는 의미.
- 변수가 선언되지 않았을 경우 typeof 연산자가 undefinde를 반환한다고 생각하면 된다.
- 변수를 선언하고 값은 나중에 대입하려면 null로 변수를 초기화해야 한다.
- 변수를 null로 초기화하면 나중에 값을 저장할 것이라는 의도를 명확히 할 수 있다.
- typeof 연산자는 null에 대해 "object" 문자열을 반환하여 undefinde와 구분할 수 있다.
1.7.5 객체 리터럴
- 객체 리터럴은 Obejct의 인스턴스를 생성해 프로퍼티를 추가하는 방법이 비해, 간단히 추가할 프로퍼티를 정의하고 바로 객체를 생성할 수 있어 많이 사용됨.
- 객체 리터럴은 두 개의 중괄호 안에 모든 프로퍼티를 정의할 수 있다.
- 리터럴을 사용하지 않는 방법에 비해 같은 작업을 더 효율적이고 간단하게 수행.
- 객체 리터럴 생성 예시
//권장 방법 var bool = { title: "Maintainable JavaScript", author: "Nicholas C. Zakas" };
//권장하지 않는 방법 var book = new Object(); book.title = "Maintainable JavaScript"; book.author = "Nicolas C. Zakas"; |
- 구글 자바스크립트 스타일 가이드에서는 객레 리터럴 포맷을 권장한다.
- 크락포드 코드 컨벤션에서도 Object 생성자 이용방법 보다 객체 리터럴을 이용하는 방법을 권장한다.
1.7.6 배열 리터럴
- 배열 리터럴은 객체 리터럴처럼 자바스크립트에서 배열을 간단하게 선언하는 방법이다.
- Array 생성자 보다 2개의 대괄호를 사용하여 배열의 초기값 설정한다.
//권장 방법 var colors = " ["red", "green", "blue"]; var number = [1, 2, 3, 4];
//권장하지 않는 방법 var colors = new Array("red", "green", "blue"); var number = new Array(1, 2, 3, 4); |
- 구글 자바스크립트 스타일 가이드와 크락포드 컨벤션에서 권장하는 패턴이다.