JS-0240 · Use shorthand property syntax for object literals

Use shorthand property syntax for object literals JS-0240

Anti-pattern

Minor

3 months ago — a year old

Expected property shorthand

723      this.scene.render(true, true) 
724      this.scene.onAfterRenderObservable.addOnce(() => { renderComplete = true }); 
725      while (!renderComplete) { } 
726      var data = await ScreenshotTools.CreateScreenshotAsync(this.engine, this.scene.activeCamera, { width: width, height: height }) //, precision: 2 727      this.scene.clearColor = clearColor 
728      return data 
729   }

Expected property shorthand

src/gcodeviewer.js

723      this.scene.render(true, true) 
724      this.scene.onAfterRenderObservable.addOnce(() => { renderComplete = true }); 
725      while (!renderComplete) { } 
726      var data = await ScreenshotTools.CreateScreenshotAsync(this.engine, this.scene.activeCamera, { width: width, height: height }) //, precision: 2 727      this.scene.clearColor = clearColor 
728      return data 
729   }

Expected property shorthand

src/bed.js

101    } else { 
102      let width = bedSize.x; 
103      let depth = bedSize.y; 
104      this.bedMesh = MeshBuilder.CreatePlane('BuildPlate', { width: width, height: depth }, this.scene); 105      this.bedMesh.material = this.planeMaterial; 
106      this.bedMesh.rotationQuaternion = Quaternion.RotationAxis(new Vector3(1, 0, 0), Math.PI / 2); 
107      this.bedMesh.translate(new Vector3(bedCenter.x, 0, bedCenter.y), 1, Space.WORLD);

Expected property shorthand

src/bed.js

 95    let bedSize = this.getSize(); 
 96    if (this.isDelta) { 
 97      let radius = Math.abs(this.buildVolume.x.max - this.buildVolume.x.min) / 2; 
 98      this.bedMesh = MeshBuilder.CreateDisc('BuildPlate', { radius: radius }, this.scene);  99      this.bedMesh.rotationQuaternion = Quaternion.RotationAxis(new Vector3(1, 0, 0), Math.PI / 2); 
100      this.bedMesh.material = this.planeMaterial; 
101    } else {

Description

ECMAScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.

Here are a few common examples using the ES5 syntax:

const x = 1, y = 2, z = 3;
// properties
const foo = {
    x: x,
    y: y,
    z: z,
};

// methods
const foo = {
    a: function() {},
    b: function() {}
};

The ES6 equivalent syntax is::

// properties
const foo = {x, y, z};

// methods
const bar = {
    a() { return 1 },
    b() { return 2 }
};

NOTE: The shorthand properties are equivalent to function expressions. Meaning that they do not bind their own this inside their bodies. It is still possible to access properties from the object inside a shorthand member function:

const object = {
    x: 1,
    getX() {
        return this.x // valid
    }
}

Bad Practice

const foo = {
    bar: function () { return 1 }
};

Sindarius / npm_gcodeviewer

Bad Practice

Recommended