원문:https://github.com/airbnb/javascript
JavaScript에 대한 대부분 합리적인 접근 방법
다른 스타일 가이드들
- 형(Types)
- 참조(References)
- 오브젝트(Objects)
- 배열(Arrays)
- 구조화대입(Destructuring)
- 문자열(Strings)
- 함수(Functions)
- Arrow함수(Arrow Functions)
- Classes & Constructors
- 모듈(Modules)
- 이터레이터와 제너레이터(Iterators and Generators)
- 프로퍼티(Properties)
- 변수(Variables)
- Hoisting
- 조건식과 등가식(Comparison Operators & Equality)
- 블록(Blocks)
- 코멘트(Comments)
- 공백(Whitespace)
- 콤마(Commas)
- 세미콜론(Semicolons)
- 형변환과 강제(Type Casting & Coercion)
- 명명규칙(Naming Conventions)
- 억세서(Accessors)
- 이벤트(Events)
- jQuery
- ECMAScript 5 Compatibility
- ECMAScript 6 Styles
- Testing
- Performance
- Resources
- In the Wild
- Translation
- The JavaScript Style Guide Guide
- Chat With Us About JavaScript
- Contributors
- License
-
1.1 Primitives: When you access a primitive type you work directly on its value.
-
1.1 Primitives: primitive type은 그 값을 직접 조작합니다.
string
number
boolean
null
undefined
const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9
-
1.2 Complex: When you access a complex type you work on a reference to its value.
-
1.2 참조형: 참조형(Complex)은 참조를 통해 값을 조작합니다.
object
array
function
const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9
-
2.1 Use
const
for all of your references; avoid usingvar
. -
2.1 모든 참조는
const
를 사용하고,var
를 사용하지 마십시오.Why? This ensures that you can't reassign your references, which can lead to bugs and difficult to comprehend code.
왜? 참조를 재할당 할 수 없으므로, 버그로 이어지고 이해하기 어려운 코드가 되는것을 방지합니다.
// bad var a = 1; var b = 2; // good const a = 1; const b = 2;
-
2.2 If you must reassign references, use
let
instead ofvar
. -
2.2 참조를 재할당 해야한다면
var
대신let
을 사용하십시오.Why?
let
is block-scoped rather than function-scoped likevar
.왜?
var
같은 함수스코프 보다는 오히려 블록스코프의let
// bad var count = 1; if (true) { count += 1; } // good, use the let. let count = 1; if (true) { count += 1; }
-
2.3 Note that both
let
andconst
are block-scoped. -
2.3
let
과const
는 같이 블록스코프라는것을 유의하십시오.// const and let only exist in the blocks they are defined in. // const 와 let 은 선언된 블록의 안에서만 존재합니다. { let a = 1; const b = 1; } console.log(a); // ReferenceError console.log(b); // ReferenceError
-
3.1 Use the literal syntax for object creation.
-
3.1 오브젝트를 작성할때는, 리터럴 구문을 사용하십시오.
// bad const item = new Object(); // good const item = {};
-
3.2 If your code will be executed in browsers in script context, don't use reserved words as keys. It won't work in IE8. More info. It’s OK to use them in ES6 modules and server-side code.
-
3.2 코드가 브라우저상의 스크립트로 실행될때 예약어를 키로 이용하지 마십시오. IE8에서 작동하지 않습니다. More info 하지만 ES6 모듈안이나 서버사이드에서는 이용가능합니다.
// bad const superman = { default: { clark: 'kent' }, private: true, }; // good const superman = { defaults: { clark: 'kent' }, hidden: true, };
-
3.3 Use readable synonyms in place of reserved words.
-
3.3 예약어 대신 알기쉬운 동의어를 사용해 주십시오.
// bad const superman = { class: 'alien', }; // bad const superman = { klass: 'alien', }; // good const superman = { type: 'alien', };
-
3.4 Use computed property names when creating objects with dynamic property names.
-
3.4 동적 프로퍼티명을 갖는 오브젝트를 작성할때, 계산된 프로퍼티명(computed property names)을 이용해 주십시오.
Why? They allow you to define all the properties of an object in one place.
왜? 오브젝트의 모든 프로퍼티를 한 장소에서 정의 할 수 있습니다.
function getKey(k) { return a `key named ${k}`; } // bad const obj = { id: 5, name: 'San Francisco', }; obj[getKey('enabled')] = true; // good const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true };
-
3.5 Use object method shorthand.
-
3.5 메소드의 단축구문을 이용해 주십시오.
// bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, };
-
3.6 Use property value shorthand.
-
3.6 프로퍼티의 단축구문을 이용해 주십시오.
Why? It is shorter to write and descriptive.
왜? 기술과 설명이 간결해지기 때문입니다.
const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { lukeSkywalker: lukeSkywalker, }; // good const obj = { lukeSkywalker, };
-
3.7 Group your shorthand properties at the beginning of your object declaration.
-
3.7 프로퍼티의 단축구문은 오브젝트 선언의 시작부분에 그룹화 해주십시오.
Why? It's easier to tell which properties are using the shorthand.
왜? 어떤 프로퍼티가 단축구문을 이용하고 있는지가 알기쉽기 때문입니다.
const anakinSkywalker = 'Anakin Skywalker'; const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { episodeOne: 1, twoJediWalkIntoACantina: 2, lukeSkywalker, episodeThree: 3, mayTheFourth: 4, anakinSkywalker, }; // good const obj = { lukeSkywalker, anakinSkywalker, episodeOne: 1, twoJediWalkIntoACantina: 2, episodeThree: 3, mayTheFourth: 4, };