This content originally appeared on DEV Community and was authored by Emi Castellano
Do you want to avoid writing multiple if/else if or switch statement with a bunch of cases inside?
The strategy pattern can help us with that.
Imagine we have a use case where the user can sign up using different methods:
- Google Auth
- Facebook Auth
- Form submission
We want to avoid this:
const AUTH_METHODS = {
GOOGLE: 'GOOGLE',
FACEBOOK: 'FACEBOOK',
FORM_SUBMISSION: 'FORM_SUBMISSION'
}
const googleAuth = _ => {
// ... Google auth code here
}
const facebookAuth = _ => {
// ... Facebook Auth code here
}
const formSubmissionAuth = _ => {
// ... Form submission code here
}
const handleAuthentication = method => {
if (method === AUTH_METHODS.GOOGLE) {
googleAuth()
} else if (method === AUTH_METHODS.FACEBOOK) {
facebookAuth()
} else {
formSubmissionAuth()
}
}
How can we improve this using the strategy pattern?
const AUTH_METHODS = {
GOOGLE: 'GOOGLE',
FACEBOOK: 'FACEBOOK',
FORM_SUBMISSION: 'FORM_SUBMISSION'
}
const googleAuth = _ => {
// ... Google auth code here
}
const facebookAuth = _ => {
// ... Facebook Auth code here
}
const formSubmissionAuth = _ => {
// ... Form submission code here
}
const authenticationStrategy = method => ({
[AUTH_METHODS.GOOGLE]: googleAuth,
[AUTH_METHODS.FACEBOOK]: facebookAuth,
[AUTH_METHODS.FORM_SUBMISSION]: formSubmissionAuth
})[method]
const strategy = authenticationStrategy(AUTH_METHODS.GOOGLE)
strategy()
And if we want to pass parameters to some of the strategy functions, we can do it like this:
const authenticationStrategy = method => ({
[AUTH_METHODS.GOOGLE]: googleAuth,
[AUTH_METHODS.FACEBOOK]: facebookAuth,
[AUTH_METHODS.FORM_SUBMISSION]: () => formSubmissionAuth({ username: 'javascript', password: 'strategyPattern' })
})[method]
The strategy pattern, returns an object with key/value pair and what determines which key is the one to be "executed" is the [method] at the end, this is the dependency of our function, whatever value we pass there it will be mapped to the corresponding object key.
This content originally appeared on DEV Community and was authored by Emi Castellano
Emi Castellano | Sciencx (2021-09-07T18:46:54+00:00) JavaScript – Strategy pattern ?. Retrieved from https://www.scien.cx/2021/09/07/javascript-strategy-pattern-%f0%9f%a7%a0/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.