j42. 자바스크립트 코딩 규칙

자바스크립트 코딩 규칙

자바스크립트 프로젝트에 동일한 코딩 규칙 (coding conventions) 을 일괄 적용하는 것이 좋습니다.

코딩 규칙은 프로그래밍을 위한 스타일 가이드라인 (style guidelines) 입니다.

일반적으로 다음과 같은 내용을 포함합니다.

	변수나 함수에 대해 이름 부여 (Naming) 와 선언 (declaration) 에 대한 규칙
	화이트스페이스 (white space), 들여쓰기 (indentation), 그리고 주석처리 (comments) 의 사용에 대한 규칙
	프로그래밍 관행 (practices) 과 원칙 (principles) 

코팅 규칙은 팀내에서 따라야 할 규칙으로 문서화 될 수도 있습니다.

---

변수의 이름 (variable Names) 은 변수와 함수의 식별 이름으로, 낙타 대문자 (camelCase) 를 권고합니다.

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

myName
yourName
myHighScore

---

연산자 ( + - / * = ) 앞 뒤와 콤마 ( , ) 다음에는 공백을 넣는 것이 좋습니다.

myHighScore = score + bonus;

---

코드 블록의 들여쓰기는 스페이스 4개 정도를 사용하는 것이 좋습니다.

별차이는 없으나 탭을 사용하게 되면 편집기마다 조금 다르게 표현될 수 있기 때문에 스페이스를 권고합니다.

---

라인이 길어지지 않도록 80 문자 내로 사용합니다.

한 줄에 표현이 어려우면, 연산자 또는 콤마 뒤에서 자르는 것이 좋습니다.

document.getElementById("breakResult").innerHTML =
    "2018 평창 동계올림픽";

---

HTML 내에 외부의 스크립트를 연결할 때 타입 속성을 줄 필요가 없이, 단순한 구문을 사용할 것을 권고합니다.

<script src="myExternalScript.js">

---

전역 변수의 사용은 최소화 하고 가급적 지역 변수를 사용하는 것이 좋습니다.

전역 변수나 함수는 다른 스크립트에 의해 덮어 써질 수가 있습니다.

---

하나의 함수 내에서만 사용되는 변수들은 지역 변수로서 선언해야 합니다.

지역 변수는 var 키워드와 함께 선언 되어야 합니다. 그렇게 하지 않으면 전역 변수가 될 것입니다.

또 스트릭트 모드 (strict mode) 에서는 선언되지 않은 변수는 사용할 수 없습니다.

---

모든 선언은 각 스크립트나 함수의 맨 위에 입력하는 것이 좋습니다.

위에 입력하면 코드가 깔끔해지고, 지역 변수를 한눈에 살펴볼수 있고 또 실수로 전역 변수가 되는 것을 피할 수 있기 때문입니다.

또 변수를 선언 할 때 초기화 까지 하면, 즉 값까지 한 곳에서 할당에 주면, 코드는 더욱 깔끔해 지게 됩니다.

---

숫자, 문자열, 또는 불리언 은 원시 값 (primitive values) 으로 사용하고, 객체 (objects) 로 선언하지 않아야 합니다.

객체로 선언하면 실행속도가 느려지고 좋지 않은 부수적 영향이 발생하게 됩니다.

var aName = "이순신";  // 문자열 변수에 원시값을 그대로 할당하는 것이 좋습니다.
var anotherName = new String("원균");  // 문자열을 객체로서 선언하게 되면 부정적인 효과가 발생할 수 있습니다.

---

new String(), new Number(), new Object(), new Array() 를 사용하는 대신에 아래와 같이 직접 기호로 생성하기 바랍니다.


<script>
var myString = "";
var myNumber = 0;
var myBoolean = false;
var myObject = {};
var myArray = [];
var myFunction = function(){};
var myRegularExpression = /()/;
</script>

---

값을 비교할 때는 항상 자료 형까지 같이 비교하는 것이 좋습니다.

== 비교 연산자는, 비교하기 전에 자료형을 먼저 일치 시킨 후 비교합니다.

반면 === 연산자는 값과 자료 형을 함께 비교하도록 합니다.

0 == "";       // true
0 === "";      // false

---

만일 함수를 호출할 때, 인수 (argument) 를 생략하면, 생략된 인수의 값은 "정의 되지 않은 값 (undefined)" 이 됩니다.

정의 되지 않은 값 (undefined values) 은 우리가 만든 코드에 오류를 일으킬 수 있습니다.

그래서 항상 인수에 기본 값을 할당하는 것이 좋은 습관이 될수 있습니다.

if (myAge === undefined) {
    myAge = 1;
}

---

<pre><blockquote>myName yourName myHighScore</blockquote></pre> <pre><blockquote>myHighScore = score + bonus;</blockquote></pre> <pre><blockquote>document.getElementById("breakResult").innerHTML = "2018 평창 동계올림픽";</blockquote></pre> <pre><blockquote>&lt;script src="myExternalScript.js"&gt;</blockquote></pre> <pre>전역 변수의 사용은 최소화 하고 가급적 지역 변수를 사용하는 것이 좋습니다. 전역 변수나 함수는 다른 스크립트에 의해 덮어 써질 수가 있습니다.</pre> <pre>하나의 함수 내에서만 사용되는 변수들은 지역 변수로서 선언해야 합니다. 지역 변수는 var 키워드와 함께 선언 되어야 합니다. 그렇게 하지 않으면 전역 변수가 될 것입니다. 또 스트릭트 모드 (strict mode) 에서는 선언되지 않은 변수는 사용할 수 없습니다.</pre> <pre>모든 선언은 각 스크립트나 함수의 맨 위에 입력하는 것이 좋습니다. 위에 입력하면 코드가 깔끔해지고, 지역 변수를 한눈에 살펴볼수 있고 또 실수로 전역 변수가 되는 것을 피할 수 있기 때문입니다. 또 변수를 선언 할 때 초기화 까지 하면, 즉 값까지 한 곳에서 할당에 주면, 코드는 더욱 깔끔해 지게 됩니다.</pre> <pre>숫자, 문자열, 또는 불리언 은 원시 값 (primitive values) 으로 사용하고, 객체 (objects) 로 선언하지 않아야 합니다. 객체로 선언하면 실행속도가 느려지고 좋지 않은 부수적 영향이 발생하게 됩니다. <blockquote>var aName = "이순신"; // 문자열 변수에 원시값을 그대로 할당하는 것이 좋습니다. var anotherName = new String("원균"); // 문자열을 객체로서 선언하게 되면 부정적인 효과가 발생할 수 있습니다.</blockquote></pre> <pre>new String(), new Number(), new Object(), new Array() 를 사용하는 대신에 아래와 같이 직접 기호로 생성하기 바랍니다. <blockquote> &lt;script&gt; var myString = ""; var myNumber = 0; var myBoolean = false; var myObject = {}; var myArray = []; var myFunction = function(){}; var myRegularExpression = /()/; &lt;/script&gt;</blockquote></pre> <pre>값을 비교할 때는 항상 자료 형까지 같이 비교하는 것이 좋습니다. == 비교 연산자는, 비교하기 전에 자료형을 먼저 일치 시킨 후 비교합니다. 반면 === 연산자는 값과 자료 형을 함께 비교하도록 합니다. <blockquote>0 == ""; // true 0 === ""; // false</blockquote></pre> <pre>만일 함수를 호출할 때, 인수 (argument) 를 생략하면, 생략된 인수의 값은 "정의 되지 않은 값 (undefined)" 이 됩니다. 정의 되지 않은 값 (undefined values) 은 우리가 만든 코드에 오류를 일으킬 수 있습니다. 그래서 항상 인수에 기본 값을 할당하는 것이 좋은 습관이 될수 있습니다. <blockquote>if (myAge === undefined) { myAge = 1; }</blockquote></pre> [광고] Udemy 동영상 강의로 보기