(JAVASCRIPT) 변수 이름을 효과적으로 짓는 방법

자바스크립트에서 변수의 이름을 짓는것은 쉬워 보이지만, 아주 중요한 부분중에 하나입니다. 오늘은 변수의 이름을 어떻게 효과적으로 짓는지에 대해 알아보도록 하겠습니다.

변수 이름 짓는 방법

만약 let a = '서근'; 과 같이 변수 이름을 아무 의미 없이 a 로 지어주게 되면, 나중에 찾기도 힘들고 연관성이 전혀 없기 때문에 변수 이름에는 최악인 변수명이라고 볼 수 있습니다.

 

Naming Variables란 저장된 값을 잘 나타낼 수 있는 이름이라는 의미를 지니고 있습니다.

 

즉, 이름이 구체적이고 연관성이 있으면 좋겠죠.

 

mdn web docs_ 라는 사이트에 변수와 변수 이름 짓는 방법에 대해 아주 잘 설명되어있는데, 이 사이트를 참고하여 작성되었습니다.

사용하면 안 되는 변수 이름 ( 예약어 )

변수 이름을 사용할 때는 사용하면 안 되는 변수 이름들이 존재합니다.

ECMAScript 2015 기준 예약 키워드
break	else	new
case	export	return
catch	extends	super
class	finally	switch
const	for	this
continue	function	throw
debugger	if	try
default (en-US)	import	typeof
delete	in	var
do	instanceof	void
while	with	yield

---

확장 예약 키워드
enum	private
implements	protected
interface	public
let	static
package	await

---

구형 표준의 확장 예약 키워드
abstract	int
boolean	long
byte	native
char	short
double	synchronized
final	throws
float	transient
goto	volatile

변수 규칙

1. 라틴문자 ( a-z, A-Z, 0-9 )

 

2. 대소문자 구분

 

3. 카멜케이스 사용 (someVariable)

- 변수에는 단어가 두 개 이상일 시에 이어지는 첫 글자가 대문자로 시작되는 카멜케이스(Camel Case)를 사용하는 것을 추천합니다.

• Camel Case: 함수, 메서드, 인스턴스의 이름의 첫 글자를 소문자로 사용하는 소문자 카멜 케이스를 사용합니다.
  ex) someMethodName

4. 변수명은 반드시 영어로

 

5. 예약어 사용 금지 ( if, let, static... )

 

6. 숫자로 시작 금지

 

7. 특수문자 금지 ( _ 및 $ 는 가능 )

 

8. 아이콘 사용 금지

의미 있는 변수 이름

// ⛔️ 나쁜 예시
let text = '서근';
console.log(text)

// 😀 좋은 예시
let myName = '서근';
console.log(myName)

/*=================*/

// ⛔️ 나쁜 예시
let text1;
let text2;
let text3;
let 1;
let _12;
let myage;

// 😀 좋은 예시
let myAge;

let colorMainFont;
let colorBackground;
let colorBrand;

let videoMain;
let videoGuest;
let videoFooter;

위 코드의 하단부를 살펴보면 중요한 키워드를 앞으로 뺀것을 확인할 수 있습니다. color 또는 video등을 앞으로 뺀다면, 코드에서 color 또는 video를 작성하기만 해도 그에 관련된 키워드들이 배열되기 때문에 코드 작성 시 수월합니다.

 

또, 여러개의 변수를 특정 키워드 뒤에 숫자로 구분하는것은 하지 않는것이 좋습니다.

// ⛔️ 나쁜 예시
let text1;
let text2;
let text3;

let color1;
let color2;
let color3;

---

오늘은 이렇게 변수의 이름을 어떻게 효과적으로 짓는지에 대해 알아보았습니다.

 

읽어주셔서 감사합니다 🤟

---

참고 문헌 REFERENCE

Lexical grammar - JavaScript | MDN