자바스크립트와 첫 만남 7 - 자바 스크립트 스타일 가이드

새벽 공부의 마지막이 될 것 같다. 자바스크립트는 문법에 맞게 코딩하는 것도 중요하지만 좀 더 읽기 쉽고 오류를 줄일 수 있도록 코드를 작성하는 것도 중요하다. 코드를 작성하고 효율적으로 유지하려면 몇 가지 코딩 규칙을 지켜야 한다.

---

 

 

 

 

자바스크립트 스타일 가이드

 

1. 코딩 규칙이 왜 필요할까?

자바스크립트 코딩 규칙은 스타일 가이드나 코딩 컨벤션, 코딩 스타일, 표준 스타일이라고 한다. 여기서는 '스타일 가이드'라고 부르겠다.

자바스크립트는 웹 문서에 동적인 효과를 주기 위해 출발한 언어이므로 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 곳곳에 사용자가 주의를 기울이지 않으면 오류가 발생할 수 있다.

 

스타일 가이드를 따라서 작성하면 소스 코드의 오류도 줄이고 일관성이 생겨 읽기가 쉬워진다. 이에 따라 작성된 웹 사이트나 애플리케이션은 유지 보수할 때도 수월하고 비용도 훨씬 줄어든다.

---

 

 

 

2. 자바스크립트 스타일 가이드

스타일 가이드는 회사 프로젝트를 말은 팀에서 따로 만들어서 사용할 수도 있다. 하지만 보통은 구글이나 에어비앤피에서 배포한 것을 기준으로 작성한다. 이 책은 자바스크립트의 아주 기초적인 문법을 다루므로 스타일 가이드의 일부만 사용했다. 하지만 앞으로 자바스크립트를 더 깊게 공부하고 싶다면 구글과 에어비앤피의 자바스크립트 스타일 가이드를 참고하여 작성하는 것이 좋다.

 

구글 스타일 가이드

Google JavaScript Style Guide

 

 

 

 

 

에이어앤비 스타일 가이드

GitHub - airbnb/javascript: JavaScript Style Guide

 

---

 

 

 

 

자바스크립트 소스를 작성할 때 지켜야 할 규칙

 

1. 소스를 보기 좋게 들여쓰기한다.

들여 쓰기를 해서 작성하면 소스 간의 포함 관계를 알아보기 쉽다. 사용자가 들여쓰기를 직접 입력할 대는 Tab을 사용하거나 Space bar를 눌러너 공백을 만들어 쓸 수 있다. Tab은 시스템 환경마다 다르게 보일수 있으므로 공백이 2칸이나 4칸인 들여쓰기를 권장한다.

공백 4개는 화면을 많이 차지하므로 최근에는 공백 2칸 들여쓰기를 많이 사용한다.

 

 

 

2. 세미콜론으로 문장을 구분한다.

자바스크립트에서 세미콜론은 문장의 끝을 나타내며 문장과 문장을 구분하는 역할도 한다. 사실 세미콜론을 붙이지 않아도 실행된다. 하지만 스타일 가이드에서는 문장을 끝낼 때 반드시 세미콜론을 붙이도록 권장한다. 이렇게 문장을 명확하게 표시해 주면 소스를 디버깅하기 쉽기 때문이다.

 

세미콜론 규칙

// 권장하지 않음
var n = 10

// 권장함
var n = 10;

// 권장하지 않음
var n = 10; var sum = 0;

---

 

 

 

3. 공백을 넣어 읽기 쉽게 작성한다

예약어나 연산자, 값 사이에는 공백을 넣어서 소스 코드를 읽기 쉽게 작성한다. 공백이 없어도 자바스크립트는 잘 실행되지만, 개발자가 소스 코드를 읽거나 디버깅을 할 때는 공백이 있어야 가독성이 좋다.

 

공백 규칙

// 권장하지 않음
var num=2;
var sum=num+10;

// 권장함
var num = 2;
var sum = num + 10;

---

 

 

 

4. 소스 코드를 잘 설명하는 주석을 작성한다.

프로그래밍의 주석은 소스 코드를 살펴보기 위해 꼭 필요한 요소이다. 자바스크립트 주석은 다음과 같이 2가지 형태로 사용할 수 있다.

 

1) 한 줄 주석

// 바로 뒤에 작성한 내용만 주석으로 인식한다. 만약 주석 내용이 한 줄이 넘으면 오류가 생기므로 주의해야 한다.

 

한 줄 주석 사용 방법

var today = new Date();		// 현재 날짜 가져오기
var h = today.getHours();	// 시간 추출하기

 

 

2) 여러 줄 주석

주석 내용이 여러 줄이면 /* */ 기호를 사용한다. 이때 이 사이에는 또 다른 주석을 넣을 수 없다.

 

 

여러 줄 주석 사용 방법

/* 현재 날짜를 가져와
   시와 분, 초로 추출하고
   화면에 표시하는 스크립트
*/
function startTime() { .... }

---

 

 

 

5. 식별자는 정해진 규칙을 지켜 작성해야 한다.

식별자는 개발자가 자바스크립트의 변수 함수, 속성 등을 구별하려고 이름 붙인 특정 단어를 의미한다. 여기서는 name이 식별자이다.

var name = prompt("이름을 입력하세요.");

 

하이픈이나 언너바 없이 두 단어를 붙여 사용할 경우 첫 번째 단어는 소문자로 시작하고, 두 번째 단어는 대문자로 시작하는 것이 일반적이다.

---

 

 

 

6. 예약어는 식별자로 사용할 수 없다.

예약어는 키워드라고도 하는데 식별자로 사용할 수 없도록 자바스크립트에 미리 정해놓은 단어를 가리킨다. 예를 들어 var는 변수를 선언할 때 쓰는 예약어이며 식별자로는 사용할 수 없다.

 

 

---

 

 

 

학습을 마치고

자바스크립트의 작성 규칙에 대해서 살펴보았다. 이 내용은 모든 언어마다 사용하는 거라서 비슷하지만 특별히 자바스크립트에서 다른 점이 있다면 코드를 보기 좋게 들여쓰기 하는 것과 공백을 넣어 읽기 쉽게 작성하는 것 정도였다.

다른 언어에서 보면(특히 자바를 가르치던 인사교 선생님 등) 공백을 넣지 않고 작성할 때가 정말 많았다. 처음에는 나도 이러한 부분을 지키다가 나중에는 공백을 없이 쓰기도 했었는데 이 부분을 자바스크립트에서는 철저히 지킨다는 것을 알게 되었다.

 

앞으로는 다른 언어를 사용할 때도 이 부분을 잘 지켜보기로 했다. 들여 쓰기는 잘하는 편이니 공백만 잘 지키면 될 것 같다. 이로써 길고 길었던 1단원 학습을 마친다. 이제 아침 일정을 마치고 나서 엘리스로 어제 공부하다 말았던 내용부터 학습을 이어갈 생각이다.