[JavaScript] convention 정리하기

soryeongk·2021년 4월 13일
coding conventionjssoryeongkweb
0

JavaScript

목록 보기
2/7
post-thumbnail

제대로 개발을 공부함에 있어서 해당 언어의 스타일 가이드를 따르는 것이 중요하다고 생각합니다. 각 언어가 가지는 특징을 파악할 수도 있고, 추후 다른 개발자들과의 협업에서도 가독성 좋은 코드를 작성하고 원활하게 작업할 수 있게 하는 좋은 윤활제 중 하나라고 생각하기 때문입니다.

본 게시물은 모두 개인적으로 찾은 도큐먼트와 각종 블로그의 글을 읽으며 타당하다고 여기는 것들을 정리해 작성한 것입니다.
혹 잘못된 내용이 있다면 알려주시면 감사합니다. :-)

0. 컨벤션? Convention?

컨벤션(Convention)은 각 언어의 스타일 가이드이자 문법, 개발자들간의 약속과 같습니다.
각 변수들의 특징과 사용에 따라 변수명을 작성하는 방법을 달리하고, 각 언어가 가진 예약어나 라이브러리 등의 특징, 인터프리터의 성격 등에 따라 공백과 개행의 구분을 정하기도 합니다.


출처 : 파이썬 공식 홈페이지 style guide for python code

이외에도 협업자들 간에 약속을 따로 지정하기도 하고, 개발자들이 의견을 모아 컨벤션을 개선하기도 합니다. 실제로 python은 공식 홈페이지에서 그 내용을 명시하고, 버전 업데이트와 함께 변경사항을 명시합니다.

필요성

많은 개발자들이 소프트웨어 개발에서의 비용 중 80%가 유지보수라고 말합니다. 그 유지보수는 개발자 본인이 아닌 다른 사람, 혹은 외부 인력이 담당하는 경우가 많습니다. 또한, 개발 과정에서 하나의 프로그램을 작성에 다수가 참여하는 경우가 많고, 본인이 작성한 코드를 시간이 흐른 뒤 다시 보았을 때에는 이해의 속도가 당시보다 더딜 수밖에 없습니다.
이러한 이유로 우리는 가독성이 좋은 코드를 작성할 필요가 있습니다.
다른 사람이 나의 코드를 보았을 때, 추후 내가 다시 나의 코드를 보았을 때, 각 변수가 가지는 의미와 사용에 대해서 정확하고 빠르게 파악하기 위한 일종의 약속을 정하는 것입니다.

참고
1. w3school의 JavaScript Style Guide의 내용을 해석했습니다.
2. 일부 구체적인 내용이나 부족한 내용들은 블로그의 내용을 참고 후 해석하여 작성하였습니다.

1. 세미콜론

자바스크립트를 비롯한 C계열 언어에서 세미콜론(semi-colon, ;)은 우리말의 온점.과 같은 역할로 개행이 제대로 이루어지지 않았을 때에도 그 의미를 명확하게 하는데 도움을 줍니다.

예시

let firstVar =
1; let secondVar
= 2;

즉, 의미를 가지는 단위가 어디까지인지를 표기하기 위한 용도입니다.
물론, 세미콜론이 없어도 한 줄에 한 문장씩만 적음으로써 의미의 구분이 충분히 가능합니다.

let firstVar = 1
let secondVar = 2

실제로 C언어와는 달리 자바스크립트에서는 세미콜론을 붙이지 않아도 별도의 오류가 나지 않습니다. 이는 인터프리터가 의미를 가지는 한 단위의 마지막, 즉 문장의 끝을 찾아내 자동으로 세미콜론을 붙여주기 때문입니다.

다수의 자바스크립트 개발자들은 세미콜론을 붙이는 것을 선호하고 권장하고 있습니다. 하지만, 일부의 개발자들은 '세미콜론이 필요없다', 심지어 혹자는 '쓰지 말아야 한다' 고까지 주장하기도 합니다. 한 줄에 하나의 문장을 사용한다는 컨벤션만으로 세미콜론의 의미가 퇴색된다는 것입니다. 그럼에도 불구하고 아직까지는 세미콜론의 사용이 권장되는 것으로 보입니다.

2. 변수명짓기(Variable naming)


출처 : when i'm searching for a meaningful

2-1. JavaScript는 lowerCamelCase!

  1. 대개 변수명은 소문자로 시작하고, 뒤의 단어들에 대해서는 첫 글자를 대문자로 합니다.
  2. 전역변수(Global variables)에 대해서는 UPPERCASE를 사용하는 것이 일반적이라고 합니다.
  3. PI와 같은 상수값은 UPPERCASE를 사용합니다.
  4. JavaScript 라이브러리 명과의 충돌(conflict)을 방지하기 위하여 $로 시작하는 이름은 지어서는 안됩니다.

예시

const globalVariable;
function thisIsFunction() {
  let thisIsVariable;
  alert("Do not start with $ sign");
  return thisIsVarible * PI;
}

2-2. 이외의 네이밍 규칙들에 대하여

1. 하이픈(hyp-hens, -)
HTML5는 data-quantity, data-price 등의 형식을 허용하고 있으며, CSS는 property-names에 하이픈을 사용하고 있습니다.
하지만 JavaScript에서는 뺄셈 기호(subtraction, -)와의 혼동을 방지하기 위해 변수에 하이픈을 사용하는 것을 허용하지 않습니다.

2. 스네이크 케이스(snakecase), 언더바, 언더스코어(underscores, `` )
SQL databases, Python 등 다양한 개발자들이 언더바의 사용을 선호하고 있고, PHP documentation에서는 종종 사용되었었습니다.

3. 쌍봉낙타표기법(UpperCamelCase), 파스칼케이스(PascalCase)
주로 C언어 개발자들이 선호하는 방식이며 Python에서도 일부 변수에 대해 권장하고 있는 표기법입니다.

4. 좋은 함수이름 짓기

  • 어떤 동작을 수행하는지 간결하고 명확하게 표현해야 합니다.
  • 오직 하나의 동작만을 담당해야 합니다.
  • 함수가 길어지면, 함수를 잘게 쪼갤 때가 되었다는 신호입니다.
  • 함수를 짧게 만들면 테스트와 디버깅이 쉽다. 그리고 함수 그 자체로 주석의 역할을 합니다.

참고로 Python의 convention은 다음과 같다.

  • 기본적으로 의미를 명확히 하기 위해 snake_case를 지향합니다.
  • 클래스명은 UpperCamelCase, PascalCase를 사용합니다.
  • function은 소문자를 사용하고 의미를 명확하게 하기 위해(improve readability) 단어를 _로 구분하는 것을 지향합니다.
  • argument, 즉 인자가 예약어와 충돌할 경우 마지막에 _를 붙여 구분합니다.

3. 공백(space)과 들여쓰기(indentation)

연산자(=, +, -, *, /) 사이와 쉼표 뒤에는 공백을 둡니다.

예시

let soryeongk = "The Fabulous";
let myFav = ["짬뽕", "마라탕", "조개탕"];

코드 블럭에서의 들여쓰기는 공백 두 칸으로 합니다.

if (booleanFalse) {
  return 0;
} else return 1;

python은 4칸을 기본으로 하지만, tab와 space\*4는 다른 것으로 취급합니다.

4. 괄호

여는 괄호는 시작 줄의 가장 마지막에 사용하고, 앞에 공백 하나를 둡니다.
닫는 괄호는 마지막 코드의 다음 줄의 가장 처음에 사용하고 앞에 공백을 두지 않습니다.

예시

function whereIsBracket {
  return "you know what i'm saying";
}

if (blah < 10) {
  return "this";
} else {
  return "that";
}

5. 오브젝트(object) 정의

  1. 각 property와 value 사이에는 콜론(colon, :)으로 구분합니다.
  2. 콜론의 앞에는 공백이 없지만, 콜론의 뒤에는 공백 하나를 둡니다.
  3. string value에 대해서는 쌍따옴표(quotes, "")를 사용합니다.
  4. 마지막 property-value에 대해서는 쉼표를 사용하지 않습니다.
  5. 정의 후에는 닫는 괄호 뒤에 세미콜론을 붙입니다.

예시

var soryeongk = {
  name: "soryeong",
  friend: "secret",
  SOPT: 28,
  hairColor: "gray"
};

6. 기타 규칙

6-1. 글자수

한 줄에 80글자를 넘지 않도록 합니다.

6-2. 파일명, 스크립트명

외부 스크립트 로딩을 단순화하기 위하여 간단한 이름으로 짓습니다.
별도의 타입 속성은 불필요합니다.

7. 함수선언문 & 함수표현식

7-1. 함수 선언문

대부분의 다른 언어에서도 사용하는 방식으로 함수의 선언 후 그 함수를 사용하는 것입니다.

예시

//형식 갖추기
function 함수명(인자) {
  함수의 내용;
}
함수명(인자);

//예시 코드
function myFunc() {
  alert("함수선언문입니다.");
}
myFunc();

7-2. 함수 표현식

자바스크립트는 함수를 특별한 종류의 값으로 취급합니다. 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급하지는 않습니다.
자바스크립트는 특이하게도 선언과 함께 변수에 함수를 할당하거나 참조할 수 있는데, 이러한 방식을 함수 표현식이라고도 합니다.
함수 표현식은 함수 선언문의 방식과는 달리 호이스팅(Hoisting)의 영향을 받지 않습니다.

아래와 같이 변수에 익명함수를 만든 후 새로운 변수에서 이를 참조하고 새로운 이름으로 사용하는 것이 가능합니다.

변수타입 함수/변수명 = (인자) => 함수내용;

const firstFunc = function() {
  alert("함수표현식입니다. (참조형)");
}
const funcName = firstFunc; //괄호가 들어가면 안된다.
funcName(); //여기는 괄호가 들어간다.

혹은 아래와 같이 화살표 함수로 변수와 함수의 선언과 동시에 정의가 가능합니다.

const secondFunc = () => alert("함수표현식입니다. (화살표함수)");

개인적으로는 다른 함수를 변수가 참조할 수 있다는 점에서 C언어의 포인터와도 닮았고, 익명함수라는 점에서 Python의 lambda와도 퍽 닮아있다고 생각했습니다. :-)

7-3. 무엇을 더 지향해야 하는가?

아직 명확한 답을 찾지는 못했습니다. 무엇이 무조건적으로 권장된다는 의견은 없는 것으로 알고 있습니다.

함수 선언문은 fucntion f(...) {...};와 같이 변수와 구분되는 식별자를 통해 함수를 더 빠르게 파악할 수 있다는 점에서 가독성이 좋다는 큰 장점이 있습니다.
하지만 자바스크립트는 동일한 이름의 함수를 재할당하는 것이 가능하여, 호이스팅을 제대로 이해하지 못하고 있거나 단순한 개발자의 실수로 undefined오류를 낼 가능성이 높아진다.는 단점이 있습니다.
함수 표현식은 이와 달리 호이스팅에 영향을 받지 않아 함수를 선언하기 전에도 자유롭게 함수를 선언/정의할 수 있다는 장점이 있습니다. 또한, 이미 만들어진 함수를 다른 이름으로 불러와 사용하는 것도 가능하다는 장점이 있습니다.

profile
soryeongk
웹 프론트엔드 개발자 령이의 어쩌구 저쩌구
이전 포스트

[JavaScript] 기초잡기

다음 포스트

[JavaScript] DOM과 JSON에 대하여

0개의 댓글