자바스크립트 스타일 가이드 - 네이밍 컨벤션 편

Myungho·2020년 4월 1일

JavaScript Style Guide coding convention naming convention 네이밍 컨벤션 스타일 가이드 자바스크립트 코딩 스타일 코딩 컨벤션

자바스크립트 스타일 가이드

목록 보기

2/2

본 글은 아래의 자바스크립트 코딩 스타일 가이드를 참고 및 번역하여 작성되었습니다.
의역 및 잘못된 해석으로 잘못된 정보가 포함될 수 있으니 원문과 함께 참고해주세요.
Google
Airbnb
Nexedi
W3S School

네이밍 기본 🏠

단일 글자로 이름을 짓지 않고 이름을 통해 쓰임새를 알 수 있도록 한다.
```
// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}
```

이름의 맨 앞이나 맨 뒤쪽에 밑줄( _ )을 사용하지 않는다.

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

this를 변수의 값으로 사용하지 않는다. 필요하다면 화살표 함수(Arrow Function)이나 바인딩을 사용하라.

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// good
function bar() {
  return () => {
    console.log(this);
  };
}

가독성을 위해 약어는 모두 대문자 혹은 모두 소문자로 표기한다.

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [     
  // ...
];

// also good
const httpRequests = [
  // ...
];

// best
import TextMessageContainer from './containers/TextMessageContainer';

// best
const requests = [
  // ...
];

export되는 파일 내의 모든 상수는 모두 대문자로 표기한다.

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value'
};

이름에 복수형을 표기하지 않는다.

//bad
let delivery_notes = ["one", "two"];

// good
let delivery_note_list = ["one", "two"];

줄일말을 사용하지 않는다.

//bad
let del_note = 1;

// good
let delivery_note = 1;

파일 및 패키지 🎁

파일의 이름은 소문자로 표기한다.

// bad
LonDon.png
HELLOWORLD.pdf
APP.js

// good
london.png
helloworld.pdf
app.js

패키지의 이름은 lowerCamelCase로 표기한다.

// bad
my.examplecode.deepspace
my.example_code.deep_space

// good
my.exampleCode.deepSpace

파일의 이름은 default export의 이름과 일치해야한다.

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

변수 🌓

변수의 이름은 lowerCamelCase로 표기한다.
단, export되는 파일 내의 상수는 예외.

변수의 이름은 알파벳으로 시작해야한다.

// bad
let 123Number = 123;
let HELLO_WORLD = "Hello World";

// good
let number = 369;
let helloString = "Hello World";

함수 📤

함수는 lowerCamelCase로 표기한다.

// bad
function MyFunction() {...}

// good
function myFunction() {...}

함수의 이름은 동사 또는 동사구문으로 표기한다.

// bad
function whereIsCamera() { ... }

// good
function findCamera() { ... }
function getFoo() { ... } // getter
function setBar() { ... } // setter
function hasCoo() { ... } // booleans

함수를 default export할 때는 camelCase로 표기한다.
단, 함수의 이름이 파일의 이름과 구분되어야 한다.
```
function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;
```
함수 라이브러리를 export할 때는 PascalCase로 표기한다.
함수의 파라미터는 lowerCamelCase로 표기한다.
단, 한글자의 파라미터는 public 메소드에서는 사용하지 않는다.
```
// bad
function someFunction(SOMEVALUE, SOMEARRAY) { ... }

// good
function someFunction(someValue, someArray) { ... }
```
템플릿 함수의 파라미터는 모두 간결해야하고 한글자 또는 한단어여야 한다.
또, 모두 대문자로 표기한다.

객체 🎍

객체의 이름은 lowerCamelCase로 표기한다.

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

객체를 export할 때는 PascalCase로 표기한다.

const AirbnbStyleGuide = {
  es6: {
  },
};

export default AirbnbStyleGuide;

클래스 📇

클래스나 생성자의 이름은 PascalCase로 표기한다.

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

클래스의 이름은 명사 또는 명사구문으로 표기한다.
또한, 인터페이스의 경우 명사 대신 형용사 또는 형용사구문으로 표기할 수 있다.
클래스를 export할 때는 PascalCase로 표기한다.

마지막 3편에서는 1편에서 다루지 못했던 자바스크립트의 여러 스타일 가이드를 종합하여 다룹니다.
잘못된 내용이 있다면 코멘트 남겨주세요!

Myungho

자바스크립트로 개발하는 새내기입니다.

이전 포스트

자바스크립트 스타일 가이드 - 네이밍 컨벤션 편