[Javascript] 식별자 네이밍 규칙 (JavaScript Coding Conventions)

안녕하세요. 성조입니다.

최근에 자바스크립트를 학습하는 데 있어서 많은 시간을 투자하고 있습니다.

"약간만 아는 것은 알지 못하는 것과 다름이 없다"라는 얘기를 듣고 스스로 질문을 던졌을 때 약간만 알고 사용하는 개념들을 조금 더 자세히 잡고 가는 것이 좋다고 판단하고 정리하게 됐습니다.

클린 코드를 만드는 데 있어서 가독성의 중요한 것도 작성하려 합니다.

언어별 규칙이 다양하지만, 이번 포스팅은 자바스크립트를 기준으로 작성됐습니다.

 

 

---

식별자(identifier)

식별자(identifier)라는 단어는 생소할 수 있다.

식별자는 클래스, 함수, 배열, 변수 등의 어떠한 값들을 구별해서 식별할 수 있는 고유한 이름이다.

변수의 경우. "메모리에 데이터값을 저장하고, 위치를 할당받은 공간."이라 간단하게 정의할 수 있다.

변수명은 그 공간의 이름을 뜻하는 것이다.

 

 

 

네이밍 컨벤션(Naming Convention)이란?

직역하면 말 그대로 이름 규칙이라고 말할 수 있다.

이름 규칙을 갖는 이유는 소스 코드의 가독성을 위해서 필요한 것이다.

정식 프로젝트의 협업 진행하게 된다면 코딩 컨벤션(Coding Conventions)이라 하여 코딩 규칙을 정하게 된다.

이런 코딩 규칙은 프로그래밍 스타일, 프로그래밍 언어, 파일 구성, 들여쓰기, 주석, 선언, 명명 규칙, 원칙 등등 다양한 소프트웨어 공학 기법이 프로젝트 관리 측면에서 고품질, 생산성을 증대하기 위해서 필요한 요소 정의에 사용된다.

 

 

 

네이밍 컨벤션 종류

네이밍 컨벤션은 종류가 여러 개 존재하지만 자바스크립트(Javascript)에서는 대표적으로 4가지 방법이 사용된다.

/** 파스칼 케이스 (PascalCase) */
var NameRules

/** 카멜 케이스 (camelCase) */
var nameRules

/** 스네이크 케이스 (snake_case) */
var name_rules

/** 헝가리언 케이스 (typeHungarianCase) */
var strNameRules
var $domelem = Document.getElementsByName("domName") // DOM 노드
var observable$ = fromEvent(document, ) // ReactiveXJS 옵저버블

자바스크립트(Javascript)의 경우. 대체로 변수 또는 함수에 카멜 케이스를 생성자 함수, 클래스 이름에는 파스칼 케이스를 사용한다.

 

 

 

식별자 네이밍 규칙

자바스크립트(Javascript)에서는 다음과 같은 네이밍 규칙이 존재한다.

- 식별자는 문자, 숙자, 언더 스코어(_)와 특수문자에서는 유일하게 $이를 포함하여 사용할 수 있다.

(다른 특수문자는 사용할 수 없다. ex) ＃, ★, ※ ,...)

- 식별자는 숫자로 시작할 수 없다.

- 식별자는 예약어로 분리되는 이름들을 사용할 수 없다.

[ ex) break, if, void, with, try, var 등등 ]

- 변수는 쉼표(,)를 활용하여 여러 개를 한 번에 선언할 수 있다. 하지만 가독성이 낮아지는 선언이므로 가급적 지양한다.

 

 

---

 

작성하다 보니 막상 지향하는 스네이크 케이스 문법을 사용해서 코드를 구현했던 경험이 많이 있는 것 같습니다. MySQL에서도 다르겠지만 본인이 활용하고 있는 언어에 맞게 규칙을 명확하게 알아두고 시작하면 좋을 것 같다는 생각이 들었네요. Java도 동일하게 파스칼과 카멜 케이스를 활용하는 것으로 알고 있어서 헷갈리지 않게 종종 다시 읽어봐야겠습니다. ㅎㅎ

 

부족한 포스팅 읽어주셔서 감사드립니다.

혹여나 올바르지 못한 정보 전달이 있다면 언제든 댓글 부탁드리겠습니다!

다음 포스팅 때 뵙겠습니다!

 

- 참조 -

https://en.wikipedia.org/wiki/Coding_conventions

Coding conventions - Wikipedia

https://www.w3schools.com/js/js_conventions.asp

JavaScript Style Guide

https://zetawiki.com/wiki/%ED%97%9D%EA%B0%80%EB%A6%AC%EC%96%B8_%ED%91%9C%EA%B8%B0%EB%B2%95

헝가리언 표기법 - 제타위키

https://zetawiki.com/wiki/%EC%8A%A4%EB%84%A4%EC%9D%B4%ED%81%AC_%ED%91%9C%EA%B8%B0%EB%B2%95

스네이크 표기법 - 제타위키

https://zetawiki.com/wiki/%EC%B9%B4%EB%A9%9C%ED%91%9C%EA%B8%B0%EB%B2%95_camelCase,_%ED%8C%8C%EC%8A%A4%EC%B9%BC%ED%91%9C%EA%B8%B0%EB%B2%95_PascalCase

카멜표기법 camelCase, 파스칼표기법 PascalCase - 제타위키