[javascript] 37. Style Guide - 자바스크립트 강좌 JS / CSE

JavaScript Style Guide and Coding Con-ventions

 

1. JavaScript Coding Conventions

  코딩 관습(Coding convention)은 프로그래밍을 위한 스타일 준수(Style Guideline) 입니다.

   - 변수나 함수의 명명 규칙, 선언 규칙

   - 여백, 들여쓰기, 주석의 사용 규칙

   - 프로그래밍 원리

  코딩 관습은 품질을 보증합니다:

   - 코드의 가독성 향상

   - 코드 유지보수가 쉽다

2. Variable Names

 W3Schools에서는 카멜표기법(camelCase)를 사용하여 식별자 이름을 짓습니다.

 모든 이름은 문자로 시작합니다.

 

firstName = "John";
lastName = "Doe";
 
price = 19.90;
tax = 0.20;
 
fullPrice = price + (price * tax);

 

3. Spaces Around Operators

 항상 연산자 주위와 콤마 뒤에 여백을 줍니다.

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

 

4. Code Indentation

 항상 코드 블럭 내에서는 들여쓰기를 합니다.

 

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

5. Statement Rules

 간단한 구문의 일반적 규칙:

  - 항상 간단한 구문의 마지막에 세미콜론을 붙입니다.

 

var values = ["Volvo", "Saab", "Fiat"];
 
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

 복잡한(복합의) 구문의 일반적 규칙:

  - 첫 라인의 끝에 괄호를 열어줍니다.

  - 여는 괄호 전에 공백을 사용합니다.

  - 새로운 라인에 닫는 괄호를 넣어줍니다.

  - 복합문의 끝에 세미콜론을 붙이지 않습니다.

   함수:

 

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

   반복문:

 

for (i = 0; i < 5; i++) {
    x += i;
}

   조건문:

 

 
if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

6. Object Rules

 객체 선언에 따른 일반적 규칙:

  - 객체 이름의 동일한 라인에 여는 괄호를 추가합니다.

  - 속성과 속성 값 사이에 콜론과 여백을 입력합니다.

  - 마지막 속성- 값 쌍에서는 콤마를 붙이지 않습니다.

  - 마지막에 새로운 라인을 추가하여 닫는 괄호를 추가합니다.

 

 

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

7. Line Length < 80

 가독성을 위해 한 라인의 80개의 문자를 넘어서는 것을 피합니다.

 자바스크립트 구문이 한 라인에 들어 맞지 않는다면, 연산자나 콤마 뒤에 개행을 하는 것이 최선의 방법입니다.

 

document.getElementById("demo").innerHTML =
    "Hello Dolly.";

8. Naming Conventions

 항상 모든 코드에 같은 명명 관습(Naming convention)을 가져야 합니다:

  - 변수와 함수이름은 카멜표기법(camelCase)으로 작성합니다.

  - 전역변수는 대문자로 작성합니다.

  - 상수는 대문자로 작성합니다.

9. Loading JavaScript in HTML

 외부 스크립트 파일을 로딩하기 위한 간단한 문법입니다:

 

<script src="myscript.js">

10. Accessing HTML Elements 

 "untidy"한 HTML 스타일을 사용하는 결과로 자바스크립트는 에러를 도출할 수도 있습니다.

 아래 두 자바스크립트 구문은 다른 결과를 가져올 것입니다:

var obj = getElementById("Demo")
 
var obj = getElementById("demo")

 

 

11. File Extensions

 HTML 파일은 .html 확장자를 갖습니다.

 CSS 파일은 .css 확장자를 갖습니다.

 JavaScript 파일은 .js 확장자를 갖습니다.

12. Use Lower Case File Names

 대부분의 웹 서버(Apache, Unix)는 파일 이름에 case sensitive 합니다.

 

 london.jpg는 London.jpg로 접근할 수 없습니다.

 다른 웹 서버들(Microsoft,IIS)는 case sensitive하지 않습니다.

 london.jpg는 London.jpg로 접근할 수 있습니다.