Objects

  • 3.1 Use the literal syntax for object creation. eslint: no-new-object

    1. // bad
    2. const item = new Object();
    4. // good
    5. const item = {};

  • 3.2 Use computed property names when creating objects with dynamic property names.

    Why? They allow you to define all the properties of an object in one place.

    ```javascript

    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’,

  1.   [getKey('enabled')]: true,
  2. };
  3. ```

  • 3.3 Use object method shorthand. eslint: object-shorthand

    1. // bad
    2. const atom = {
    3.   value: 1,
    5.   addValue: function (value) {
    6.     return atom.value + value;
    7.   },
    8. };
    10. // good
    11. const atom = {
    12.   value: 1,
    14.   addValue(value) {
    15.     return atom.value + value;
    16.   },
    17. };

  • 3.4 Use property value shorthand. eslint: object-shorthand

    Why? It is shorter to write and descriptive.

    1. const lukeSkywalker = 'Luke Skywalker';
    3. // bad
    4. const obj = {
    5.   lukeSkywalker: lukeSkywalker,
    6. };
    8. // good
    9. const obj = {
    10.   lukeSkywalker,
    11. };

  • 3.5 Group your shorthand properties at the beginning of your object declaration.

    Why? It’s easier to tell which properties are using the shorthand.

    1. const anakinSkywalker = 'Anakin Skywalker';
    2. const lukeSkywalker = 'Luke Skywalker';
    4. // bad
    5. const obj = {
    6.   episodeOne: 1,
    7.   twoJediWalkIntoACantina: 2,
    8.   lukeSkywalker,
    9.   episodeThree: 3,
    10.   mayTheFourth: 4,
    11.   anakinSkywalker,
    12. };
    14. // good
    15. const obj = {
    16.   lukeSkywalker,
    17.   anakinSkywalker,
    18.   episodeOne: 1,
    19.   twoJediWalkIntoACantina: 2,
    20.   episodeThree: 3,
    21.   mayTheFourth: 4,
    22. };

  • 3.6 Only quote properties that are invalid identifiers. eslint: quote-props

    Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines.

    1. // bad
    2. const bad = {
    3.   'foo': 3,
    4.   'bar': 4,
    5.   'data-blah': 5,
    6. };
    8. // good
    9. const good = {
    10.   foo: 3,
    11.   bar: 4,
    12.   'data-blah': 5,
    13. };

  • 3.7 Do not call Object.prototype methods directly, such as hasOwnProperty, propertyIsEnumerable, and isPrototypeOf.

    Why? These methods may be shadowed by properties on the object in question - consider { hasOwnProperty: false } - or, the object may be a null object (Object.create(null)).

    1. // bad
    2. console.log(object.hasOwnProperty(key));
    4. // good
    5. console.log(Object.prototype.hasOwnProperty.call(object, key));
    7. // best
    8. const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
    9. /* or */
    10. import has from 'has'; // https://www.npmjs.com/package/has
    11. // ...
    12. console.log(has.call(object, key));

  • 3.8 Prefer the object spread operator over Object.assign to shallow-copy objects. Use the object rest operator to get a new object with certain properties omitted.

    1. // very bad
    2. const original = { a: 1, b: 2 };
    3. const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
    4. delete copy.a; // so does this
    6. // bad
    7. const original = { a: 1, b: 2 };
    8. const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
    10. // good
    11. const original = { a: 1, b: 2 };
    12. const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
    14. const { a, ...noA } = copy; // noA => { b: 2, c: 3 }