출처 : https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b
1. tab 대신에 space 를 사용
// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}
2. 세미콜론은 필요
// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')
// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
jedi.father = 'vader';
});
3. ES6 모듈은 아직사용하지 말것
- 내보내기(export) 및 가져오기(import) 키워드 사용금지
- 표준화 된 이후 사용하기 바랍니다.
// Don't do this kind of thing yet:
//------ lib.js ------
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
4. 수평 정렬은 권장되지 않음 (금지는 아님)
// bad
{
tiny: 42,
longer: 435,
};
// good
{
tiny: 42,
longer: 435,
};
5. var 는 더이상 사용하지 말것
- 모든 지역 변수를 const 또는 let으로 선언하십시오.
- 변수를 재 할당해야하는 경우가 아니면 const를 사용하십시오.
- var 키워드는 사용하지 않아야합니다.
// bad
var example = 42;
// good
let example = 42;
6. 화살표함수(=>) 를 사용 바랍니다.
- 화살표 함수는 간결한 구문을 제공하고 이에 대한 많은 어려움을 수정합니다.
- 함수 키워드보다 화살표 함수를 선호합니다.
- 특히 중첩 된 함수의 경우 유용합니다.
// 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;
});
7. 연결 대신 템플릿 문자열 사용
- 여러 문자열이 관련되어있는 경우 특히 복잡한 문자열 연결에 대해 템플릿 문자열 (`로 구분)을 사용하십시오.
// 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}?`;
}
8. 긴 문자열에는 줄 연속을 사용하지 마십시오.
- ES5에서는 이것을 허용하지만 슬래시 뒤에 공백이 오는 경우에는 까다로운 오류가 발생할 수 있습니다.
// 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.';
9. for 반복문에서 “for… of” 는 선호 되는 타입입니다.
- for ... in 루프는 객체에 더 좋았고
- for ... 배열에 더 적합하다고 생각했습니다.
for ... of 더 알아보기
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
10. eval 을 사용하지 마세요
- eval 또는 Function (... 문자열) 생성자를 사용하지 마십시오 (코드 로더 제외).
- 이러한 기능은 잠재적으로 위험하며 단순히 CSP 환경에서 작동하지 않습니다.
// 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
11. 상수는 밑줄로 구분 된 ALL_UPPERCASE (대문자+언더스코어로만 구성) 로만 명명한다.
// bad
const number = 5;
// good
const NUMBER = 5;
12. 큰 따옴표가 아닌 작은 따옴표 사용
- 팁 : 문자열에 작은 따옴표 문자가 포함되어 있으면 따옴표를 이스케이프하지 않아도되도록 템플릿 문자열을 사용하는 것이 좋습니다.
// 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`;
마지막으로 ...
- 이것들은 명령이 아닙니다. Google은 많은 기술 대기업 중 하나 일뿐입니다.
- 개인적으로 Airbnb의 사양이 Google보다 더 매력적이라고 생각합니다.
- 이러한 특정 규칙을 취하는건 모든 종류의 코드를 작성할 때 문체의 일관성을 염두에 두는 것이 중요합니다.
