Declaring Objects and Arrays with const avoids accidental type change.

// Variable Type Change
let name = { firstName: 'John', lastName: 'Doe'}
let skills = ['JavaScript', 'CSS', 'HTML']
name = 'John Doe'
skills = 'JavaScript'

const name = { firstName: 'John', lastName: 'Doe'}
const skills = ['JavaScript', 'CSS', 'HTML']

// ERROR
name = 'John Doe'
skills = 'JavaScript'

Declare Objects and Arrays with const

Missing parameters default to undefined. Using Defaults organizes your code and helps avoid bugs.

const isUserAdult = (age = 0, adultAge = 21) => { 
  return age >= adultAge ? true : false 
}

Use Parameter Defaults

Complex Variable names are distinguished by a Capital Letter. This is a common standard among JavaScript programmers.

An exception is when you are naming a Class.

class Member {
  constructor(firstName = 'John', lastName = 'Doe') {
    this.firstName = firstName
    this.lastName = lastName
  }
}

camelCase Variable Names

Using Async methods such as 'Promises' and 'async / await' improves performance and should be used when possible.

Use Asynchronous methods when possible

Initializing variables makes your code organized and avoids undefined values.

Initialize Variables

Destructuring can make your code more readable by making it clear what data is being extracted from objects and arrays. This is especially useful when working with complex data structures. 

Destructuring is very flexible and can be used to extract data from a variety of different data structures, including objects, arrays, and even nested data structures.

Destructuring can improve the performance of your code by reducing the number of object and array lookups.

// No Destructuring //

const createFormState = useState<boolean>(false)
const disabled = !(formik.isValid && formik.dirty)

return (
  { createFormState[0] && (
    <LoadingButton loading={formik.isSubmitting} />
  )}  
)

// Destructuring

const [createForm, setCreateForm] = useState(false)
const {isValid, dirty, isSubmitting} = useFormikContext()
const disabled = !(isValid && dirty)

return (
  { createForm && (
    <LoadingButton loading={isSubmitting} />
  )}  
)

Prefer Destructuring

Best Practices 

Global variables can be overwritten by other scripts many times on accident. Always declare variables with "let" or "const".

let userName = 'John Doe'
const userName = getUserName()

Do not use Global Variables.

Unless you have a very long string, limit your code line length to 100 characters. This makes your code more readable and you are able to have multiple files opened at a time and still be able to see the full line of code. 

const titleTextField = styled(TextField)(({ theme }) => ({
  'label': { color: theme.palette.secondary.contrastText },
  '& .outlinedInput-root': { color: theme.palette.secondary.contrastText},
  '& .outlinedInput-notchedOutline': 
    { borderColor: theme.palette.secondary.contrastText, }
}));


Line Length 100 Max

To Insure tight comparisons types and avoid confusion, always use the '===' comparison Operator.

// These all evaluate to true
0 == ""
1 == "1"
1 == true

// These all evaluate to false
0 === ""
1 === "1"
1 === true

Use can use the ESLint rule: "eqeqeq" to enforce this standard.

Use the === Comparison Operator

Using ESLint allows programmers to find bugs before executing the code. Programmers are able to choose which rules they want to use and how to use them.

Use ESLint

Using only 2 spaces for indentation enables you to get the most code in a line and also show nesting.

let firstName = 'John'
let lastName = 'Doe'

const getName = () => {
  return `${firstName} ${lastName}`
}

The ESLint rule 'indent' can be used to automate this standard.

2 Space Code Indentation

NO code should ever be on these pages, only imports and exports. This makes finding the file easier from quick finds.

// member/index.js 

import MemberPage, {helperFunction} from ./MemberPage

// member/MemberPage.js

const MemberPage = () => { // ...code }
const helperFunction = () => { // ...code }

export default MemberPage
export {helperFunction}

Index pages

Standards

Two types of code are "Producing Code" which can take time and "Consuming Code" which waits for a result. Promises are a way of linking these 2 types of code for faster results. This way you can wait for a promise and start to do something else while you wait for the result.

How to do a Promise

// Bad 
await team.forEach(async (member) => {
  if(moneyForRaises) {  
    money = await giveRaise(member)
  }
});

await sendEmailToCEO('All Raise money used');

// Good
for (const member of team) { 
  if(moneyForRaises) { 
    money = await giveRaise(member) 
  } 
}

await sendEmailToCEO('All Raise money used');

Avoid async-await in a loop

Sometimes you need to deal with a Promise Asynchronously. Making a function Asynchronous requires adding 'async' to it. Making a function wait for a promise requires adding 'await to it.

How to use Async and Await

// Bad
let sockBucket = {}

socks.forEach((sock) => {
  if(sockBucket[sock]){
    sockBucket[sock]++
  }else{
    sockBucket[sock] = 1
  }
})
 
let totalPairs = 0;

 Object.values(sockBucket).forEach((bucket) => {  
   const result = Math.floor(sockBucket[bucket] / 2)   
   total += result
 })
 
 return totalPairs
 
 

 // Good
 let sockBucket = {}
 for (const sock of socks){
   if(sockBucket[sock]){
     sockBucket[sock]++
   }else{
     sockBucket[sock] = 1
   }
 }
 
 let totalPairs = 0;
 for (const bucket in sockBucket){
   
   const result = Math.floor(sockBucket[bucket] / 2)   
   total += result
 }
 
 return totalPairs

Loop an Array or Object async

Examples

JavaScript (JS) is a scripting programming language used with web browsers to make web pages interactive. It is part of the webframework (HTML, CSS, and JavaScript). Many Frameworks have been built on top of JavaScript such as React, JQuery, Angular, Node.JS and many more. JavaScript is loosely typed and is an interpreted language. JavaScript is Asynchronous and is single threaded.  Here you will find Standards, Best Practices and Examples for JavaScript.