깨끗한 코드도 실력이다. Clean Code (Variables)

모든 코드가 그렇듯이 Javascript 코드 또한 작성하는 방식과 그 형태에 따라 유지보수와 협업에 용이하며, 리팩토링에 간편하게끔 만들 수 있습니다. 과거 소수의 개발자들은 자신의 코딩 실력을 뽐내듯 다른 개발자가 코드를 쉽게 분석할 수 없게끔 어렵게 코딩하는 개발자들도 존재 하였습니다. 그러나 현재의 개발 트렌드는 짧고, 간결하고, 보기 좋게 코딩하는 것이 하나의 트렌드로 자리를 잡아가고 있습니다.

 

사람들은 항상 기초가 중요하다라는 이야기를 합니다. 그만큼 처음 배울 때 제대로 배워야 하고 처음부터 제대로 된 습관을 길러야 한다는 이야기입니다. 변수(Variables) 역시 개발 서적의 앞부분에 언급되는 만큼 프로그래밍에 가장 기본이 되기도 하지만 가장 중요한 부분이기도 합니다. 마치 개발 서적 가장 앞에 나오는 "Hello World"를 배우지 않았더라면 우리는 결과값을 출력하는 방법을 모르고 있을지도 모릅니다.

 

변수(Variables)를 작성하는 방법에는 낙타(Camel) 표기법, 팟홀(Pothole) 표기법, 파스칼(Pascal) 표기법 등 다양한 표기 방법이 있는데 Robert C. Martin’s의 책인 Clean Code 중 변수(Variables) 부분을 보기 쉽고 간결하게 정리하였습니다. 

 

1. 의미있고, 발음하기 쉬운 변수 사용

const yyyymmdd = moment().format(“YYYY/MM/DD”);

const currentDate = monent().format(“YYYY/MM/DD”);

yyyymmdd라는 이름의 변수는 해당 포맷의 형태는 짐작할 수 있겠지만 해당 날짜의 의미가 담긴 단어로 바꾸어 currentDate라 작성하는 것이 더욱 바람직합니다.

 

2. 같은 유형의 변수는 하나의 단어를 사용

getUserinfo();
getClientData();
getCustomerRecord();

getUser();

UserInfo, ClientData, CustomerRecord 등 함수들은 사용자의 정보를 담고 있는 유형의 변수이므로 User라는 하나의 단어를 사용하여 묶는 것이 바람직합니다.

 

3. 검색 가능한 이름 사용

setTimeout(loadOff,5000);

const LOAD_OFF_AVE_TIME = 5000;
setTimeout(loadOff, LOAD_OFF_AVE_TIME);

시간이 지나면 5000이라는 숫자가 의미하는 것이 무엇인지 아무도 모를지도 모릅니다. 이를 방지하고 빠른 소스코드의 이해를 돕기 위해 무의미한 숫자에는 의미를 부여해주는 것이 좋습니다.

 

4. 의도를 나타내는 변수 사용

const address = "One Infinite Loop, Cupertino 95014";

const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;

saveCityZipCode(
address.match(cityZipCodeRegex)[1],
address.match(cityZipCodeRegex)[2]
);

const address = "One Infinite Loop, Cupertino 95014";

const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;

const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];

saveCityZipCode(city, zipCode);

 

5. 자신만 아는 변수명 사용 금지

const locations = ["Austin", "New York", "San Francisco"];

locations.forEach(l => {

doStuff();

doSomeOtherStuff();

// ...

// ...

// ...

dispatch(l);

});

);

const locations = ["Austin", "New York", "San Francisco"];

locations.forEach(location => {

doStuff();

doSomeOtherStuff();

// ...

// ...

// ...

dispatch(location);

});

forEach문을 통해 반복문을 돌리지만 만약 내부 반복의 코드가 길어진다면, I라는 단어가 의미하는 것을 새로운 개발자는 알지 못할 수도 있습니다. 이럴때는 location과 같이 모두가 알아볼 수 있는 단어를 사용합니다.

 

6. 불필요한 문맥 요소 제거

const Car = {
carMake: "KIA",
carModel: "K5",
carColor: "Black"
};

function paintCar(car) {
car.carColor = "Red";
}

const Car = {
make: "KIA",
model: "K5",
color: "Black"
};

function paintCar(car) {
car.carColor = "Red";
}

car라는 변수 안에 carMake, carModel 등 동일 요소의 특성임에도 불구하고 중복된 의미를 부여하여 사용하였습니다. 이런 문맥상 불필요한 요소는 동일 단어를 제거하여도 의미 전달에 불편함이 없기 때문에 제거하여 사용하는 것이 바람직합니다.

  

아무렇지 않게 생각할 수 있는 클린 코드 작성법은 익숙해지면 익숙해질수록 빠른 유지보수와 리팩토링 그리고 자연스럽게 Javascript의 속도가 향상된다는 것을 느낄 수 있습니다. 다음 글에서는 함수의 클린 코드 작성법에 대해서 간략하게 정리해보도록 하겠습니다.

 

[참고문헌]

Robert C. Martin’s - Clean Code

 

글. 접근제어팀 | 장준영

기획/편집. 프리세일즈·마케팅팀 | 박병민