DEV Community

StormyTalent
StormyTalent

Posted on

50+ hints JS(ES6+) developer must know (5th part)

Hi, everyone! How are you doing?
Here is StormyTalent again to explain about the 50+ critical JS hints.
Today we're gonna see about Modules, Properties, Variables.

Always use modules (import/export) over a non-standard module system. You can always transpile to your preferred module system.

Modules

const numbers = [1, 2, 3, 4, 5]; // bad let sum = 0; for (let num of numbers) { sum += num; } sum === 15; // good let sum = 0; numbers.forEach((num) => { sum += num; }); sum === 15; // best (use the functional force) const sum = numbers.reduce((total, num) => total + num, 0); sum === 15; // bad const increasedByOne = []; for (let i = 0; i < numbers.length; i++) { increasedByOne.push(numbers[i] + 1); } // good const increasedByOne = []; numbers.forEach((num) => { increasedByOne.push(num + 1); }); // best (keeping it functional) const increasedByOne = numbers.map((num) => num + 1); 
Enter fullscreen mode Exit fullscreen mode

If you must use generators, or if you disregard our advice, make sure their function signature is spaced properly.

// bad function * foo() { // ... } // bad const bar = function * () { // ... }; // bad const baz = function *() { // ... }; // bad const quux = function*() { // ... }; // bad function*foo() { // ... } // bad function *foo() { // ... } // very bad function * foo() { // ... } // very bad const wat = function * () { // ... }; // good function* foo() { // ... } // good const foo = function* () { // ... }; 
Enter fullscreen mode Exit fullscreen mode

Properties

Use dot notation when accessing properties

const luke = { jedi: true, age: 28, }; // bad const isJedi = luke['jedi']; // good const isJedi = luke.jedi; 
Enter fullscreen mode Exit fullscreen mode

Use bracket notation [] when accessing properties with a variable.

const luke = { jedi: true, age: 28, }; function getProp(prop) { return luke[prop]; } const isJedi = getProp('jedi'); 
Enter fullscreen mode Exit fullscreen mode

Use exponentiation operator ** when calculating exponentiations.

// bad const binary = Math.pow(2, 10); // good const binary = 2 ** 10; 
Enter fullscreen mode Exit fullscreen mode

Variables

Always use const or let to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.

// bad superPower = new SuperPower(); // good const superPower = new SuperPower(); 
Enter fullscreen mode Exit fullscreen mode

Use one const or let declaration per variable or assignment.

// bad const items = getItems(), goSportsTeam = true, dragonball = 'z'; // bad // (compare to above, and try to spot the mistake) const items = getItems(), goSportsTeam = true; dragonball = 'z'; // good const items = getItems(); const goSportsTeam = true; const dragonball = 'z'; 
Enter fullscreen mode Exit fullscreen mode

Group all your consts and then group all your lets.

// bad let i, len, dragonball, items = getItems(), goSportsTeam = true; // bad let i; const items = getItems(); let dragonball; const goSportsTeam = true; let len; // good const goSportsTeam = true; const items = getItems(); let dragonball; let i; let length; 
Enter fullscreen mode Exit fullscreen mode

Assign variables where you need them, but place them in a reasonable place.

// bad - unnecessary function call function checkName(hasName) { const name = getName(); if (hasName === 'test') { return false; } if (name === 'test') { this.setName(''); return false; } return name; } // good function checkName(hasName) { if (hasName === 'test') { return false; } const name = getName(); if (name === 'test') { this.setName(''); return false; } return name; } 
Enter fullscreen mode Exit fullscreen mode

Don’t chain variable assignments.

// bad (function example() { // JavaScript interprets this as // let a = ( b = ( c = 1 ) ); // The let keyword only applies to variable a; variables b and c become // global variables. let a = b = c = 1; }()); console.log(a); // throws ReferenceError console.log(b); // 1 console.log(c); // 1 // good (function example() { let a = 1; let b = a; let c = a; }()); console.log(a); // throws ReferenceError console.log(b); // throws ReferenceError console.log(c); // throws ReferenceError // the same applies for `const` 
Enter fullscreen mode Exit fullscreen mode

Avoid using unary increments and decrements (++, --)

// bad const array = [1, 2, 3]; let num = 1; num++; --num; let sum = 0; let truthyCount = 0; for (let i = 0; i < array.length; i++) { let value = array[i]; sum += value; if (value) { truthyCount++; } } // good const array = [1, 2, 3]; let num = 1; num += 1; num -= 1; const sum = array.reduce((a, b) => a + b, 0); const truthyCount = array.filter(Boolean).length; 
Enter fullscreen mode Exit fullscreen mode

Avoid linebreaks before or after = in an assignment. If your assignment violates max-len, surround the value in parens.

// bad const foo = superLongLongLongLongLongLongLongLongFunctionName(); // bad const foo = 'superLongLongLongLongLongLongLongLongString'; // good const foo = ( superLongLongLongLongLongLongLongLongFunctionName() ); // good const foo = 'superLongLongLongLongLongLongLongLongString'; 
Enter fullscreen mode Exit fullscreen mode

Disallow unused variables.

// bad var some_unused_var = 42; // Write-only variables are not considered as used. var y = 10; y = 5; // A read for a modification of itself is not considered as used. var z = 0; z = z + 1; // Unused function arguments. function getX(x, y) { return x; } // good function getXPlusY(x, y) { return x + y; } var x = 1; var y = a + 2; alert(getXPlusY(x, y)); // 'type' is ignored even if unused because it has a rest property sibling. // This is a form of extracting an object that omits the specified keys. var { type, ...coords } = data; // 'coords' is now the 'data' object without its 'type' property. 
Enter fullscreen mode Exit fullscreen mode

Thanks for your time.

Top comments (0)