[Airbnb JS Style Guide] 객체 , Types, References

우아한테크코스의 자바스크립트 스타일 가이드는 Airbnb 자바스크립트 스타일 가이드를 기준으로 하기에

Airbnb 자바스크립트 스타일 가이드 기준을 보고 이해를 바탕으로 필사하였으며 경중에따라 가감하였습니다.

 

 

 

 

 

 

객체(Objects)

1) 객체를 생성할 때는 리터럴 문법을 사용하세요.

// bad
const item = new Object();

// good
const item = {};

 

2) 동적 속성을 갖는 객체를 생성할 때는 속성 계산명을 사용하세요.

why? 이렇게 하면 객체의 모든 송석을 한 곳에서 정의할 수 있습니다. 

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) 메소드의 단축구문을 사용하세요.

// bad
const atom = {
  value: 1,

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

// good
const atom = {
  value: 1,

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

 

5) 속성의 단축구문은 객체 선언의 시작 부분에 모아주세요.

 why? 어떤 속성이 단축구문을 사용하고 있는지 알기 쉽게 해줍니다.

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,
};

 

6) 유효하지 않은 식별자에만 따옴표 속성을 사용하세요. 

why? 더 읽기 쉽습니다. 이렇게 하면 구문 하이라이팅이 잘 되고, 많은 자바스크립트 엔진이 더 쉽게 최적화 할 수 있습니다.

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

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

(식별자 네이밍 규칙을 준수하지 않은 key는  반드시 ' ' 따온표를 붙여야 한다.)

 

7) Object.prototype 메소드를 직접 호출하지 마세요.

ex) hasOwnProperty, propertyIsEnumerable, isPrototypeOf
why? 이러한 메소드들은 객체의 속성에 의해 가려질 수 있습니다.  - { hasOwnProperty: false } - 또는, 
객체( Object.create(null) ) 일 수도 있습니다. 

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // 모듈스코프에서 한 번 캐시하세요.
console.log(has.call(object, key));
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));

 

8) 객체에 대해 얕은 복사를 할 때는 Object.assign 대신 객체 전개 구문을 사용하세요.

특정 속성이 생략된 새로운 객체를 가져올 때는 객체 나머지 연산자(object rest operator)를 사용하세요.

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // `original`을 변조합니다 ಠ_ಠ
delete copy.a; // 그래서 이렇게 합니다 

// 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 }

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

 

---

Type 

 

1)원시형: 원시형에 접근하면 값을 직접 조작하게 됩니다.

• string
• number
• boolean
• null
• undefined
• symbol
• bigint

const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

(Symbol과 BigInt는 완전히 폴리필되지 않으므로, 이를 지원하지 않는 브라우저/환경을 대상으로 사용해서는 안 됩니다.)

 

2) 참조형: 참조형에 접근하면 참조를 통해 값을 조작하게 됩니다.

• object
• array
• function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

 

 

[JS - 개념] 원시타입(Primitive Type)과 객체 타입(Object/Reference Type)

 

---

References

1) 모든 참조에는 var 대신 const를 사용하세요. 

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

 

2) 만약 참조를 재할당 해야 한다면 var 대신 let을 사용하세요.

// const와 let은 선언된 블록 안에서만 존재합니다.
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

 

---

 

 

 

source : https://github.com/Ryan-Dia/javascript-style-guide#%EA%B0%9D%EC%B2%B4-objects