본문 바로가기

IT 관련/javascript & jquery

가독성 좋은 javascirpt 이름 규칙

컴퓨터 과학에서 가장 어려운 두 가지 문제는 캐시 무효화와 네이밍이다.

1. 이름 규칙

우리가 작성하는 코드의 대부분은 변수와 함수를 사용합니다. 그래서 변수명과 함수명에 대한 이름 규칙은 이해하기 쉬운 코드를 작성하는데 꼭 필요하고 중요합니다. 자바스크립트의 기반이 되는 ECMAScript는 낙타 표기법으로 작성되어 있습니다. 낙타 표기법은 소문자로 시작하고 새로운 단어를 사용할 때마다 첫 문자는 대문자로 입력하는 방식입니다.

예제를 살펴봅시다.

 

var thisIsMyName;

var anotherVariable;

var aVeryLongVariableName;

 

일반적으로 자신이 사용하는 언어의 표준 라이브러리에서 따르는 이름 규칙을 사용해야 합니다.

대부분 자바스크립트 개발자들은 변수명과 함수명을 지을 때 낙타 포기 법을 사용합니다.

구글 자바스크립트 스타일 가이드와 SproutCore 스타일 가이드, Dojo 스타일 가이드 모두 낙타 표기법을 사용하라고 명시하고 있습니다.

 

이름 규칙으로 낙타 표기법을 사용하지만, 보통 스타일 가이드에는 이에 덧붙여 더 상세한 스타일까지 명시합니다.

 

2000년도쯤까지는 자바스크립트에서 헝가리안 표기법이 많이 쓰였습니다. 이 표기법은 변수명 앞에 변수의 타입을 붙이는 방식입니다. 예를 들면, sName은 문자열 변수를 의미하고, iCount는 정수형 변수를 의미합니다. 이제는 많이 쓰지 않고, 주요 스타일 가이드에서도 추천하지 않는 표기법입니다.

2. 변수와 함수

변수명은 낙타 표기법을 사용하고 명사로 시작해야 합니다. 변수명은 명사로, 함수명은 동사로 시작하면 서로 구분하기 쉬워집니다. 예제로 살펴보겠습니다.

// 좋은 예

var count = 10;

var myName = "홍길동";

var found = true;

 

// 나쁜 예 : 함수와 혼동하기 쉬움

var getCount = 10;

var isFount = true;

 

// 함수명의 좋은 예

function getName(){

    return myName;

}

 

// 함수명의 나쁜 예 : 변수와 혼동하기 쉬움

function theName(){

    return myName;

}

 

변수명을 새로 짓는다은 것은 과학보다는 예술에 가깝지만, 의미를 빠르고 정확하게 전달하기 위해 가능한 짧게 작성하는 것이 좋습니다.

변수명은 변수 이름만으로 데이터 타입을 알 수 있도록 만드는 것이 좋습니다.

이런 식으로 변수명을 작성하면 코드를 작성한 사람이나 다른 사람이 코드를 볼 때 가독성이 더 좋습니다.

 

의미 없는 변수명은 사용하지 말아야 합니다. foo, a, temp와 같은 이름은 변수명에 어떠한 의미도 부여하지 않습니다.

이런 변수명은 다른 사람이 봤을 때 전체 코드를 보지 않으면 변수가 어떤 의미인지 알 수 없기 때문입니다.

 

함수명과 메서드명은 첫 번째 단어는 동사로 시작해야 하면 변수와 구분이 되어 좋습니다.

보통 많이 사용하는 동사는 아래와 같습니다.

can : boolean 값을 반환하는 함수

has : boolean 값을 반환하는 함수

is : boolean 값을 반환하는 함수

get : boolean 이외의 값을 반환하는 함수

set : 값을 세팅하기 위해 사용하는 함수

 

대부분 스타일 가이드는 함수명 규칙을 설명할 정도로 상세하지는 않은 것이 대부분입니다.

하지만 이 규칙은 자바스크립트 개발자 사이에 암묵적으로 사용되고 있을 정도로 빈번하고, 주요 라이브러리에서도 흔히 볼 수 있는 코딩 규칙입니다.