5 ways to make your JavaScript codebase cleaner

5 ways to make your JavaScript codebase cleaner

1. Use default parameters instead of short-circuiting or conditionals

Default arguments are usually cleaner than short-circuiting.

function SomeMethod(paramThatCanBeUndefined) {

   const localValue = paramThatCanBeUndefined || "Default Value";
   console.log(localValue)
   // ...
}
SomeMethod() // Default Value
SomeMethod("SomeValue") // SomeValue

Try the following:

function SomeMethod(
  console.log(paramThatCanBeUndefined)
  // ...
}
SomeMethod() // Default Value
SomeMethod("SomeValue") // SomeValue

Statement: Falsy values ​​such as '', "", false, null, 0, and NaN will not be replaced by default values:

function SomeMethod(paramThatCanBeUndefined = "Default Value") {        
  console.log(paramThatCanBeUndefined)  
  // ...
}
SomeMethod(null) // will not Default Value, will null Instead
SomeMethod("SomeValue") // SomeValue

2. Handling multiple conditions

const conditions = ["Condition 2","Condition String2"];
someFunction(str){
  if(str.includes("someValue1") || str.includes("someValue2")){
    return true
  }else{
    return false
  }
}

A cleaner way to do this is:

someFunction(str){
   const conditions = ["someValue1","someValue2"];
   return conditions.some(condition=>str.includes(condition));
}

3. Replace switches with dynamic key-value pairs (i.e. object literals)

Switch version (or replace the switch with an if/else):

const UserRole = {
  ADMIN: "Admin",
  GENERAL_USER: "GeneralUser",
  SUPER_ADMIN: "SuperAdmin",
};
function getRoute(userRole = "default role"){


  switch(userRole){
    case UserRole.ADMIN:
      return "/admin"
    case UserRole.GENERAL_USER:
        return "/GENERAL_USER"
    case UserRole.SUPER_ADMIN:
        return "/superadmin"
    default:
      return "/" 
  }

}
console.log(getRoute(UserRole.ADMIN)) // return "/admin"
console.log(getRoute("Anything")) // return Default path
console.log(getRoute()) // return Default path
console.log(getRoute(null)) // return Default path

// More cases if new arrive
// You can think if else instead of switch

Dynamic key-value pair version:

const UserRole = {
   ADMIN: "Admin",
   GENERAL_USER: "GeneralUser",
   SUPER_ADMIN: "SuperAdmin",
};
function getRoute(userRole = "default role"){
 const appRoute = {
  [UserRole.ADMIN]: "/admin",
  [UserRole.GENERAL_USER]: "/user",
  [UserRole.SUPER_ADMIN]: "/superadmin"
 };
 return appRoute[userRole] || "Default path";
}
console.log(getRoute(UserRole.ADMIN)) // return "/admin"
console.log(getRoute("Anything")) // return Default path
console.log(getRoute()) // return Default path
console.log(getRoute(null)) // return Default path
// No more switch/if-else here.
// Easy to Further expansion

4. Avoid too many function parameters

function myFunction(employeeName,jobTitle,yrExp,majorExp){
 return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}`
}
//output be like John is working as Project Manager with 12 years of experience in Project Management
// You can call it via
console.log(myFunction("John","Project Manager",12,"Project Management"))
// ***** PROBLEMS ARE *****
// Violation of 'clean code' principle
// Parameter sequencing is important
// Unused Params warning if not used
// Testing need to consider a lot of edge cases.

Here's a cleaner way to do it:

function myFunction({employeeName,jobTitle,yrExp,majorExp}){
 return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}`
}
//output be like John is working as Project Manager with 12 years of experience in Project Management
// You can call it via
const mockTechPeople = {
  employeeName:"John",
  jobTitle:"Project Manager",
  yrExp:12,
  majorExp:"Project Management"
}
console.log(myFunction(mockTechPeople))
// ES2015/ES6 destructuring syntax is in action
// map your desired value to variable you need.

5. Use Object.assign to set the default object

This seems cumbersome:

const someObject = {
 title: null,
 subTitle: "Subtitle",
 buttonColor: null,
 disabled: true
};
function createOption(someObject) {
 someObject.title = someObject.title || "Default Title";
 someObject.subTitle = someObject.subTitle || "Default Subtitle";
 someObject.buttonColor = someObject.buttonColor || "blue";
 someObject.disabled = someObject.disabled !== undefined ? someObject.disabled : true;
 return someObject
}
console.log(createOption(someObject));

// Output be like 
// {title: 'Default Title', subTitle: 'Subtitle', buttonColor: 'blue', disabled: true}

This approach looks better:

const someObject = {
  title: null,
  subTitle: "Subtitle",
  buttonColor: null,
  disabled: true
 };
 function createOption(someObject) {
  const newObject = Object.assign({
   title: "Default Title",
   subTitle: "Default Subtitle",
   buttonColor: "blue",
   disabled: true
 },someObject)
 return newObject
 }
 console.log(creteOption(someObject));

This concludes this article about 5 ways to make your JavaScript codebase cleaner. For more information about 5 ways to make your JavaScript codebase cleaner, please search for previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! Thank you for reading

You may also be interested in:
  • JavaScript code library cookieLibrary.js that writes cookies
  • Building a JS code base from the ground up
  • Simple usage of java FastJson
  • Detailed explanation of several solutions for JavaScript interruption requests
  • Vue.js performance optimization N tips (worth collecting)
  • AngularJS implements the sample code of expanding and shrinking some columns of the table
  • JavaScript implements the most complete code analysis of a simple magnifying glass (ES5)
  • JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)
  • JavaScript to implement simple carousel chart most complete code analysis (ES5)
  • JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)

<<:  Analysis of the process of simply deploying nginx in Docker container

>>:  Detailed explanation of how to run jmeter under Linux system and optimize local memory

Recommend

iframe src assignment problem (server side)

I encountered this problem today. I reassigned the...

How to upload and download files between Linux server and Windows system

Background: Linux server file upload and download...

Build a Docker image using Dockerfile

Table of contents Build a Docker image using Dock...

How to install MySQL server community version MySQL 5.7.22 winx64 in win10

Download: http://dev.mysql.com/downloads/mysql/ U...

Introduction to fourteen cases of SQL database

Data Sheet /* Navicat SQLite Data Transfer Source...

Summary of common commands for building ZooKeeper3.4 middleware under centos7

1. Download and decompress 1. Introduction to Zoo...

Analyzing the node event loop and message queue

Table of contents What is async? Why do we need a...

How to use Docker Swarm to build WordPress

cause I once set up WordPress on Vultr, but for w...

How to avoid garbled characters when importing external files (js/vbs/css)

In the page, external files such as js, css, etc. ...

MySQL index for beginners

Preface Since the most important data structure i...