I’m beginning my journey with JavaScript and programming in general.
Not having many developers around I could ask how to do this or do that
i’m learning by doing however I’d like some pro’s to look around my code
and tell me how bad it is.
Any comments for a Noob will be appreciated. Thank you in advance!
I know there is probably zillion such classes but I want to learn from
scratch and not reuse someones code at this level of my knowledge.
this function returns colors in rgba(r,g,b,a) or rgb(r,g,b) format
taking a value for each channel or a random value if “random” is a parameter for
an color channel:
someColor = nutils.getNewColor(100,200,"random","random");
will return a string in format:
"rgba(100,232,0.12)" or "rgb(100,200,234)" if no alpha is passed
Here is the code I wrote:
window.utils.getNewColor = function (rRange, gRange, bRange, alpha) {
function rValue() {
return Math.round(Math.random() * 255);
}
if (!rRange == undefined || rRange == null || typeof rRange === 'string' && rRange == "random") {
rRange = rValue();
}
if (!gRange == undefined || gRange == null || typeof gRange === 'string' && gRange == "random") {
gRange = rValue();
}
if (!bRange == undefined || bRange == null || typeof bRange === 'string' && bRange == "random") {
bRange = rValue()
}
if (typeof alpha === 'string' && alpha == "random") {
alpha = Math.round(Math.random() * 100) / 100
return "rgba(" + rRange + "," + gRange + "," + bRange + "," + alpha + ")";
} else if (typeof alpha === 'number' && alpha < 1) {
return "rgba(" + rRange + "," + gRange + "," + bRange + "," + alpha + ")";
}
else {
return "rgb(" + rRange + "," + gRange + "," + bRange + ")";
}
};
UPDATE
After reading your comments I come up with a solution based on @KooilNic advise, however slightly modified to comprehend my lack of understanding ternary operations evaluation.
Here is the modified/updated code:
utils.getNewColor = function (rRange, gRange, bRange, alpha) {
rRange = rRange || Math.round(Math.random() * 255);
gRange = gRange || Math.round(Math.random() * 255);
bRange = bRange || Math.round(Math.random() * 255);
if (alpha === undefined) {
return "rgb(" + [rRange, gRange, bRange].join(',') + ")";
} else {
alpha = alpha && alpha < 1 ? alpha : (Math.round(Math.random() * 100) / 100);
return "rgba(" + [rRange, gRange, bRange, alpha].join(',') + ")";
}
};
Consider replacing rValue with a function to include those conditional checks, like so:
That should reduce some code duplication.
Also consider reducing the places where you construct your result (
"rgb(" + ... + ")"to one or two places.EDIT:
Some people are recommending code like
!rValue || rValue == "random". Take care with this, as if you pass 0 in for rValue, you will get random colors.