자바스크립트 코딩 컨벤션(관습, 관례)

Javascript 2012. 1. 1. 10:05

"프로그래머들은 보통 자신이 작성한 코드를 맹신하는 경향이 있습니다."

자신은 완벽한 프로그래머이며, 자신이 작성한 코드는 완벽한 코딩 스타일과 최적화를 통해
작성되어 있다고 생각하고 그렇게 맹신해 버리는 프로그래머들이 생각보다 많습니다.

이런 생각은 자신의 자신감을 PR 할 수 있는 표현으로만 쓰는 것이 좋지 않을까요?

이런 생각 때문에 자신이 작성한 코드의 품질이 낮아지고 또 그 당시 작성된 그런 코드 때문에
훗날 유지보수로 말미암아 괜한 골머리를 써야 하는 것 보다는 말입니다.

그럼 프로그램을 유지보수 하기 위해 드는 비용에는 어떤 것들이 있을까요?

1) 문제를 다시 학습하고 이해하는 데 걸리는 비용.
2) 문제를 해결하는 코드를 다시 이해하는 데 걸리는 비용.

위의 내용처럼 자신이 작성한 프로그램 읽지라도 작성된 시간이 얼마간 지나 코드를
유지보수 할 시에는 그것을 작성하지 않은 타인과 크게 다르지 않은 비용이 소요된다는

것을 알 수 있습니다.

"코드는 작성하는 것만큼 읽고 이해하는데 더 많은 시간과 비용이 소요되기
때문입니다."

위와 같은 문제를 최소화하려는 방법의 하나가 이번 포스트에서 말하려 하는 내용인
내부적으로 코딩 규칙을 만들어 일정한 규칙을 세우는 것입니다.

- 아래는 먼저 코딩 규칙에 대한 장점을 나열한 것입니다.

1) 읽기 쉽다.
2) 직관적이며 일관성이 지켜진다.
3) 예측 가능하고 이해하기 쉽다.
4) 한 사람이 작성한 것처럼 보인다.
5) 문서화 되어 있다.

- 위의 장점을 한 단어로 표현하자면 코드의 가독성이 향상된다는 말입니다.

Q: 여기서 가독성이란?

A: 일관성 있는 규칙을 세워 코드의 이해도를 높임으로써 협업 시 야기되는 개발자 간의

혼란을 줄이며 그에 따라 코드의 유효기간이 연장됩니다.

많은 회사(구글, YAHOO, NHN)나 단체(비영리 단체)에서 개발자들이 지켜야 할 수많은

규칙에 관한 메뉴얼를 내부적으로 배포하고 있으며 이 부분의 논쟁 또한 끊이지 않고 있는

게 현실입니다.

예를 들어 "효율적인 들여쓰기 방법" 이라던지 "세미콜론의 존재 여부"와 같은 내용입니다.

생각해보면, 별거 아니라고 생각할 정도의 아주 사소한 문제에 대해서도 현재 팽팽히

논쟁 되고 있으며, 이 같은 내용을 하나하나 따져가며 코드를 최적화하는 것이 최종

목표라 할 수 있을 것입니다.

1. 전역 변수 최소화

자바스크립트에서의 함수는 크게 두 가지 특성이 있습니다.

하나는 함수는 객체라는 것이며, 다른 하나는 함수는 유효범위(Scope)를

제공한다는 것입니다.

(여기서 유효범위를 제공한다는 말은 프로그램 설계상 함수는 개별적으로 각자의

유효범위를 가진다는 말로 해석됩니다.)

함수 내부에서 var로 선언된 변수는 해당 함수의 지역 변수(Private variable)가

되며 기본적인 방법으로는 함수 외부(window)에서 접근할 수 없습니다.

(함수 외부에서 접근 할 수 있는 우회적인 방법으로는 비공개 구성원(공개 메소드)을

공개 방법으로 노출하는 방법이 있습니다.

하지만 상세 방법에 대해서는 이 장에서는 다루지 않겠습니다.)

반대로 함수 내부에서 var로 선언하지 않은 변수는 전역 변수(Global variable and Window property)가 되어 코드 상 어디에서든지 사용할 수 있습니다.

또한, 함수 내부에서 전역변수를 선언하는 것은, 전역객체(window)의 프로퍼티를 만드는

것과 동일 합니다.

"브라우저에는 전역객체(Window) 자기 자신을 참조하는 프로퍼티인 window

프로퍼티가 존재합니다."

(function(){
return function(){
var private_variable = null; // 지역 변수
alert(private_variable === window['private_variable']); // false
global = null; // 전역 변수 && 전역 프로퍼티
alert(global === window.global); // true
alert(this === window); // true (Window 전역객체)
alert(this.window === window.window); // true (Window.window property)
};
})()();

- 전역 변수의 장/단점

"전역 변수의 장/단점은 코드 상 어디서든지 사용될 수 있으며 공유된다는 점입니다."

즉, 모든 전역변수는 같은 전역객체(Window)의 프로퍼티로 존재하기 때문에,

코드 상 어디서든지 접근할 수 있으며 같은 이름으로 재정의할 경우 이전의 전역변수를

덮어쓰게 된다는 단점이 있습니다.

var test = 'test';
alert(window.test) // test
alert(this.test === window.test); // true (Window.test === Windown.test)
alert(window.test === window.window.test); // true (Window.test === Window.window.test);
window.test = 'test1';
alert(window.test) // test1
var global = null;
function fn(){
// 선언된 전역변수의 값을 덮어쓴다.
global = 'global'
}
fn();
alert(global) // 'global'

또한, 내부에 있는 자바스크립트 코드가 아니더라도 외부 코드와 밀접하게 커플링 되어

있다면 해당 문제에 부딪힐 수 있는 가능성이 큽니다.

- 관련사례 리스트

1) 서드파티 자바스크립트 라이브러리
2) 광고 제휴 업체의 스크립트
3) 사용자를 추적하고 분석하는 서드파티 스크립트 코드
4) 다양한 위짓, 배지, 버튼 등

지금까지 설명한 여타 문제들을 최소화하기 위해서는 근본적인 문제인 전역변수의 수를

줄이며 또한 이는 성능 및 최적화에도 도움을 줍니다.

"그에 따른 성능 및 최적화 부분에 대해서는 이번 글의 주제에서 벗어나는 내용이므로

넘어 가도록 하겠습니다."

- 전역 변수에 대한 실수와 오해!!

Q: "위의 코드가 어떤 식으로 선언되며 정의될 거라고 생각하시나요?"

function a(){
var a = b = 0;
}

Q: "아마도 a, b 지역변수에 0이 정의되었다고 생각하시지 않나요?"

"하지만 실상은 그렇지 않습니다."

A:

"이유는 자바스크립트의 평가는 오른쪽에서 왼쪽으로 흘러가는 형태이기 때문입니다."

평가순서를 나열하자면 먼저 b = 0;이라는 표현식이 평가되고 이때 b는 선언되지 않은
상태(var가 없이 선언된 상태!!)이며 그다음 Literal 0은 var로 선언된 a 지역변수로
정의 됩니다.

다시말해, a, b 변수 중 a만 var로 말미암아 지역변수로 선언되었고 b는 의도되지
않게 전역변수로 선언되었다는 것입니다.

"아마도 많이 실수하는 부분이라고 생각하지 않으시나요?"

이런 실수를 없애기 위해서는 함수작성 시 반드시 지역변수에 대한 선언 및 초기화를
미리 해야 합니다.

function a(){
var a = 0
, b = 0;
a = b = 0;
}

두 번째로 많은 개발자가 오해하는 부분 중 하나인 전역객체에 대한 이야기입니다.

var global = 1;
delete global;
alert(global) // 1

결과가 위와 같이 나오는 이유는 전역변수가 var로 선언되었기 때문입니다.

즉 "delete" 연산자를 이용한 객체삭제 시에는 명시적으로(var로 선언된) 선언된

전역변수는 삭제할 수 없습니다.

window['global_1'] = 1;
global_2 = 2
delete window['global_1'];
delete global_2;
alert(window['global_1']) // undefined
alert(global_2) // undefined

위에서 보는 바와 같이 명시적으로 선언된 전역변수가 아니라 암묵적으로 선언된

전역변수는 "delete" 연산자 때문에 삭제되어 undefined를 반환하였습니다.

2. var 변수선언

변수를 연속적으로 선언할 때 var를 생략하고 쉼표(,)로 구분하여 선언하는 것이

효율적입니다.

아래와 같이 쉼표를 변수명 앞에 작성하면 변수를 추가/삭제/주석 처리 시 쉽습니다.

선언문과 실행문은 구분해 주는 것이 좋습니다.

선언문 끼리의 구분 및 실행문과의 구분또한, 빈 줄을 통해 구분해 주는것이 가장 좋으며,

삽입줄 수는 1 ~ 2줄이 가장 좋습니다.

선언문 끼리의 구분.

var a = null // a변수는 문자열값 입니다.
, b = null
, c = null
, d = null;
var e = {
e1: 'e1' // el 변수는 숫자 입니다.
, e2: 'e2'
, e3: 'e3'
, e4: 'e4'
}

선언문과 실행문의 구분.

var a = null // a변수는 문자열값 입니다.
, b = null
, c = null
, d = null;
if (a) b = true;
else if (b) c = true;
else d = true;

함수 선언부 사이에도 적절한 구분이 필요합니다.

function a(){
}
function b(){
}

자바스크립트만의 객체리터널 표현식 내부의 함수 선언부에서도 아래와 같이 구분을

지어줍니다.

var fnSet = {
a: function(){
},
b: function(){
}
}

3. for 루프

for (var i = 0, length = o.length; i++){
...
}

이런 방식으로 작성하면 length 값을 한 번만 구하고, 순회하는 동안 지역변수에
캐시 되어 있는 length를 사용하게 됩니다.

length를 캐시 하면, 사파리 3에서 2배, IE7에서 190배에 이르기까지 모든 브라우저에서
속도가 향상됩니다.

for (; i = o.length; i--){
...
}

- 또 위의 작성법은 아래와 같은 장점이 있습니다.

1) 변수를 하나 덜 쓴다.
2) 카운트를 거꾸로 하여 0으로 내려간다. ("0과 비교하는 것이 배열의 length 또는 0이 아닌 값과 비교하는 것보다 대개 더 빠르기 때문이다")

4. for-in 루프

for-in 루프는 배열이 아닌 객체의 프로퍼티를 순회하기 위한 Statment입니다.

자바스크립트에서 배열은 객체이므로 기술적으로는 for-in 문으로 처리할 수 있지만

추천하지는 않습니다.

이유는 보통 배열 값을 순회할 때에는 순차적인 작업이 많으나 for-in 문으로 순회할

때에는 순서를 보장하지 않기 때문입니다.

"그래서 배열객체([])는 일반 for 문으로 객체({})는 for-in 문으로 돌리는 것이

맞습니다."

var object = {a: 'a', b: 'b'};
for (var n in object){
var hasOwnProperty = Object.prototype.hasOwnProperty;
if (hasOwnProperty.call(object, n)){
alert(n);
}
}

5. switch문

여러 자바스크립트 문법 중에서 가장 코드의 가독성을 해치는 것이 바로 스위치 문입니다.

보통 if...else...문이 여러 차례 반복되는 문장을 리펙토링 하려는 경우에 많이

쓰이는데 단순히 변수를 할당하는 목적으로 쓰인다면 객체를 이용하여 가독성 및 효율을

높일 수 있습니다.

var ret = '';
switch (expression){
case 'a' :
ret = '1'
break;
case 'b' :
ret = '2'
break;
case 'c' :
ret = '3'
break;
}
return ret;
return {
'a': '1'
, 'b': '2'
, 'c': '3'
}[expression];

6. 암묵적 타입 캐스팅 피하기

자바스크립트 변수를 비교할 때 암묵적으로 타입캐스팅을 실행하기 때문에 false == 0이나

"" == 0의 비교가 true를 반환한다.

암묵적 타입캐스팅 때문인 혼동을 막기 위해서는 항상 표현 의 값과 타입을 모두

확인하는 === or !== 연산자를 사용해야 합니다.

false == 0 // true
false === 0 // false
false == null // true
false === null // false

7. 들여쓰기

코드 가독성을 위한 가장 기본적인 규칙이다. 하지만 일관성 없는 들여쓰기는 개발자에게
더 큰 혼란을 가져다준다.

"현재 가장 널리 사용하는 방법은 한 TAB에 스페이스 4칸을 들여쓰기하는 방법이다."

Q: 어떤 것을 들여써야 하는가?

A: 여러 Statement (block({ }), if, else, else if, do, while, do-while,

for, for-in, switch) 및 Literal(object literal)에 들여쓴다.

{
body;
}
function fn(){
body;
}
if (){
body;
}
else if(){
}
else{
}
switch(expression){
}
object_literal = {
literal: literal
}
하지만 아래와 같이 과도한 들여쓰기는 코드가동성을 떨어뜨립니다.
function a()
{
var b = true
, c = false
, ret = true;
if (b){
c = true;
}
// 과도한 들여쓰기 이때 return문은 들여쓰기 할 필요가 없다.
return ret;
}

8. 중괄호

중괄호는 코드 상 생략할 수 있는 범위가 존재합니다.

예를 들어 아래 예제의 표현 식과 같이 한 줄만 있는 if 문 이나 for 문 이 있다면

중괄호를 생략하여도 문법적 오류가 발생하지 않는다는 것입니다.

"하지만 코드의 일관성 위해 쓰지 않는 것이 좋다고 합니다."

"하지만 개인적인 생각으로는 코드의 청결함(우아함)을 유지하는 것 또한 가독성 향상을

위해 좋은 일이라 생각하여 위의 의견에는 100% 동의하지는 않습니다."

// 여러줄 if문 중괄호
var ret = null;
if (true){
ret = true;
return ret;
}
else{
ret = false;
return ret;
}
// 한줄 if문 중괄호
if (true) return true;
else if (false) return false;
else return false;
//여러줄 for문 중괄호
for (; var length = length; i--){
if (true){
continue;
}
}
// 한줄 for문 중괄호
for (; var length = length; i--){ alert(i); }

Q: 그렇다면 중괄호 시작 위치는?

이 부분에 대해서도 개발자들 사이에 같은 줄에 둘지, 아니면 다음 줄에 둘지에 대해서

의견이 분분합니다. (개인적인 입장에서는 같은 줄에 두는 것을 선호합니다.)

하지만 개인적인 취향 및 선호도뿐만 아니라 아래와 같이 중괄호의 위치에 따라

프로그램의 동작이 달라질 수도 있는 범위가 있습니다.

function fn1(){
return {
name: 'fn'
}
}
alert(fn1().name); //fn
보기2)
function fn2(){
return
{
name: 'fn'
}
}
alert(fn2().name); //undefined

위와 같이 동작하는 이유는 자바스크립트의 세미콜론 삽입장치 때문입니다.

자바스크립트는 까다롭지 않은 언어라서(유연한 언어라서????) 세미콜론을 쓰지 않고

행을 종료하면 JS 엔진이 알아서 종료된 행에 세미콜론을 추가해줍니다.

이러한 동작 방식은 위와 같이 함수의 반환 값이 객체 리터널 이면서 이 객체를 반환하는

중괄호가 다음 줄에 와 있는 경우 발생합니다.

function fn2(){
return undefined;
{
name: 'fn'
}
}

마지막 방법으로 함수 선언 부의 중괄호 시작 위치와 함수 내부의 중괄호 시작 위치를 아래
코드처럼 구분하는 방법이 있습니다.

이렇게 작성함으로써 함수블록과 그 밖에 블록으로 구분할 수 있습니다.

function a()
{
var b = true
, c = false;
if (b){
c = true;
}
}

9. 공백(띄어쓰기)

"공백을 규칙적으로 활용하는 것이 가독성 향상을 위해 좋습니다."

쉼표(,): 전: 0, 후: 1
예) var array = ['a', 'b', 'c', 'd'];
괄호('(', ')'): 전: 0, 후: 0
예) if (true){ ; }
세미콜론(;): 전: 0, 후: 1
예) var a = 'a'; var b = 'b'; var c = 'c';
산술 연산자(+, -, *, /, % ...): 전: 1, 후: 1
예)
var x = a + b;
var y = a / b;
관계 연산자(==, ===, !=, !==, <, >, <=, >= ...): 전: 1, 후: 1
예)
var x = a > b;
var y = a < b;
1진 연산자(++, --): 전: 0, 후: 0
예)
var x = a++;
var y = b++;
단항 연산자와 피연자는 띄어 쓰지 않는게 좋습니다.
하지만 jsLint에서는 아래와 같은 문법을 권장하고 있습니다.
i++; --> i = i + 1 / i += 1
이같은 방법을 권장하는 이유는 i++이 "과도한 기교"를 조장한다는 이유입니다.
할당(a = b): 전: 1, 후: 1
예)
var x = a;
var y = c;
논리 연산자(&&, ||): 전: 1, 후: 1
예)
var x = a && b;
var y = c || d;
키-밸류 연산자({'a':'b'}): 전: 1, 후: 1
예)
var object = {
a: 'a'
, b: 'b'
, c: 'c'
, d: 'd'
};
인라인 주석(//): 후: 1
var x = a || b; // true
var y = c || d; // false
한줄 주석:
// 내용
여러줄 주석:
/*
* 여러 줄 주석1
* 여러 줄 주석2
* 여러 줄 주석3
* 여러 줄 주석4
* 여러 줄 주석5
*/

여러 줄로 주석을 삽입할 경우 불필요한 과도한 주석은 붙이지 않는 것이 좋습니다.

여기서 과도한 주석이란? 코드 분석 시누구나 알 수 있는 내용이나 코드 자체가 명확한

내용은 굳이 주석으로 달 필요가 없습니다.

10. 작은 따옴표(기본)

자바스크립트에서 문자열(string)을 처리할 때 큰 따옴표("")와 작은 따옴표(') 중

어느 것을 사용해야 하는지를 한 번쯤 은 고민해 보았을 것입니다.

"결론부터 말하자면 "작은따옴표"를 기본으로 사용하는 것이 좋다 입니다."

이유는 자바스크립트 안에서 HTML 작성 시 큰 따옴표("")가 기본으로 사용되어야

하므로 백슬래시(\)를 이용하여 일일이 이스케이프(escape) 하는 상황이 발생하면

가독성이 크게 떨어지기 때문입니다.

var anchor = '<a href="/' + foo + '.html">' + foo + '</a>'; // correct
var anchor = "<a href=\"/" + foo + ".html\">" + foo + "</a>"; // incorrect
var anchor = "<a href='/" + foo + ".html'>" + foo + "</a>"; // none sense
var anchor = "<a href='javascript:alert(\"test\")'>foo</a>";

11. 명명 규칙(여러 Literal)

"개발자로 하여금 코드에 내용을 좀 더 예측 가능하고 이해하기 쉬운 일관된
방식으로 작성하는 것입니다."

1) 변수/함수

단어 구분

생성자, 변수, 함수 등에서 단어와 단어 사이를 구분하기 위해서 자바스크립트에서는

보통 낙타 표기법을 사용하여 각각의 단어 사이를 나눕니다.

여기서 낙타 표기법을 포함한 여러 가지 표기법을 알아보자!!!!

낙타 표기법: 첫 번째 글자는 소문자이며 각각 추가되는 단어들의 첫 글자를 대문자로

표기하는 방법입니다.

getLastName, setLastName;

파스칼 표기법: 첫 번째 글자는 대문자이며 각각 추가되는 단어들의 첫 글자를 대문자로
표기하는 방법입니다.

GetLastName, GetLastName;

헝가리안 표기법: 첫 번째 글자는 타입을 나타내는 소문자이며 바로 파스칼 표기법에

따라 표기하는 방법입니다.

strFirstName, strLastName;

앞에서 말한 바와 같이 생성자 함수와 일반함수는 첫 글자에 대/소 문자로 구분한다고
하였습니다.

그럼 변수는 어떠한가? 변수의 단어구분은 2가지 방법이 존재합니다

첫 번째로 바로 이전에 설명하였던 낙타 표기법이 있습니다.

두 번째 방법으로는 각각의 단어 사이를 _(언더 스코어)로 분리하는 방법의 표기법이

있습니다.

firstName, first_name;

- 상수

"프로그램 생명주기 동안 값이 변경 돼서는 안 되는 변수에 이름을 붙일 때 모두

대문자로 표기합니다."

MAX_WIDTH, MIN_WIDTH;

1) 전역변수

전역변수 또한 상수와 마찬가지로 모두 대문자로 표기하거나 상수와의 구분을 위해 첫

글자에 구분자를 두는 것도 좋은 방법입니다.

MAX_WIDTH, G_MAX_WIDTH;

2) 내부 변수(비공개 구성원(지역변수이며 내부에서만 사용하겠다는 의미가 담긴 변수)) 

기능을 암시할 수 있도록 이름을 정하는 또 다른 규칙으로 내부 변수(비 공개 멤버)를 

들 수 있습니다.

자바스크립트에서도 실질적으로 비공개 메서드들을 구현하는 방법이 존재하지만, 

아래와 같이 _(언더 스코어)로 쉽게 구별할 수도 있습니다.

var obj = {
name: 'name'
, getName: function(){
return this.name;
}
, _setName: function(name){
this.name = name;
}
}
obj._setName('test'); // 비공개 메소드로 표기되어있으나 실질적으로는 외부에서 접근/변경이 가능하다.
alert(obj.getName()); // test

12. 생성자함수

객체 인스턴스를 구성하는 역할을 담당하는 생성자함수는 일반함수와 구별하기 위해 첫 글자를
대문자로 씁니다.

- 생성자 함수
function Constructor(){ ; }
- 일반 함수
function constructor(){ ; }

단수/복수 과거/현재

변수를 정의할 때 이름을 단수와 복수 그리고 과거와 현재를 구분하여 정의하면 코드에

이해도가 향상됩니다.

예) value, values(단수와 복수), onload, onloaded(과거와 현재)

- 그 밖에 가독성 향상을 위한 표현식들...

3항 연산과 조건부 할당

다음 3가지 방법은 같은 결과를 가집니다.

var ret = false;
if (true) ret = true;
else ret = false;
ret = true ? true : false;
ret = true || false;
예제 소스
if (true){
callback();
}
true && callback();

정의와 동시에 사용

아래 코드는 정의와 동시에 push 메소드를 호출하고 있습니다.

a && 뒤의 표현식 []를 정의하는 부분은 괄호를 이용하여 표현식을 따로 분리해야 합니다.

var a = true;
(a && (a = [])).push(1);

위의 내용 밖에도 더욱 다향한 규칙 및 가독성과 성능향상을 위한 표현식이 존재합니다.

마치며....

누구라도 알것입니다.

규칙을 세우는 것보다 중요한 것은 만들어진 규칙에 따라 코드를 작성하는

것이라는 사실을 말입니다.

- 이 내용은 "@파이어준님" 이 작성하신 "섹시한 자바스크립트 컨벤션"의
내용을 일부 발채 하였습니다. -

저작자표시

Posted by 전성균

무하프로젝트

자바스크립트 코딩 컨벤션(관습, 관례)

Article Category

Tag Cloud

Recent Article

Recent Comment

Notice

Archive

Calendar

My Link

티스토리툴바