Clean your condition 🧼

Always positive

It's need extra effort to understanding logic in negative condition, avoid it as you can

// ❌ Don't 

function isUserNotVerified(){

}

if(!userVerified){

}

// ✅ Do

function isUserVerified(){

}

if(userVerified){

}

Use Shorthands if possible

Shorthands make your code use less line and easier to read

// ❌ Don't

if(isActive ==null){

}

if(firstname !== null || firstname !=='' || firstname !== undefined){

}

const isUserValid = user.isVerified() && user.isActive() ? true : false;

// ✅ Do

if(isActive) {

}

if(!!firstname){

}

const isUserValid = user.isVerified() && user.isActive()

Object literals over Switch statements

// ❌ Don't

const getStatus = (status) => {
  switch (status) {
    case "success":
      return "green";
    case "failure":
      return "red";
    case "warning":
      return "yellow";
    case "loading":
    default:
      return "blue";
  }
};

// ✅ Do
const statusColors = {
  success: "green",
  failure: "red",
  warning: "yellow",
  loading: "blue",
};

const getStatus = (status) => statusColors[status] || statusColors.loading;

Use optional chaining

Remember that optional chaining is not working with IE browser yet, see here

const alice = {
    name:'Alice',
    cat:{
        name:'Nala'
    }
}
// ❌ Don't

const cat = (alice && alice.cat && alice.cat.name) || 'N/A';

// ✅ Do

const cat = alice?.cat?.name ?? 'N/A';

Comments

[MikeNatsu]

For shorthands like if(!!something), why cant we just do if (something)???

[Heru Hartanto]

Yes you could, the only difference is !!something will return boolean

[Jiko]

const getStatus = (status = 'loading') => statusColors?.[status] ?? statusColors.loading;