DEV Community

StormyTalent
StormyTalent

Posted on

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

Hi, everybody. Here is StormyTalent again!
And today we are going to see some more hints what JS developer must know.

1. Naming Conventions
Avoid single letter names. Be descriptive with your naming.

// bad function q() { // ... } // good function query() { // ... } 
Enter fullscreen mode Exit fullscreen mode

Use camelCase when naming objects, functions, and instances.

// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {} 
Enter fullscreen mode Exit fullscreen mode

Use PascalCase only when naming constructors or classes.

// bad function user(options) { this.name = options.name; } const bad = new user({ name: 'nope', }); // good class User { constructor(options) { this.name = options.name; } } const good = new User({ name: 'yup', }); 
Enter fullscreen mode Exit fullscreen mode

Do not use trailing or leading underscores.

// bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; this._firstName = 'Panda'; // good this.firstName = 'Panda'; // good, in environments where WeakMaps are available // see https://kangax.github.io/compat-table/es6/#test-WeakMap const firstNames = new WeakMap(); firstNames.set(this, 'Panda'); 
Enter fullscreen mode Exit fullscreen mode

Don’t save references to this. Use arrow functions or Function#bind.

// bad function foo() { const self = this; return function () { console.log(self); }; } // bad function foo() { const that = this; return function () { console.log(that); }; } // good function foo() { return () => { console.log(this); }; } 
Enter fullscreen mode Exit fullscreen mode

A base filename should exactly match the name of its default export.

// file 1 contents class CheckBox { // ... } export default CheckBox; // file 2 contents export default function fortyTwo() { return 42; } // file 3 contents export default function insideDirectory() {} // in some other file // bad import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export // bad import CheckBox from './check_box'; // PascalCase import/export, snake_case filename import forty_two from './forty_two'; // snake_case import/filename, camelCase export import inside_directory from './inside_directory'; // snake_case import, camelCase export import index from './inside_directory/index'; // requiring the index file explicitly import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly // good import CheckBox from './CheckBox'; // PascalCase export/import/filename import fortyTwo from './fortyTwo'; // camelCase export/import/filename import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index" // ^ supports both insideDirectory.js and insideDirectory/index.js 
Enter fullscreen mode Exit fullscreen mode

Use camelCase when you export-default a function. Your filename should be identical to your function’s name.

function makeStyleGuide() { // ... } export default makeStyleGuide; 
Enter fullscreen mode Exit fullscreen mode

Use PascalCase when you export a constructor / class / singleton / function library / bare object.

const AirbnbStyleGuide = { es6: { }, }; export default AirbnbStyleGuide; 
Enter fullscreen mode Exit fullscreen mode

Acronyms and initialisms should always be all uppercased, or all lowercased.

// bad import SmsContainer from './containers/SmsContainer'; // bad const HttpRequests = [ // ... ]; // good import SMSContainer from './containers/SMSContainer'; // good const HTTPRequests = [ // ... ]; // also good const httpRequests = [ // ... ]; // best import TextMessageContainer from './containers/TextMessageContainer'; // best const requests = [ // ... ]; 
Enter fullscreen mode Exit fullscreen mode

You may optionally uppercase a constant only if it (1) is exported, (2) is a const (it can not be reassigned), and (3) the programmer can trust it (and its nested properties) to never change.

// bad const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file'; // bad export const THING_TO_BE_CHANGED = 'should obviously not be uppercased'; // bad export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables'; // --- // allowed but does not supply semantic value export const apiKey = 'SOMEKEY'; // better in most cases export const API_KEY = 'SOMEKEY'; // --- // bad - unnecessarily uppercases key while adding no semantic value export const MAPPING = { KEY: 'value' }; // good export const MAPPING = { key: 'value' }; 
Enter fullscreen mode Exit fullscreen mode

I would be happy if you read this material and gain a little bit inspirations.

Top comments (0)