Simple guide: Naming Conventions

August 25, 2019

  •  3 min read

What is a Naming Convention?

A naming convention is a set of rules for choosing the character sequence to be used for identifiers which denote variables, types, functions, and other entities in source code and documentation.

Few reasons why it is important

  • To reduce the effort needed to read and understand source code
  • To avoid heavy focusing on syntax and style preferences issues during code reviews and while running any analysis tool
  • To provide additional information about the purposes of the entity
  • Consistency, aesthetic and professional appearance

Naming Conventions By Type

Note: The following ideas are based on JavaScript, React and libraries from its ecosystem, but the same concepts can very well be applied to most programming languages

Functional or Class Components names should be nouns in UpperCamelCase.

// Class components
class Router {}

// Fucntional components
function ScrollToTop() {}

Functions

A descriptive name of functions should be a verb in lowerCamelCase or a multi-word name that begins with a verb in lowercase; that is, with the first letter lowercase and the first letters of subsequent words in uppercase.

function fetchProducts() {}

function run() {}

Few ideas for prefixing functions:

  • set or put - for prefixing functions used for updating the store with a result generated internally in the app — using the existing store
// An example from an app incorporating "react-redux"

// Action type
const SUM = 'SUM';

// Action creator
function setSum(result) {
  return {
    type: SUM,
    result,
  };
}

const addends = 5;
const summands = 10;

const sumResult = addends + summands;

dispatch(setSum(sumResult));
  • load or store - for prefixing functions used for loading data to the store after receiving it from an external API
// An example from an app incorporating "react-redux"

// Action types
const SET_PRODUCTS_FETCH_STATUS = 'SET_PRODUCTS_FETCH_STATUS';
const LOAD_PRODUCTS = 'LOAD_PRODUCTS';

enum CallApiStatus {
  SUCCESS = 'success',
  FAIL = 'fail',
  ERROR = 'error',
}

// Action creators
function setProductsFetchStatus(status) {
  return {
    type: SET_PRODUCTS_FETCH_STATUS,
    status
  }
}

function loadProductsIds(products) {
  return {
    type: LOAD_PRODUCTS,
    products
  }
}

// Data fetching
fetch('./api/some.json')
  .then(response => {
    if (response.status !== 200) {
      console.error(
        'Looks like there was a problem. Status Code: ',
        response.status
      );

      return dispatch(setProductsFetchStatus(CallApiStatus.FAIL));
    }

    response.json().then(data => {
      dispatch(setProductsFetchStatus(CallApiStatus.SUCCESS));

      return dispatch(loadProductsIds(data));
    });
  })
  .catch(err => {
    console.error('Fetch Error: ', err);

    return dispatch(setProductsFetchStatus(CallApiStatus.ERROR));
  });
  • remove, delete, or unload - for prefixing functions used for removing or unloading data from the store
// An example from an app incorporating "react-redux"

// Action type
const REMOVE_PRODUCT_BY_ID = 'REMOVE_PRODUCT_BY_ID';

// Action creator
function removeProductById(id) {
  return {
    type: REMOVE_PRODUCT_BY_ID,
    id,
  };
}

dispatch(removeProductById(id));
  • get - for prefixing actions used for getting data from the store
// In terms of "reselect"

function getProducts(state) {
  return state && state.getProducts;
}

export const getProductById = createSelector(
  getProducts,
  (_, productId) => productId,
  (products, productId) => products && products.byId && products.byId[productId]
);

Variables

Local variables, instance variables, and class variables are also written in lowerCamelCase. Variable names should not start with underscore (_) or dollar sign ($) characters, even though both are allowed.

Booleans should be prefixed with one of the auxiliary verbs is, are, or has, which would then indicate that the variable represents existence or a state of being.

const isActionSheetOpen = false;

const hasSeenProduct = true;

The variable name should be short, meaningful, and descriptive - to indicate the intent of its use.

Constants

Constants should be written in uppercase characters separated by underscores. Constant names may also contain digits if appropriate, but not as the first character.

const TIMEOUT = 1000;

const MAX_AMOUNT = 10;

 

Feel free to share your opinion on twitter or via email.