Airbnb JavaScript Style Guide
react
사용하는 에어비엔비 스타일 가이드를 참고하자..
// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}
Every statement must be terminated with a semicolon.
// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')
// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
jedi.father = 'vader';
});
This practice is permitted, but it is generally discouraged by Google Style.
// bad
{
tiny: 42,
longer: 435,
};
// good
{
tiny: 42,
longer: 435,
};
Declare all local variables with either const
or let
.
Use const by default, unless a variable needs to be reassigned.
The var
keyword must not be used.
// bad
var example = 42;
// good
let example = 42;
화살표 함수(=>)
를 사용하자.Arrow functions
provide a concise syntax and fix a number of difficulties with this
.
Prefer arrow functions over the function
keyword, particularly for nested functions
// bad
[1, 2, 3].map(function (x) {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
Use template strings (delimited with `) over complex string concatenation, particularly if multiple string literals are involved.
Template strings may span multiple lines.
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}
// bad (sorry, this doesn't show up well on mobile)
const longString = 'This is a very long string that \
far exceeds the 80 column limit. It unfortunately \
contains long stretches of spaces due to how the \
continued lines are indented.';
// good
const longString = 'This is a very long string that ' +
'far exceeds the 80 column limit. It does not contain ' +
'long stretches of spaces since the concatenated ' +
'strings are cleaner.';
for ...in
루프는 객체에 더 좋고for ...of
루프는 배열에 더 적합하다고 생각한다.With ES6, the language now has three different kinds of for loops.
All may be used, though for-of
loops should be preferred when possible.
let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let entry of iterable) {
console.log(entry);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
eval
또는 Function(...string)
생성자를 사용하지 말자. (코드 로더 제외)Do not use eval
or the Function(...string)
constructor (except for code loaders).
These features are potentially dangerous and simply do not work in CSP environments.
// bad
let obj = { a: 20, b: 30 };
let propName = getPropName(); // returns "a" or "b"
eval( 'var result = obj.' + propName );
// good
let obj = { a: 20, b: 30 };
let propName = getPropName(); // returns "a" or "b"
let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a
Constant names use CONSTANT_CASE
: all uppercase letters, with words separated by underscores.
A notable exception to this rule is if the constant is function-scoped.
In this case it should be written in camelCase
.
// bad
const number = 5;
// good
const NUMBER = 5;
such as let a = 1, b = 2; are not used.
// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;
let b = 2;
let c = 3;
// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;