How to make JavaScript Code Base Clean

This article introduces you how to make the JavaScript code base clean, the content is very detailed, interested friends can refer to, hope to be helpful to you.

1. Use default parameters instead of short circuits or conditions

The default parameter is usually cleaner than a short circuit.

Function SomeMethod (paramThatCanBeUndefined) {

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

Try the following methods:

Function SomeMethod (console.log (paramThatCanBeUndefined) / /...} SomeMethod () / / Default ValueSomeMethod ("SomeValue") / / SomeValue

Declaration: false 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 InsteadSomeMethod ("SomeValue") / / SomeValue2, handle 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 is to:

SomeFunction (str) {const conditions = ["someValue1", "someValue2"]; return conditions.some (condition= > str.includes (condition));} 3. Replace switch with dynamic key-value pair (that is, object text)

Switch version (or replace the switch with 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 Pathconsole.log (getRoute ()) / / return Default pathconsole.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 pathconsole.log (getRoute ()) / / return Default pathconsole.log (getRoute (null)) / / return Default path// No more switch/if-else here.// Easy to Further expansion4, avoid excessive function arguments 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 year of experience in Project Management// you can call it viaconsole.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.

This is a cleaner way:

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 year of experience in Project Management// you can call it viaconst 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 looks 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 creteOption (someObject) {const newObject = Object.assign ({title: "Default Title", subTitle: "Default Subtitle", buttonColor: "blue", disabled: true}, someObject) return newObject} console.log (creteOption (someObject)) On how to make the JavaScript code base clean to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.