자바스크립트 스타일 가이드 요약(eslint-airbnb) - 1

2. 변수 선언

변수 선언은 var 대신 const와 let을 사용하라.

2-1. const : 해당 js파일에서 상수 선언 시 사용(prefer-const, no-const-assign)

2-2. let : 변경이 가능해야하는 변수일 경우 사용(no-var)

 

3. Object

3-1. Object 생성 시 리터럴을 사용하라.(no-new-object)

// bad
const item = new Object();

// good
const item = {};

3-2. Object에 동적으로 원소명를 정해야 할 경우

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-3. Object 메서드 작성법(object-shorthand)

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

3-4. Object의 원소 작성법(object-shorthand)

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good (shorthand끼리 모아라)
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

3-5. 따음표는 유효하지 않은 식별자명일 경우만 사용한다(quote-props)

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

3-7. Object가 다른 Object에 추가되어야 할 경우

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

 4. 배열(Arrays)

4-1. 리터럴 구문을 사용하여 배열을 생성하라.

// bad
const items = new Array();

// good
const items = [];

4-2. 배열에 원소를 추가할 경우 push 메서드를 사용하라.

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

4-3. 배열을 복사할 경우

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

4-4. Object를 Array로 전환할 경우

const foo = document.querySelectorAll('.foo');

// good (얕은 복사)
const nodes = Array.from(foo);

// best
const nodes = [...foo];

4-5. 배열 콜백 메서드를 사용할 경우 return을 명시하라(array-callback-return)

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => x + 1);

// bad - no returned value means `acc` becomes undefined after the first iteration
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
});

// good
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  return flatten;
});

// bad
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

4-8. 여러 줄이 필요한 배열일 경우 bracket는 줄바꿈을 해라.

// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];