[번역] 구글의 javascript 스타일 가이드

wonsama (78)in #wdev • 6 years ago (edited)

출처 : https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b

1. tab 대신에 space 를 사용

space 2칸을 추천함.


// 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`;