자바스크립트 네이밍을 효율적으로 작성하기

 

 

시작하기에 앞서

최근 시작한 프로그래머스 바닐라 JS 첫 주차를 수강하며 네이밍 규칙을 정리할 겸 번역한다.

https://school.programmers.co.kr/learn/courses/14723

[스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

기본적으로 에어 BNB 네이밍 컨벤션을 알고 있다는 전재 하에 작성되었습니다.

 

 

1. Variables (변수)

 

// bad
var value = 'Robin';

// bad
var val = 'Robin';

// good
var firstName = 'Robin';

자바스크립트 변수는 네이밍 자체로 설명적으로 따로 주석없이 내용을 파악할 수 있어야 합니다.

 

// bad
var firstname = 'Robin';

// bad
var first_name = 'Robin';

// bad
var FIRSTNAME = 'Robin';

// bad
var FIRST_NAME = 'Robin';

// good
var firstName = 'Robin';

대부분의 경우 선행 소문자가 있는 명명규칙인 camelCase로 작성하는 것이 바람직합니다.

단 일부 클래스 , 함수등에서 예외적인 규칙이 있음으로 하단에서 따로 언급하겠습니다.

 

2. Boolean (불리언)

// bad
var visible = true;

// good
var isVisible = true;



// bad
var equal = false;

// good
var areEqual = false;




// bad
var encryption = true;

// good
var hasEncryption = true;

is , are , has와 같은 접두사는 변수를 보고 이 값이 부울 값 (True or False) 의 값을 가짐을 판단하는 좋은 척도입니다.

 

 

3. Function (함수)

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

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

함수 또한 마찬가지로 camelCase로 선언하는 것이 바람직합니다. 또한 한가지 팁으로

접두사에 동사를 지정하여 함수가 수행하는 작업을 실제로 알려주는 것이 바람직합니다.

 

ex) get , fetch , push , apply , compute , post 등등

 

 

4. Class (클래스)

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

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

예외적으로 자바스크립트의 클래스의 경우 다른 네이밍 규칙과 다르게 PascalCase를 사용하여 명명해야 합니다.

 

 

 

5. Component (컴포넌트)

// 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>
  );
}

클래스와 마찬가지로 컴포넌트 또한 PascalCase를 사용합니다. 흔히 사용되는 프레임워크인

React에서 이와 같은 구조를 주로 사용합니다. 이경우 기본 HTML 및 웹 구성요소와 구분되기도 합니다.

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

 

6. Method (매서드)

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"

 

 클래스의 내부 매서드의 경우 camelCase로 작성됩니다. 이 규칙은 위에서 다룬 함수와 마찬가지로

동사 , is ,are , has 등을 접두사로 활용하여 더 쉽게 명명할 수 있습니다.

 

7. Private (비공개)

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"

자주 사용되지 않지만 사용자에게 공개하고 싶지 않은 비공개 값의 경우 언더바 (_)를 접두사에

추가하여 사용하는 경우가 있습니다.

 

8. Constant (상수)

const SECONDS = 60;
const MINUTES = 60;
const HOURS = 24;

const DAY = SECONDS * MINUTES * HOURS;

const DAYS_UNTIL_TOMORROW = 1;

 

변하지 않는 상수 혹은 고정값을 넣는 경우 UPPERCASE를 사용합니다.

마찬가지로 .env등에 들어가는 Api 키 등에서도 이와 같은 규칙을 사용합니다.

1 단어 이상인 경우 단어와 단어 사이에 언더바 (_)를 사용합니다.

 

어지간하지 않은 한 이 값들은 변경되지 않으며 변경을 원하지 않는 경우 사용합니다.

 

 

9. Files (파일)

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

일반적인 경우 PascalCase를 사용하여 파일 이름을 명명합니다. 주로 프론트엔드 / 리엑트 환경에서

이와 같은 특징을 보이며 백엔드 환경에서는 kebab-case를 사용하는 경우도 있으나

오류를 피하기 위해 되도록 PascalCase를 사용하여야 합니다.

 

 

 

 

참고

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

JavaScript Naming Conventions