Code Convention (Style Guide)

Airbnb Style Guide

Naming convention

단일 문자 이름 사용X, 이름 설명

// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}

객체, 함수, 인스턴스 이름 camelCase 사용

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

생성자나 클래스 이름을 지정할 때만 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',
});

 

문자열 큰 따옴표("") 사용

// bad
var key = 'naver';
var obj = {
  'key': '1'
}

// good
var key = "naver";
var obj = {
  "key": "1"
}

 

복수형 주석은 /** ... */ 을 사용, 단일행 주석은 // 을 사용

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...stuff...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */
function make(tag) {

  // ...stuff...

  return element;
}

변수 선언 const, let 사용

상수는 const, 변수를 다시 할당해야 하는 경우 let 사용

// ❌ bad
var firstName = 'George';
// ✅ good
const firstName = 'George';
-----------------------------
// ❌ bad
var shirtSize = 'large';
shirtSize = 'medium';
// ✅ good
let shirtSize = 'large';
shirtSize = 'medium';

리터럴 선언 사용

// ❌ bad
const person = new Object();
object.firstName = 'George';
// ✅ good
const person = {
  firstName: 'George',
};
-----------------------------
// ❌ bad
const people = new Array();
// ✅ good
const people = [];

 

// ❌ bad
const firstName = 'George';
const person = {
  firstName: firstName
};
// ✅ good
const firstName = 'George';
const person = { firstName };

객체 구조 분해 할당

속성을 반복적으로 사용해야 하는 경우 구조 분해 할당

// ❌ bad
const getFullName = (user) => {
  const firstName = user.firstName;
  const lastName = user.lastName;
  // ...
  return `${firstName} ${lastName}`;
};
// ✅ good
const getFullName = (user) => {
  const { firstName, lastName } = user;
  // ...
  return `${firstName} ${lastName}`;
};

const user = { firstName: 'George', shirtSize: 'small' };
// ❌ bad - mutate user object
delete user.shirtSize;
// ✅ good
const { shirtSize, ...restOfUser } = user;

얕은 복사 객체에 spread 연산자(...) 사용

스프레드 연산자는 얕은 복사의 기본 방법

// ❌❌ very bad
const person = { firstName: 'George' };
// Mutating the person object
const copy = Object.assign(person, { shirtSize: 'small' });
// ❌ bad
const person = { firstName: 'George' };
// (*) We are not mutating person here
const copy = Object.assign({}, person, { shirtSize: 'small' });
// ✅ good
const person = { firstName: 'George' };
const copy = {
  shirtSize: 'small',
  ...person
};

문자열 연결에 템플릿 리터럴 사용

const firstName = 'George';
// ❌ bad
const greeting = ['How are you, ', firstName, '?'];
// ❌ bad
const greeting = 'How are you, ' + firstName + '?';
// ✅ good
const greeting = `How are you, ${firstName}?`;

인라인 콜백에 화살표 함수 사용

// ❌ bad
[1, 2, 3].map(function(entry) {
  return entry ^ 2;
});
// ✅ good
[1, 2, 3].map((entry) => {
  return entry ^ 2;
});

함수 인수에 기본 매개변수 사용

// ❌ bad
function(firstName, options) {
  options = options ?? {};
  // ...
}
// ✅ good
function(firstName, options = {}) {
  // ...
}