A few must-learn JavaScript hacks

Dec 17, 2023

Reduce if… .else noodle code

As soon as we get to writing more than two if… .else functions it’s time to think about whether there’s a better way to optimize them.
For example, if we need to calculate the price of food at McDonald’s based on the name, you might do so.

This way of writing will make the function body has a lot of conditional judgment statements, and when we want to add a product next time we need to modify the logic within the function to add an if… . . else statement, which to some extent also violates the principle of open and closed, when we need to add a logic to try to extend the software entity to solve the requirements of the change, rather than by modifying the existing code to complete the change.
This is a very classical way of optimization, we can use a similar Map structure of data to save all the goods, here we directly create an object to store.

So that the next time we need to add a commodity will not need to change the logic of getPrice, of course, here in fact, more people like to use foodMap directly in the place directly, I just gave a simple example here to express this idea.
Then this time there are students will ask, if I do not want to key only with string it, this time you can use new Map, the idea is similar, an additional extension of an entity to store changes.

If you wanted to find the food that belongs to package 1, how would you find it?
The above method is the one we used to use, obviously we replace it with using filter and map instead of for loop not only to make the code more concise, but also to make the semantics clearer, so we can see at once that it is filtering the array first and then reorganizing it.

As in the example above, find is useful if we want to find a specific food in this array of food objects by property value.

Similar to the above two details, these are existing functions, that is, we do not have to rewrite the built-in functions, use it wisely will save a lot of time.
As we all know, a bowl of Kang Mou Fu Lao Tan pickled vegetables and beef noodles has pickled vegetables, noodles, beef grain, cigarette and foot skin, then we want to use the function to confirm whether the noodles have foot skin inside how we write it will be more concise?

Similarly, it’s not just Kang Moufu’s pickled beef noodles that can be juggled this way; all similar operations to find a specific element inside an array can be called using the includes function.

We usually write some functions with return values when often to return value variable naming and tangled, and even for some long functions do not use variables but directly return, such a habit is actually bad, because the next time we refer to the code also need to re-clear the logic.
Usually, in a small function, we can use result as the return value.

However, the above use of result as the return value does not apply to all cases, there are often times when we need to end the function body early to avoid redundant reading of the program by colleagues later.
The following example when we selectedKey does not exist should immediately return, so that you do not have to continue to read the following code, otherwise the face of more complex functions will increase the cost of reading a lot.

Often when we get the data returned by the backend through the request will be processed according to some of the properties, if the number of properties to be processed is small, many students will be used to use the first method.
But in fact, this habit is not good, because when you can not determine whether the function later need to add dependent properties should keep the object intact, as I mentioned in the previous article, learn to embrace change, if getDocDetail not only to use icon and content, there may be title, date and other attributes, so we might as well directly pass the The full object is passed in, which not only adds a shorter list of parameters but also makes the code more readable.

When we need to create a new variable, sometimes we need to check if the variable referenced for its value is null or undefined, so we can use the easy way to write it.