본 글은 아래의 자바스크립트 코딩 스타일 가이드를 참고 및 번역하여 작성되었습니다.
의역 및 잘못된 해석으로 잘못된 정보가 포함될 수 있으니 원문과 함께 참고해주세요.
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편에서 다루지 못했던 자바스크립트의 여러 스타일 가이드를 종합하여 다룹니다.
잘못된 내용이 있다면 코멘트 남겨주세요!