What is Joinable: A library to join strings together without the need to check if a value is a falsy like
Why use it: Keep your code base clean by removing the if else statements and improve the readability.
In situations where you need to concat a string to form a message based on some input, you typically create logic to construct it. You might find that you repeat an
if checking values are not a falsy. Joinable removes this from the function body and help towards readability. Joinable can be used for more than building messages see below for another example.
With Joinable it should be easy to construct strings like form validation messages, CSS classes, URLs and more.
What does it look like?
false, 0, "", undefined, null, NaN
Example joining classNames in ReactJs with logic
Example of typical logic string concatenation in ReactJS component with if statements. General issues: verbose, unnecessary repetitive complexity and mutation:
While this works fine you will probably need to repeat that similar flow for a lot of components and some will have additional complexity round it.
Lets hide that logic away and keep it clean with
Adding a conditional check in Joinable is easy with an Array structure and a length of two or three.
Joinable allows you to change the separator default of space, helping you to solve other joinString challenges:
Example of building a URL:
I’ve put effort into ensuring Joinable has good performance and has been great learning.
Things that I found made significant gains was:
- Removing the need to use Array
- Checking for joinable types
continueif value is a falsy.
joinIffunction using plain
ifstatements instead of spread operator and slice to run conditional array.
If you’re interested you can clone the repo and run the benchmark tests
npm run benchmark.
Any ideas or suggestions to improve Joinable please make an issue.