JavaScript Naming Conventions

1. JAVASCRIPT NAMING CONVENTIONS: VARIABLES(변수)

• 자바스크립트 변수는 대소문자를 구분한다. NAME /= Name

• 변수에 추가 주석을 달 필요가 없을 정도로 변수명이 직관적이어야 한다.

• 대부분 소문자로 시작하는 camelCase 변수 이름을 사용한다.

• 자바스크립트 상수, privates, 클래스/컴포넌트 요소에 대한 예외는 있다

  다양한 케이스→ camelCase, PascalCase, snake_case, kebab-case

2.JAVASCRIPT NAMING CONVENTIONS: BOOLEAN(불린)

is, are, has 와 같은 접두사는 불값을 다른 변수와 구별하는데 도움이 된다.

// bad
var visible = true;

// good
var isVisible = true;

// bad
var equal = false;

// good
var areEqual = false;

// bad
var encryption = true;

// good
var hasEncryption = true;

3.JAVASCRIPT NAMING CONVENTIONS: FUNCTION(함수)

자바스크립트 함수도 카멜케이스로 작성된다. 또한 함수 이름에 동사를 접두사로 지정하여 수행하는 작업을 알려주는 것이 좋다.

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

// good
function getName(firstName, lastName) {**// here!!
  **return `${firstName} ${lastName}`;
}**

접도사로서의 동사는 무엇이든 될 수 있다.

EX.) get, push, apply, calculate, compute, post

4.JAVASCRIPT NAMING CONVENTIONS: CLASS(클래스)

Class는 다른 자바스크립트 데이터 구조와는 달리 PascaCase로 선언된다.

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

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

자바스크립트 생성자가 호출될때 마다 클래스 이름은 PascalCase로 나타나야 한다. 클래스가 처음에 PascalCase로 선언되었기 때문이다.

5. JAVASCRIPT NAMING CONVENTIONS: COMPONENT(컴포넌트)

리액트와 같은 프론트엔드 프레임워크에서 많이 발견되는 컴포넌트는 DOM에 추가되기 때문에 자바스크립트 클래스처럼 PascalCase로 보통 선언된다.

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

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

첫 글자가 항상 대문자로 시작하기 때문에 HTML 요소와 구별된다.

6. JAVASCRIPT NAMING CONVENTIONS: METHODS

함수와 동일하게 클래스의 메서드는 camelCase로 선언된다.

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

함수와 동일한 규칙으로 동사를 접두사로 사용하여 메서드 이름을 보다 직관적이게 만든다.

7. JAVASCRIPT NAMING CONVENTIONS: PRIVATE

변수/함수/메서드 앞에 밑줄이 있는 경우는 거의 없다. 혹시나 있다하면 그건 비공개로 의도된 것이다. 실제로 자바스크립트로 시행할 수는 없지만 비공개로 선언하면 어떻게 사용해야 하는지 또는 사용하지 말아야 하는지 알 수 있다.

예를 들어 클래스 private 메서드는 클래스 내부에서만 사용해야 하지만 클래스의 인스턴스에서는 사용하지 말아야 한다.

**class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.name = _getName(firstName, lastName);// here!!
  }

  _getName(firstName, lastName) {// here!!
    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);// here!!
console.log(name);
// "Robin Wieruch"**

8. JAVASCRIPT NAMING CONVENTIONS: CONSTANT

대문자로 작성된 상수가 있다.

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

var DAY = SECONDS * MINUTES * HOURS;

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

var DAYS_UNTIL_TOMORROW = 1;

일반적으로 자바스크립트 상수는 js 파일 맨 위에 정의된다. 그리고 대문자로 이름을 짓는 것은 피하도록 한다.

9. JAVASCRIPT NAMING CONVENTIONS: GLOBAL VARIABLE

모든 컨텍스트에 접근할 수 있는 경우 자바스크립트 변수는 전역적으로 정의된다.

• 전역변수는 파일의 맨 위에 선언된다.
• 변수는 변경 가능한 경우 camelCase로 작성된다.
• 변수가 변경할 수 없는경우 대문자로 작성된다.

10. JAVASCRIPT NAMING CONVENTIONS: UNDERSCORE

자바스크립트의 밑줄과 대시, 밑줄은 보통 데이터베이스나 API와 같은 제 3자로부터 정보를 얻을 때 표시된다. 또 다른 곳으로는 함수 매개변수에 사용된다.

11. JAVASCRIPT NAMING CONVENTIONS: FILES

PascalCase와 kebab-case 두가지 파일 이름 지정 방법이 있다. 보통은 파스칼을 많이 쓴다.

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

반대로 백엔드에서는 kebab-case를 보통 사용한다.

[출처]
https://www.robinwieruch.de/javascript-naming-conventions/