분류 javascript

자바 스크립트 명명 규칙

컨텐츠 정보

  • 조회 702 (작성일 )

본문

JavaScript 명명 규칙을 예로 들어 소개합니다. 

JavaScript의 변수, 함수, 클래스 또는 구성 요소의 이름을 지정할 때 상식을 제공합니다. 

아무도 이러한 명명 규칙을 시행하지는 않지만 JS 커뮤니티에서 표준으로 널리 채택되고 있습니다.


https://www.robinwieruch.de/javascript-naming-conventions 


자바스크립트 명명 규칙 : 변수 


JavaScript 변수는 대소 문자를 구분합니다. 따라서 소문자와 대문자가 있는 JavaScript 변수는 다릅니다.


var name = 'Robin Wieruch';
var Name = 'Dennis Wieruch';
var NAME = 'Thomas Wieruch';
console.log(name);
// "Robin Wieruch"
console.log(Name);
// "Dennis Wieruch"
console.log(NAME);
// "Thomas Wieruch"

JavaScript 변수는 자기 설명적이어야 합니다. 변수에 추가 문서에 대한 주석을 추가 할 필요는 없습니다.


// bad
var value = 'Robin';
// bad
var val = 'Robin';
// good
var firstName = 'Robin';

대부분의 경우 선행 소문자가 있는 camelCase 변수 이름으로 선언 된 JavaScript 변수를 찾을 수 있습니다.


// bad
var firstname = 'Robin';
// bad
var first_name = 'Robin';
// bad
var FIRSTNAME = 'Robin';
// bad
var FIRST_NAME = 'Robin';
// good
var firstName = 'Robin';

JavaScript constants, privates 및 classes/components에는 예외가 있습니다. 나중에 살펴 보겠습니다. 그러나 일반적으로 JavaScript 변수 (문자열, 부울 또는 숫자뿐만 아니라 객체, 배열 또는 함수)는 camelCase 변수 이름으로 선언됩니다.


다양한 케이스 스타일에 대한 간략한 개요 :

  • camelCase (used in JS)
  • PascalCase (used in JS)
  • snake_case
  • kebab-case

자바스크립트 명명 규칙 : BOOLEAN 


접두사는 is, are 또는 has이므로 모든 JavaScript 개발자가 부울을 다른 변수와 구별하는 데 도움이 됩니다.


// bad
var visible = true;
// good
var isVisible = true;
// bad
var equal = false;
// good
var areEqual = false;
// bad
var encryption = true;
// good
var hasEncryption = true;

문자열과 정수와 달리, 낙타 경우로 작성된 것 외에도 JavaScript 부울 명명 규칙에 대한 또 다른 소프트 규칙으로 볼 수 있습니다.


자바스크립트 명명 규칙 : 함수 


JavaScript 함수도 camel case로 작성됩니다. 또한 함수 이름에 접두사로 동사를 지정하여 실제로 함수가 수행 중인 작업을 알려주는 것이 가장 좋습니다.


// bad
function name(firstName, lastName) {
return `${firstName} ${lastName}`;
}
// good
function getName(firstName, lastName) {
return `${firstName} ${lastName}`;
}

접두사로 사용되는 이 동사는 무엇이든 가능합니다 (예 : get, fetch, push, apply, calculate, compute, post). 좀 더 자기 설명적인 JavaScript 변수를 갖는 것으로 고려해야 할 또 다른 소프트 규칙입니다.


자바스크립트 명명 규칙 : 클래스 


JavaScript 클래스는 다른 JavaScript 데이터 구조와 달리 PascalCase로 선언됩니다.


class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');

클래스의 새 인스턴스를 인스턴스화하기 위해 JavaScript 생성자가 호출 될 때마다 클래스가 Pascal Case로 선언되었으므로 클래스 이름이 Pascal Case에 표시되어야 합니다.


자바스크립트 명명 규칙 : 구성 요소(COMPONENT) 


컴포넌트는 JavaScript의 모든 곳에 있는 것이 아니라 React와 같은 프론트 엔드 프레임워크에서 흔히 볼 수 있습니다. 컴포넌트는 JavaScript 클래스처럼 인스턴스화되었지만 DOM에 추가되기 때문에 Pascal Case로도 널리 선언됩니다.


// bad
function userProfile(user) {
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
}
// good
function UserProfile(user) {
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
}

구성 요소를 사용하면 첫 글자가 항상 대문자로 작성되므로 기본 HTML 및 웹 구성 요소와 구별됩니다.


<div>
<UserProfile
user={{ firstName: 'Robin', lastName: 'Wieruch' }}
/>
</div>

자바스크립트 명명 규칙 : 메소드(METHODS) 


JavaScript 함수와 동일하게 JavaScript 클래스의 메소드는 camelCase로 선언됩니다.


class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return `${this.firstName} ${this.lastName}`;
}
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
console.log(me.getName());
// "Robin Wieruch"

자바스크립트 함수와 동일한 규칙이 적용됩니다 (예 : 메소드 이름을 보다 자기 설명적으로 만들기 위해 동사를 접두어로 추가합니다.


자바스크립트 명명 규칙 : PRIVATE 


자바스크립트에서 변수/함수/메소드 앞에 underscore (_)을 찾을 수는 없습니다. 하나만 보이면 private인 것입니다. JavaScript로 실제로 적용 할 수는 없지만 private로 선언하면 사용 방법 또는 사용하지 않아야 하는 방법에 대해 알려줍니다.


예를 들어, 클래스내의 private method는 클래스의 의해 사용되지만 클래스의 인스턴스에서는 사용하지 않아야 합니다.


class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.name = _getName(firstName, lastName);
}
_getName(firstName, lastName) {
return `${firstName} ${lastName}`;
}
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
// good
var name = me.name;
console.log(name);
// "Robin Wieruch"
// bad
name = me._getName(me.firstName, me.lastName);
console.log(name);
// "Robin Wieruch"

private variable/function는 JavaScript 파일에서도 발생할 수 있습니다. 이는 변수 / 함수를 이 파일 외부에서 사용하지 말고 내부적으로만 동일한 파일 내의 다른 함수에 대한 추가 비즈니스 로직을 계산해야 함을 의미 할 수 있습니다.


자바스크립트 명명 규칙 : 상수 


마지막으로, 대문자로 작성된 JavaScript에는 상수 (변하지 않는 변수로 의도됨)가 있습니다 (대문자).


var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS;

변수에 변수 선언 이름에 단어가 두 개 이상 있으면 underscore (_)을 사용합니다.


var DAYS_UNTIL_TOMORROW = 1; 


일반적으로 JavaScript 상수는 JavaScript 파일 맨 위에 정의됩니다. 이전에 암시 된 것처럼 기본 데이터 구조에 대한 변수의 const 선언을 제외하고 아무도 변수를 변경하지 않도록 강요하지 않지만 대문자로 명명하면 변수를 피할 수 있습니다.


자바스크립트 명명 규칙 : 글로벌 변수 


JavaScript 변수는 모든 컨텍스트에 액세스 할 수 있는 경우 전체적으로 정의됩니다. 컨텍스트는 변수가 선언 / 정의 된 JavaScript 파일에 의해 정의되는 경우가 많지만 소규모 JavaScript 프로젝트에서는 전체 프로젝트 일 수 있습니다. 전역 JavaScript 변수에 대한 특별한 명명 규칙은 없습니다.

  • 글로벌 JavaScript 변수는 프로젝트 / 파일 맨 위에 선언됩니다
  • 글로벌 JavaScript 변수는 변경 가능한 경우 camelCase로 작성됩니다.
  • 글로벌 JavaScript 변수는 변경할 수 없는 경우 대문자로 작성됩니다.

자바스크립트 명명 규칙 : UNDERSCORE 


JavaScript 변수 이름의 밑줄과 대시는 어떻습니까? camelCase 및 PascalCase는 주로 JS에서 고려되므로 밑줄은 개인 변수 또는 상수에만 거의 사용되지 않습니다. 때때로 데이터베이스나 API와 같은 타사로부터 정보를 얻을 때 밑줄을 찾을 수 있습니다. 밑줄을 볼 수 있는 또 다른 시나리오는 사용되지 않은 함수 매개 변수이지만, 해당 매개 변수를 보지 않아도 걱정하지 않아도 됩니다. ;-)


자바스크립트 명명 규칙 : DASH 


JavaScript 변수의 대시도 상식이 아닙니다. 그것은 단지 일을 더 어렵게 만듭니다. 객체에서 사용하는 것과 같습니다.


// bad
var person = {
'first-name': 'Robin',
'last-name': 'Wieruch',
};
var firstName = person['first-name'];
// good
var person = {
firstName: 'Robin',
lastName: 'Wieruch',
};
var firstName = person.firstName;

변수 선언에 대시를 직접 사용할 수도 없습니다.


var first-name = 'Robin';
// Uncaught SyntaxError: Unexpected token '-'

그래서 피하는 것이 좋습니다.


자바스크립트 명명 규칙 : FILES 


JavaScript에는 파일 이름을 지정하는 두 가지 전략인 PascalCase와 kebab-case가 있습니다. JavaScript 프론트 엔드 애플리케이션에서 컴포넌트 이름 지정을 위한 PascalCase (예 : React 컴포넌트)가 종종 표시됩니다.


- components/
--- user/
----- UserProfile.js
----- UserList.js
----- UserItem.js
--- ui/
----- Dialog.js
----- Dropdown.js
----- Table.js

반대로 JavaScript 백엔드 애플리케이션에서 kebap-case는 상식입니다.


- routing/
--- user-route.js
--- messages-route.js

camelCase 이름도 볼 수 있지만 PascalCase (죄송한 프론트 엔드 애플리케이션)와 유사하게 운영 체제가 다르게 처리하여 버그로 이어질 위험이 있습니다. 그래서 kebap-case를 고수하는 것이 JavaScript에서 파일 이름의 표준이 되어야 합니다.


명명 규칙을 위해 여기에서 설명하지 않은 JavaScript 코드 스타일 및 형식에 대한 자세한 내용을 보려면 ESLintPrettier for JavaScript를 확인하십시오.