[JavaScript] 자바스크립트 코딩 스타일 규칙 정리

Maintainable Javascript by Nicholas C.Zakas 

를 보며 기본기를 공부 중이다.

좋은 내용들을 요약해 보겠다.

아마존에서 책을 구입했다. 좋은 개발자와 좋은 코딩을 위한 주옥같은 책인 것 같다. 

Basic Formatting

Indentation Level

들여쓰기 정도이다.

들여쓰는 스타일은 2가지로 나뉜다. Tab과 Space가 그것들이다. 

Tab을 이용했을 때의 장점

- 에디터에 따라 탭 크기를 조절할 수 있다

Tab을 이용했을 때의 단점

- 시스템이 다르게 해석할 수가 있다.

Space를 이용했을 때의 장점

- 모든 에디터와 시스템이 동일하게 취급한다.

- 에디터 설정으로 tab을 누르면 일정 숫자의 space를 누르게 할 수 있다.

이 책의 저자는 4칸의 space를 선호한다고 한다. 2칸은 너무 다닥다닥 붙어있어서 힘들다고 한다. 

Statement Termination

세미콜론에 대한 내용이다. 찍지 않으면 ASI (Automatic Semicolon Insertion)에 의해서 자동으로 입력되게 설계되어 있다. 그래서 스크립트에 세미콜론이 실수로 몇 군데 빠져있어도 동작에는 문제가 없었던 것이다. 하지만 꼭 세미콜론을 찍으라고 한다. 

function getData() {

return 

{

title : "title",

author : "author"

}

}

이렇게 짜여진 곳에서 입력을 하지 않으면 ASI가 return 바로 뒤에 찍어서 return; 이 되어버린다. 그러면 undefined가 리턴된다. 

Line Length

줄 길이는 대게 80 character를 넘지 말라고 한다.

Line Breaking

길어지게되면 필히 줄 바꿈을 해야 한다. 한 단계 들어쓰기와 함께 줄을 나누는데 인자가 여러개인 괄호안에서는 쉼표까지 끝난 후 줄바꿈을 한다.

Blank Lines

코드는 문장처럼 생겨야지 텍스트의 덩어리처럼 생기면 안된다. 가독성이 좋아야하고 적절히 줄 바꿈을 해줘야 한다.

- 함수 사이

- 지역 변수들과 첫 함수작성 사이

- 주석 쓰기 전

- 함수안에서 적절히 가독성을 고려한 자리

Naming

Camel-case 를 따른다.

Variables and Functions

변수와 함수 명명 규칙인데 각각 명사, 동사의 형태로 명명한다.

boolean을 리턴하는 함수 : can, has, is 가 prefix에 붙는다.

nonboolean을 리턴하는 함수 : get 이 prefix에 붙는다.

Strings

문자열은 작은 따옴표나 큰 따옴표나 차이가 없다. 대신에 저자는 자바랑도 혼용해서 개발하기 때문에 큰 따옴표를 선호한다고 한다. 

Null

null은 undefined와 헷갈리는 개념인데 주로 나중에 초기화할 변수에 할당한다.

var person = null;

The best way to think about null is as a placeholder for an object.

Undefined

null == undefined 는 true이다. 그래서 더 헷갈린다고 한다. 하지만 저자는 코드에 undefined를 쓰는 것을 피하라고 한다. type of 연산자를 쓸 때 헷갈린다고 한다.

var person;

console.log(type of person); // undefined

console.log(type of foo); // undefined

둘 다 undefined가 뜨는데 (foo는 정의가 안되어있으므로) foo를 사용하면 error가 나고 person은 그렇지 않기 때문이다.

Object Literals

- Bad- 

var book = new Object();

book.title = "TITLE";

book.author = "AUTHOR";

- Good -

var book = {

title : "TITLE",

author = "AUTHOR"

};

just with more compact syntax !!

Array Literals

- Bad- 

var colors = new Array("red","green","blue");

이 방법을 generally frowned upon 이라고 표현할 정도이다. 눈살을 찌푸릴 정도라는 것이다.

- Good -

var colors = ["red", "green", "blue"];

이렇게 대괄호로 하는 것이 quite common 하다고 한다.

이상 기본기들의 관한 내용중 중요한 것들을 추려보았다.