How to Write a IF Statement that determine a value<!-- --> | <!-- -->Patrick Desjardins Blog
Patrick Desjardins Blog
Patrick Desjardins picture from a conference

How to Write a IF Statement that determine a value

Posted on: October 5, 2016

Pretty much a basic case if you have done some programming. How to write a IF statement is an agnostic problem when it's to assign one or multiple variables to be used. There is two patterns that I often see. The first one assign the variable or property directly. if (/*what ever*/) { this.icon = "icon1"; } else { this.icon = "icon2"; } The second approach set the value into a temporary, scoped, variable and at the end of the IF assign the value to the field/property. ``` var iconType = ""; if (/what ever/) { iconType = "icon1"; } else { iconType = "icon2"; } this.icon = iconType ;

These two examples could be that instead of assigning to this.icon would be that we call this.featureMethod(icon). Like the two examples above, in the first approach, you would see the method twice, while on the second approach you would assign the value into a variable and have the method call once at the end. The first approach is appealing because you do not have to assign a temporary variable. However, we have code duplication that doesn't seem to bother most people. The real problem is in code maintenance. If the method that needs to be invoked change it's signature, you have two places to change instead of 1. If the IF become with more condition (else if) you will have to call the method (or assign field/property) few more times instead of just keeping a single call. These two argumentation leans in favor of the second approach and there is more. The second approach is cleaner in term of figuring out what is going on. The first approach is taking a decision and executing at the same time. If you look at the method, you cannot have a clear view of what is happening. From top to bottom you have multiple sections that do a condition check + action. Thus, the second approach is cleaner. We could even break down the code into two distinct part: arrange and act. We could refactor the method into 2 sub-methods which one determines the values to be used and the second that set values or calls methods.
I am bringing that point because the first approach seems to be taken with the argument that it's the same as the second one. The real justification is that the first one is taking 2 lines of code less, hence faster to type which make it an easy default choice. If you are using the first approach, I suggest that you try for few times the second approach. You will see the benefits slowly when working and modifying that code again in the future.
here is an example of 3 temporary variables

function getMyLink(threshold: number) { // Default let url: string = "http://aboveHundred.com"; let className: string = "default"; let padding: number = 0; // Logics if (threshold <= 0) { url = "http://underOrZero.com"; className = "dark-theme"; padding = 100; } else if (threshold > 0 && threshold < 100) { url = "http://betweenZeroAndHundred.com"; className = "light-theme"; padding = 200; } // Assignments this.url = url; this.className = className; this.padding = padding; }

If the next iteration of changes in the code requires to change one of the assignment to other variable, we have a single place to change. If instead of assigning we need to return something, we also have a single place to change.

function getMyLink(threshold: number) { // Default let url: string = "http://aboveHundred.com"; let className: string = "default"; let padding: number = 0; // Logics if (threshold <= 0) { url = "http://underOrZero.com"; className = "dark-theme"; padding = 100; } else if (threshold > 0 && threshold < 100) { url = "http://betweenZeroAndHundred.com"; className = "light-theme"; padding = 200; } // Now we return return <a href="${url}" class="${className}" style="padding:${padding}">Click Here</a>; }

There are pros and cons in both, but the one I illustrate has more pros than cons in my opinion.
To recap about the advantage of having to assign values and then calling or assigning:
- Remove code duplication
- Easier refactoring since only one signature to change
- Clearer readability of what happen into a method
- Allow faster refactoring into smaller methods
export const _frontmatter = {"title":"How to Write a IF Statement that determine a value","date":"2016-10-05","categories":["best-practices","c-sharp","javascript","typescript"]}