에어비엔비 코드컨벤션

3.8 Spread Operator 사용하기

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

const { a, ...noA } = copy; // noA => { b: 2, c: 3 } !
// 구조 분해 사용해서 a 없는 애 get

Object.assign 대신 Spread Operator 사용하기.

4.2 배열에 직접 값을 할당하지 말고 push( ) 사용

const someStack = [];

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

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

4.3 배열 복사 시 Spread Operator 사용

const itemsCopy = [...items];

4.4 iterable object를 배열로 변환 할 때 spread operator 사용하기

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

// good
const nodes = Array.from(foo);

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

4.5 유사배열 객체를 배열로 변환할 때는 Array.from 사용

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

const arr = Array.from(arrLike);

5.1 Destructuring로 간결하게 쓰기

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

bad 코드 -> 중복되는 코드가 두 줄
good 코드 -> 중복을 하나로 줄임
best -> function의 parameter 단에서 비구조화를 해버림.

5.3 여러 값을 반환하는 경우 배열 비구조화 대신 객체 비구조화 사용하기

// bad
function processInput(input) {
  // sth process...
  return [left, right, top, bottom];
}

// 반환되는 데이터의 순서를 생각해야하는 귀찮음이 발생
// 난 함수의 리턴값으로 나온 배열 중 left와 top 만을 원하는데 해당 index 위치를 기억해야 하니깐..
const [left, _, top] =processInput(input);

// good
function processInput(input) {
  // sth process...
  retrun { left, right, top, bottom };
}

// 객체 비구조화 사용해서 left와 top 만 쉽게 꺼내 쓰기
// 변수 명만 알고있으면 된다는 장점.
const { left, top } = processInput(input);

---

8.2 arrow function의 암시적 반환

// bad
[1,2,3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// good
[1,2,3].map(number => `A string containing the ${number}.`);

// good
[1,2,3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// good
// 객체의 배열로 만들고 싶을 때 괄호 안에 객체 암시적 리턴해줘야 함
[1,2,3].map((number, index) => ({
  [index]: number;
}));

8.4 명확성 일관성을 위해 callback의 arrow function 인자는 괄호로 무조건 감싸기!

// bad
// 맨날 이렇게 썼었는데 앞으로는 고쳐야겠다.
[1,2,3].map(x => x * x);

// good
// 이렇게 인자에 소괄호 붙여주는 습관을 들이자.
[1,2,3].map((x) => x*x);

8.6 암시적 반환을 하는 arrow function의 함수 body 위치를 적절히 설정하기.

// bad
(foo) => 
	bar;
(foo) =>
	(bar);

// good
(foo) => bar;
(foo) => (bar);
(foo) => (
  bar  
)

---

12.1 property 접근 시 . (dot) 사용하기

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

12.2 변수를 사용해 속성에 접근할 때는 대괄호 사용

const luke = {
  jedi: true,
  age: 28,
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');

---

13.6 증감 연산자 ++, -- 절대 사용 금지

---

https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md#types
naver 가 쓴 code convention이 더 나은듯.