Javascript Tutorial: Get rid of your messy

 Javascript Tutorial: Get rid of your messy

In this article, I will be showing how I changed my messy code that had a lot of “if statements” and long unwanted “switch cases”

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 :)

<img src="https://miro.medium.com/max/1826/14K63_xF-lMKzp2vXMz52bg.png">

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.