JavaScript 네이밍 규칙

변수

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';

자바스크립트 상수, privates, 클래스/구성 요소에 대한 예외가 있습니다. 이에 대해서는 나중에 살펴보겠습니다.

그러나 일반적으로 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 함수도 카멜 케이스로 작성됩니다. 또한 함수 이름에 동사를 접두사로 지정하여 함수가 수행하는 작업을 실제로 알려주는 것이 가장 좋습니다.

// 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 데이터 구조와 달리 PascalCase로 선언됩니다

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

var me = new SoftwareDeveloper('Robin', 'Wieruch');

클래스의 새 인스턴스를 인스턴스화하기 위해 JavaScript 생성자가 호출될 때마다 클래스 이름은 Pascal Case로 나타나야 합니다. 클래스가 처음에 Pascal Case로 선언되었기 때문입니다.

 

컴포넌트

컴포넌트는 JavaScript의 모든 곳에 있는 것은 아니지만 일반적으로 React와 같은 프런트엔드 프레임워크에서 발견됩니다. 컴포넌트는 일종의 인스턴스화되지만 대신 DOM에 추가되기 때문에 JavaScript 클래스처럼 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>

메소드

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());

여기에는 JavaScript 함수와 동일한 규칙이 적용됩니다. 동사를 접두사 --로 추가하여 메서드 이름을 보다 자기 설명적으로 만듭니다.

Private

JavaScript에서 변수/함수/메서드 앞에 밑줄(_)이 있는 경우는 거의 없습니다. 당신이 하나를 본다면, 그것은 비공개로 의도된 것입니다. 실제로 자바스크립트로 시행할 수는 없지만 비공개로 선언하면 어떻게 사용해야 하는지 또는 사용하지 말아야 하는지 알 수 있습니다.

예를 들어, 클래스의 프라이빗 메서드는 클래스 내부에서만 사용해야 하지만 클래스의 인스턴스에서는 사용하지 않아야 합니다.

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 변수/함수는 JavaScript 파일에서도 발생할 수 있습니다. 이는 변수/함수가 이 파일 외부에서 사용되어서는 안 되며 동일한 파일 내의 다른 기능에 대한 추가 비즈니스 논리를 계산하기 위해 내부적으로만 사용되어야 함을 의미할 수 있습니다.

 

상수

마지막으로 대문자(UPPERCASE)로 작성된 JavaScript의 상수(비변동 변수)가 있습니다.

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

var DAY = SECONDS * MINUTES * HOURS;

변수의 변수 선언 이름에 둘 이상의 단어가 있는 경우 밑줄(_)을 사용합니다.

var DAYS_UNTIL_TOMORROW = 1;

일반적으로 JavaScript 상수는 JavaScript 파일의 맨 위에 정의됩니다.

이전에 암시한 바와 같이 기본 데이터 구조에 대한 변수의 const 선언을 제외하고 여기에서 변수를 변경하지 않도록 강제하는 사람은 없지만 대문자로 된 이름은 이를 피하는 것이 좋습니다.

 

글로벌 변수

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

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

 

밑줄

JavaScript 변수 이름 지정에서 밑줄과 대시는 어떻습니까? camelCase와 PascalCase는 JS에서 주로 고려되기 때문에 밑줄이 전용 변수나 상수에 거의 사용되지 않는다는 것을 확인했습니다. 때때로 데이터베이스나 API와 같은 제3자로부터 정보를 얻을 때 밑줄이 표시됩니다. 

밑줄이 표시될 수 있는 또 다른 시나리오는 사용되지 않는 함수 매개변수입니다.

 

대시

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';

그렇기 때문에 피하는 것이 좋습니다.

 

파일

JavaScript에는 PascalCase와 kebab-case라는 두 가지 파일 이름 지정 전략이 있습니다.

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

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

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

또한 camelCase 이름이 표시되지만 PascalCase(미안한 프런트엔드 애플리케이션)와 유사하게 운영 체제가 이를 다르게 처리하여 버그가 발생할 수 있는 위험이 있습니다. 그렇기 때문에 kebab-case를 고수하는 것이 JavaScript에서 파일 이름의 표준이 되어야 합니다.

 

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