#03. [Naver Conventions 전격해부] Objects

 

Object (객체)

---

 

▽ 3.1 Object(객체)를 작성할 때는, 리터럴 구문을 사용한다.

// bad
const item = new Object();

// good
const item = {};

 : 객체는 new object(), Object.create(), literal표기법을 사용해 초기화할 수 있습니다. 여기서는 리터럴 표기법을 사용합니다.

 

 

▽ 3.2 동적 프로퍼티명을 갖는 오브젝트를 작성할 때, 계산된 프로퍼티명(computed property names)을 이용한다.

function getKey(k) {
  return `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
};

: 계산된 프로퍼티명은 JS Object의 프로퍼티 이름을 동적으로 설정할 수 있게 만들어주는 ES6의 기능입니다. 유효한 값을 반환하는 변수나 함수를 [대괄호] 안에 작성하여 객체의 프로퍼티를 동적으로 추가할 수 있습니다. 위 예시와 같이 변수 뿐 아니라 함수를 대괄호에 작성해 객체 프로퍼티를 추가할 수 있습니다. 이런 방식을 사용한다면 Object의 모든 프로퍼티를 한 블록 내에서 정의할 수 있습니다.

 

 

▽ 3.3 메서드의 단축구문을 사용한다.

// bad
const atom = {
  value: 1,

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

// good
const atom = {
  value: 1,

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

: 메서드 단축구문 또한 ES6에 도입되었습니다. 객체 초기자(initializer)에 메서드 정의를 위한 단축구문입니다. function은 메서드 정의에서 더 이상 필요없게 되었습니다.

 

 

▽ 3.4 속성의 단축구문을 사용한다.

const lukeSkywalker = "Luke Skywalker";

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

// good
const obj = {
  lukeSkywalker,
};

: 위 예시와 같이 객체의 속성값이 변수로 할당되었다면, 변수 이름만 적어주면 됩니다.

 

 

▽ 3.5 속성의 단축 구문은 오브젝트 선언의 시작 부분에 그룹화한다.

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

: 속성의 단축구문을 시작구문에 그룹화하면, 어떤 프로퍼티가 단축구문을 이용하고 있는지 알기 편합니다.

---

 (Airbnb와 다른 부분 시작)

 

▽ 3.6 속성명이 키워드(default, if, ...)일 경우에는 꼭 따옴표를 붙인다. 또한, -문자와 같이 속성명으로 지정할수 없는 경우에는 꼭 따옴표를 붙인다.

// bad
const bad = {
  foo: 3,
  default: 20,
  data-blah: 5
};

// good
const good = {
  foo: 3,
  "default": 20,
  "data-blah": 5,
  10: "naver"
};

 

 

▽ 3.7 hasOwnProperty, propertyIsEnumerable, isPrototypeOf 와 같은 Object.prototype 메서드를 직접적으로 사용하지 않는다.

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

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

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from "has";
// ...
console.log(has.call(object, key));

: JS에서 객체를 상속하기 위해 프로토타입 방식을 사용합니다. 한편,  hasOwnProperty, propertyIsEnumerable, isPrototypeOf 와 같은 builtin 메서드는 객체에서 직접호출하거나 Object.prototype을 사용해 호출합니다. 3.7 항목은 Object.prototype를 사용해 호출할 때 직접적인 사용을 지양하도록 합니다. 직접적으로 사용할 경우 발생될 문제점은 다음과 같습니다.

• Object.create(null) : null로 객체를 생성하면 Object.prototype을 상속받지 않습니다.
• builtin 방식으로 제공되는 메서드는 키를 이미 가진 채로 제공되는데, 객체와 builtin 메서드에 같은 이름을 가진 키가 있다면 잘못된 결과를 반환할 수 있습니다.

 

▽ 3.8 얕은 복사(shallow-copy)를 하기 위해서 Object.assign보다는 spread 연산자(...)를 선호한다. 오브젝트에서 몇몇 속성을 제거한 새로운 오브젝트를 얻고자 할때는 rest 파라미터(...)를 사용한다.

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

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

: JS에는 얕은 복사(Shallow-copy)와 깊은 복사(Deep-copy)가 있습니다. 

• 얕은 복사 : 객체를 직접 대입함. 참조에 의한 할당. 원본과 복사본은 같은 데이터주소를 가지고 있어, 한쪽만 변경돼도 둘 다 변경된다.
• 깊은 복사 : 새로운 객체의 프로퍼티만 복사. 원복과 복사본은 다른 데이터주소를 가지고 있다. 

Object.assign는 얕은 복사, spread는 깊은 복사(1depth 한정)가 이루어집니다. spread는 장황하지 않고, 네이티브 지원이 없는 환경에서도 폴리필이 필요하지 않습니다.(ex. BABEL)

 

naver github STYLE_GUIDE.md

 

 

Object 부분은 다른 컨벤션 부분보다 기초지식이 없으면 이해하기 어렵다는 생각이 들었습니다. 이 페이지에 나온 부분들은 추후 따로 다뤄보도록 하겠습니다. 다행이도 다음 Array부분부터는 좀 더 친숙한 부분이 많네요...ㅎㅎ