Chapter1. JavaScript 기본 포맷

스타일 가이드의 핵심은 기본 포맷 규칙이다.

규칙에 따라 코드를 어떻게 작성할지 큰 틀에서 정함.

개발자가 팀에서 정한 스타일대로 코드를 작성할 수 있게 안내하는 역할을 한다.

코드를 일관되게 작성하려면 이러한 모든 규칙이 중요.

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);

  - 구글 자바스크립트 스타일 가이드와 크락포드 컨벤션에서 권장하는 패턴이다.