개발자는 가능한 한 간결하고 읽기 쉽게 코드를 작성해야 합니다.
복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해 해결하는 것이야말로 진정한 프로그래밍 기술입니다.
좋은 코드 스타일은 이런 기술을 연마하는 데 큰 도움을 줍니다.
😠 초보 개발자들은 아래처럼 코드를 작성하곤 하는데, 중괄호가 필요하지 않기 때문에 추천하지 않습니다.
if (n < 0) *{*alert(Power ${n} is not supported);*}*
😠 중괄호 없이 새로운 줄에 코드를 작성할 수도 있는데, 이렇게 하면 새로운 코드 라인을 추가할 때 에러가 발생합니다. 절대 이 방법은 쓰지 마세요.
if (n < 0) alert(Power ${n} is not supported);
😏 코드가 짧다면 중괄호 없이 한 줄에 쓰는 방법도 괜찮습니다.
if (n < 0) alert(Power ${n} is not supported);
😃 가장 추천하는 방법은 다음과 같습니다.
if (n < 0) { alert(Power ${n} is not supported); }
가로길이
가로로 길게 늘어진 코드를 읽는 걸 좋아하는 개발자는 없습니다.
코드의 가로 길이가 길어진다면 여러 줄로 나눠 작성하는 게 좋습니다.
들여쓰기
가로 들여쓰기: 스페이스 두 개 혹은 네 개를 사용해 만듦
show(parameters,
aligned, // 스페이스 다섯 개를 이용해 들여쓰기 함
one,
after,
another
) {
// ...
}
세로 들여쓰기: 논리 블록 사이에 넣어 코드를 분리해주는 새 줄
function pow(x, n) {
let result = 1;
// <--
for (let i = 0; i < n; i++) {
result *= x;
}
// <--
return result;
}
세미콜론
자바스크립트 엔진에 의해 무시되더라도 모든 구문의 끝엔 세미콜론을 써주는 것이 좋습니다.
자바스크립트에선 줄 바꿈이 세미콜론으로 해석되지 않는 몇몇 상황이 있기 때문에 세미콜론을 생략하고 코딩하는 습관을 들이면 에러를 발생시키는 코드를 만들 수 있습니다.
중첩레벨
Linter
Linter라는 도구를 사용하면 내가 작성한 코드가 스타일 가이드를 준수하고 있는지를 자동으로 확인할 수 있고, 스타일 개선과 관련된 제안도 받을 수 있습니다.
이렇게 자동으로 스타일을 체크받다 보면, 변수나 함수 이름에 난 오타 등이 유발하는 버그를 미리 발견할 수 있어서 좋습니다.
아직 '코드 스타일’을 정하지 않았더라도 linter를 사용하면 버그를 예방할 수 있기 때문에 linter 사용을 권유 드립니다.
아래는 .eslintrc 파일의 예시입니다.
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-console": 0,
"indent": ["warning", 2]
}
}
요약
이 챕터에서 소개해 드린 문법 규칙과 스타일 가이드 관련 참고자료들은 코드 가독성을 높이기 위해 만들어졌습니다.
‘더 좋은’ 코드를 만들려면 "가독성이 좋고 이해하기 쉬운 코드를 만들려면 무엇을 해야 할까?"라는 질문과 "에러를 피하려면 어떤 일을 해야 할까?"라는 질문을 스스로에게 던져야 합니다. 어떤 코딩 스타일을 따를지 결정할 때와 이에 대한 논쟁을 할 땐 이런 질문을 기반으로 해야 하죠.
유명 스타일 가이드를 읽다 보면 코드 스타일에 관한 경향과 모범 사례에 대한 최신 정보를 유지할 수 있습니다.
