Axept JavaScript Style Guide

Contents

Comparison Operators & Equality

// bad
const query = { 'forward_url': '/' }
const targetURL = 'https://qwe.com/auth?' + (typeof query === 'string') ? query : JSON.stringify(query)

// Uncaught TypeError: split is not a function
// because type of targetURL is Object
const partsOfURL = targetURL.split('?')


// may be
const query = { 'forward_url': '/' }
const queryString = typeof query === 'string' ? query : JSON.stringify(query)
const targetURL = 'https://qwe.com/auth?' + queryString


// good
const query = { 'forward_url': '/' }
const queryString = (typeof query === 'string') ? query : JSON.stringify(query)
const targetURL = 'https://qwe.com/auth?' + queryString

Comments

// bad - it duplicates the function name

/**
 * Update hosts
 */
function updateHosts(list) {
  hosts = list
}


// good - nothing bad is better than something bad
function updateHosts(list) {
  hosts = list
}


// bad - it duplicates the module path
import Drawer from 'react-native-drawer'

// Components
import DrawerMenu from './components/drawer-menu'


// good - see the previous "good" explaination
import Drawer from 'react-native-drawer'
import DrawerMenu from './components/drawer-menu'


// good
if (!root.isAbstract()) {
  // No need to wrap child nodes of a known concrete type.
  return nextChildren;
}

Semicolons

Line Width

// bad
if ((this.props.suggestions.length === 0) && (newProps.suggestions.length > 0) && (newProps.autosuggestValue.length > 0) {

  return
}

// good
const hasSuggestions = (this.props.suggestions.length === 0)
const willHaveSuggestions = (newProps.suggestions.length > 0)
if (hasSuggestions && willHaveSuggestions && (newProps.autosuggestValue.length > 0)) {
  return
}

// good
const hasSuggestions = (this.props.suggestions.length === 0)
const willHaveSuggestions = (newProps.suggestions.length > 0)
const willHaveAutosuggest = (newProps.autosuggestValue.length > 0)
if (hasSuggestions && willHaveSuggestions && willHaveAutosuggest) {
  return
}

Naming Conventions

// bad - what does it mean "ref"? referals? references? single reference?
const ref1 = fetch('/api/books')


// good
const reference1 = fetch('/api/books')

Imports

Packages

Unsorted Yet

Use brackets for expressions

// bad
const useSrcKey = _srcKey !== undefined || this._srcKey !== undefined
const componentAsync = typeof src === 'function' ? src() : import(src)
const isProduction = process.env['NODE_ENV'] === 'production'

// good
const useSrcKey = (_srcKey !== undefined) || (this._srcKey !== undefined)
const componentAsync = (typeof src === 'function') ? src() : import(src)
const isProduction = (process.env['NODE_ENV'] === 'production')

Do not use JavaScript "magic"

// bad
const b = !!a

// bad
const b = (~a.indexOf('k'))

// bad
const c = !!d.length

// good
const b = Boolean(a)

// good
const b = (a.indexOf('k') >= 0)

// good
const c = (d.length > 0)

Fetch and combinate separation

// bad
const targetURL = `${getHost()}/search/?query=${query}`


// good
const targetHost = getHost()
const targetURL = `${targetHost}/search/?query=${query}`

Don't use excess else for return

// bad
if (rows) {
  return rows[0]
} else {
  return false
}


// good
if (rows) {
  return rows[0]
}
return false

Don't use excess empty line

// bad
const config = loadConfig()

if (config) {
  applyConfig(config)
}


// good
const config = loadConfig()
if (config) {
  applyConfig(config)
}

Use dot syntax only for internal objects

// bad
fetch('/api/users')
  .then(response => response.json())
  .then(json => {
    if (!json.errors) {
      json.data.users.forEach(user => {
        const { id, name } = user
        if (users[id].name !== name) {
          setUserName(id, name)
        }
      })
    }
  })


// good
fetch('/api/users')
  .then(response => response.json())
  .then(json => {
    if (!json['errors']) {
      json['data']['users'].forEach(user => {
        const id = user['id']
        const name = user['name']
        if (users[id].name !== name) {
          setUserName(id, name)
        }
      })
    }
  })

Don't mix JS and JSX in one line

// bad
return <ReferenceLink referenceKey={key} id={ref.id} title={ref.title}/>


// bad
const body = items.map(it => <li>{it.title}</li>)


// good
return (
  <ReferenceLink referenceKey={key} id={ref.id} title={ref.title}/>
);


// good
const body = items.map(it => (
  <li>{it.title}</li>
))


// good
return (
  <References>
    {items.map((it, index) => (
      <ReferenceLink referenceKey={index} id={it['id']} title={it['title']}/>
    ))}
  </References>
)

Don't mix JSX and Text node in one line

// bad
return (
  <Text style={style.openInSafariLink}>Open in Safari</Text>
)


// good
return (
  <Text style={style.openInSafariLink}>
    Open in Safari
  </Text>
)


// good - if you need a Text node for styling
return (
  <Text>&nbsp;</Text>
)

One empty line before and after function or class declaration

// bad

const x = 0
function a() {
  return 1
}
const b = () => 2


// bad

const x = 0
class A {
  a() {
    return 1
  }
  b() {
    return 2
  }
}


// good

const x = 0

function a() {
  return 1
}

const b = () => 2


// good

const x = 0

class A {

  a() {
    return 1
  }

  b() {
    return 2
  }
}

Static members should be declared in class body

// bad

Profile.propTypes = {
  classes: PropTypes.object.isRequired,
  handleClick: PropTypes.func,
}


// good

class Profile extends Component {

  static propTypes = {
    classes: PropTypes.object.isRequired,
    handleClick: PropTypes.func,
  }

  // ...
}

Do not mix expression in one-line objects as assignment

// bad
this.setState({ hasErrors: true, route })


// bad
const state = { hasErrors: true, route }


// good
this.setState({ hasErrors, route })


// good
this.setState({ hasErrors: true })


// good
const state = { hasErrors, route }