When you start coding an idea for some kinda solution and because you just want to see if it’s gonna work — and fast. Your code might be a little bit stinky. most of the time, not a “little bit”.

It’s ok in the beginning, but you have to clean it up.I am going to take a live example that got changed from a nasty code in the below image.

To the code in the below image.

The code is for a package that converts the Arabic names to English one Link

First of all, there was a lot of if statements that decided to sweep away.We can do that by setting JSON object with all the cases that you want to check,

So let’s say we want to check if the first letter was “م” and the second letter is either “ح” or “خ” we can say.

if(firstLetter == "م" && secondLetter == "ح" || secondLetter == "خ")
  return "u";

And it will be ok. But! What if we wanted to add more cases? It will look bad in one line, it will look bad in multi if statements lines.

AND THAT WILL LOOK SO BAD!

The Solution is:

Well, my approach was creating an object that has the first letter as a key and the value is also an object the key of it will be the secondLetter and the value will be the return value

let obj = { k:
   { m: “a” }, { r: “b” }
};

Let me re-explain what’s happening here, so “k” is the first letter,if the second letter after the “k” was “m” the return value will be “a”.and if the second letter after the “k” was “r” the return should be “b”.

The table will make it even clearer. :)

First Letter,	Second Letter,	Return Value
    k	                  m	            a
    k	                  r	            b

But if you notice, till now we didn’t return or checked anything, so let’s do it.

The function has to check if the obj got a key equals the first letter. Then it will check if there is an object belongs to the obj[firstLetter] and has the key “secondLetter”. Then we have to return the value of the second object

if(obj[firstLetter] != undefined  && obj[firstLetter][secondLetter])
   retuen obj[firstLetter][secondLetter]

But! there is even a better way to write it, right? what about the liner if.

res = obj[firstLetter] != undefined ? :
         obj[firstLetter][secondLetter] ?
           obj[firstLetter][secondLetter]
           :""
        :""

Now, in this case, we can add as many cases as we want and the code will stay organized as ever.

How to make it even better:We can add another property to the object, like an action we want to use.

let obj = { k:
   { m: “a”, action: "slice" },
   { r: “b”, action: "" }
};

Also, if you created a router to the actions, it will be even more awesome.

AND NOW THE CODE IS ALL CLEAN !!!!

You Can Check Old Code:

And The New Code!

Use this link to find the code https://github.com/hamdongunner/arabic-names-to-en

Ah, also, you may want to use one more trick, if you added a description above the functions like the one below. it will help explain, and clear what the function actually does whenever someone hovers it

/**


Some Letters depends on the coming next one to add some extra letters in between


@param {string} letter


@param {string} nextLetter


@example


checkNextLetter(‘م’, ‘ح’) => ‘muh’


*/

Check it :)

After all that I believe that we all good to go with a much better, more understandable code.

Originally published by Hamdon Gunner at  medium.com

======================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

#javascript #web-development #node-js