DEV Community

StormyTalent
StormyTalent

Posted on

50+ hints JS(ES6+) developer must know (first part)

Code snips which will help you to be a Senior JS(ES6+) developer.

If you think you are a JS engineer, I recommend you to read this at least one time.

1. REFERENCE

// bad var a = 1; var b = 2; // good const a = 1; const b = 2; // bad var count = 1; if (true) { count += 1; } // good, use the let let count = 1; if (true) { count += 1; }
Enter fullscreen mode Exit fullscreen mode

2. Objects

Use the literal syntax for object creation

// bad const item = new Object(); // good const item = {};
Enter fullscreen mode Exit fullscreen mode

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

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', };
Enter fullscreen mode Exit fullscreen mode

Use object method shorthand.

// bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, };
Enter fullscreen mode Exit fullscreen mode

Use property value shorthand

const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { lukeSkywalker: lukeSkywalker, }; // good const obj = { lukeSkywalker, };
Enter fullscreen mode Exit fullscreen mode

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

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, };
Enter fullscreen mode Exit fullscreen mode

Only quote properties that are invalid identifiers.

// bad const bad = { 'foo': 3, 'bar': 4, 'data-blah': 5, }; // good const good = { foo: 3, bar: 4, 'data-blah': 5, };
Enter fullscreen mode Exit fullscreen mode

Do not call Object.prototype methods directly.

// 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. console.log(has.call(object, key)); /* or */ import has from 'has'; // https://www.npmjs.com/package/has console.log(has(object, key));
Enter fullscreen mode Exit fullscreen mode

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

// 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 }
Enter fullscreen mode Exit fullscreen mode

Thanks for your time.
Next time, I will post about the important usage of Array in ES6+

Top comments (0)