Code bloat

Examples

The following algorithm is written in JavaScript, and can generate an HTML <img> tag based on user input. It contains a large number of redundant code: unnecessary logic and variables, and inefficient string concatenation.

<span id="mwJQ"></span><span class="c1" id="mwJg">// Complex</span> <span class="kd" id="mwJw">function</span><span class="w" id="mwKA"> </span><span class="nx" id="mwKQ">TK2getImageHTML</span><span class="p" id="mwKg">(</span><span class="nx" id="mwKw">size</span><span class="p" id="mwLA">,</span><span class="w" id="mwLQ"> </span><span class="nx" id="mwLg">zoom</span><span class="p" id="mwLw">,</span><span class="w" id="mwMA"> </span><span class="nx" id="mwMQ">sensor</span><span class="p" id="mwMg">,</span><span class="w" id="mwMw"> </span><span class="nx" id="mwNA">markers</span><span class="p" id="mwNQ">)</span><span class="w" id="mwNg"> </span><span class="p" id="mwNw">{</span> <span class="w" id="mwOA"> </span><span class="kd" id="mwOQ">const</span><span class="w" id="mwOg"> </span><span class="nx" id="mwOw">strHTMLStart</span><span class="w" id="mwPA"> </span><span class="o" id="mwPQ">=</span><span class="w" id="mwPg"> </span><span class="s1" id="mwPw">'<img src="'</span><span class="p" id="mwQA">;</span> <span class="w" id="mwQQ"> </span><span class="kd" id="mwQg">const</span><span class="w" id="mwQw"> </span><span class="nx" id="mwRA">strHTMLEnd</span><span class="w" id="mwRQ"> </span><span class="o" id="mwRg">=</span><span class="w" id="mwRw"> </span><span class="s1" id="mwSA">'" alt="The map"/>'</span><span class="p" id="mwSQ">;</span> <span class="w" id="mwSg"> </span><span class="kd" id="mwSw">var</span><span class="w" id="mwTA"> </span><span class="nx" id="mwTQ">strFinalImage</span><span class="w" id="mwTg"> </span><span class="o" id="mwTw">=</span><span class="w" id="mwUA"> </span><span class="s2" id="mwUQ">""</span><span class="p" id="mwUg">;</span> <span class="w" id="mwUw"> </span><span class="kd" id="mwVA">var</span><span class="w" id="mwVQ"> </span><span class="nx" id="mwVg">strURL</span><span class="w" id="mwVw"> </span><span class="o" id="mwWA">=</span><span class="w" id="mwWQ"> </span><span class="s2" id="mwWg">"https://example.com/staticmap?center="</span><span class="p" id="mwWw">;</span> <span class="w" id="mwXA"> </span><span class="kd" id="mwXQ">var</span><span class="w" id="mwXg"> </span><span class="nx" id="mwXw">strSize</span><span class="w" id="mwYA"> </span><span class="o" id="mwYQ">=</span><span class="w" id="mwYg"> </span><span class="s1" id="mwYw">'&size='</span><span class="o" id="mwZA">+</span><span class="w" id="mwZQ"> </span><span class="nx" id="mwZg">size</span><span class="p" id="mwZw">;</span> <span class="w" id="mwaA"> </span><span class="kd" id="mwaQ">var</span><span class="w" id="mwag"> </span><span class="nx" id="mwaw">strZoom</span><span class="w" id="mwbA"> </span><span class="o" id="mwbQ">=</span><span class="w" id="mwbg"> </span><span class="s1" id="mwbw">'&zoom='</span><span class="o" id="mwcA">+</span><span class="w" id="mwcQ"> </span><span class="nx" id="mwcg">zoom</span><span class="p" id="mwcw">;</span> <span class="w" id="mwdA"> </span><span class="kd" id="mwdQ">var</span><span class="w" id="mwdg"> </span><span class="nx" id="mwdw">strSensor</span><span class="w" id="mweA"> </span><span class="o" id="mweQ">=</span><span class="w" id="mweg"> </span><span class="s1" id="mwew">'&sensor='</span><span class="o" id="mwfA">+</span><span class="w" id="mwfQ"> </span><span class="nx" id="mwfg">sensor</span><span class="p" id="mwfw">;</span><span class="w" id="mwgA"> </span> <span class="w" id="mwgQ"> </span> <span class="w" id="mwgg"> </span><span class="nx" id="mwgw">strURL</span><span class="w" id="mwhA"> </span><span class="o" id="mwhQ">+=</span><span class="w" id="mwhg"> </span><span class="nx" id="mwhw">markers</span><span class="p" id="mwiA">[</span><span class="mf" id="mwiQ">0</span><span class="p" id="mwig">].</span><span class="nx" id="mwiw">latitude</span><span class="p" id="mwjA">;</span> <span class="w" id="mwjQ"> </span><span class="nx" id="mwjg">strURL</span><span class="w" id="mwjw"> </span><span class="o" id="mwkA">+=</span><span class="w" id="mwkQ"> </span><span class="s2" id="mwkg">","</span><span class="p" id="mwkw">;</span> <span class="w" id="mwlA"> </span><span class="nx" id="mwlQ">strURL</span><span class="w" id="mwlg"> </span><span class="o" id="mwlw">+=</span><span class="w" id="mwmA"> </span><span class="nx" id="mwmQ">markers</span><span class="p" id="mwmg">[</span><span class="mf" id="mwmw">0</span><span class="p" id="mwnA">].</span><span class="nx" id="mwnQ">longitude</span><span class="p" id="mwng">;</span> <span class="w" id="mwnw"> </span><span class="nx" id="mwoA">strURL</span><span class="w" id="mwoQ"> </span><span class="o" id="mwog">+=</span><span class="w" id="mwow"> </span><span class="nx" id="mwpA">strSize</span><span class="p" id="mwpQ">;</span> <span class="w" id="mwpg"> </span><span class="nx" id="mwpw">strURL</span><span class="w" id="mwqA"> </span><span class="o" id="mwqQ">+=</span><span class="w" id="mwqg"> </span><span class="nx" id="mwqw">strZoom</span><span class="p" id="mwrA">;</span> <span class="w" id="mwrQ"> </span><span class="nx" id="mwrg">strURL</span><span class="w" id="mwrw"> </span><span class="o" id="mwsA">+=</span><span class="w" id="mwsQ"> </span><span class="nx" id="mwsg">strSensor</span><span class="p" id="mwsw">;</span> <span class="w" id="mwtA"> </span> <span class="w" id="mwtQ"> </span><span class="k" id="mwtg">for</span><span class="w" id="mwtw"> </span><span class="p" id="mwuA">(</span><span class="kd" id="mwuQ">var</span><span class="w" id="mwug"> </span><span class="nx" id="mwuw">i</span><span class="w" id="mwvA"> </span><span class="o" id="mwvQ">=</span><span class="w" id="mwvg"> </span><span class="mf" id="mwvw">0</span><span class="p" id="mwwA">;</span><span class="w" id="mwwQ"> </span><span class="nx" id="mwwg">i</span><span class="w" id="mwww"> </span><span class="o" id="mwxA"><</span><span class="w" id="mwxQ"> </span><span class="nx" id="mwxg">markers</span><span class="p" id="mwxw">.</span><span class="nx" id="mwyA">length</span><span class="p" id="mwyQ">;</span><span class="w" id="mwyg"> </span><span class="nx" id="mwyw">i</span><span class="o" id="mwzA">++</span><span class="p" id="mwzQ">)</span><span class="w" id="mwzg"> </span><span class="p" id="mwzw">{</span> <span class="w" id="mw0A"> </span><span class="nx" id="mw0Q">strURL</span><span class="w" id="mw0g"> </span><span class="o" id="mw0w">+=</span><span class="w" id="mw1A"> </span><span class="nx" id="mw1Q">markers</span><span class="p" id="mw1g">[</span><span class="nx" id="mw1w">i</span><span class="p" id="mw2A">].</span><span class="nx" id="mw2Q">addMarker</span><span class="p" id="mw2g">();</span> <span class="w" id="mw2w"> </span><span class="p" id="mw3A">}</span> <span class="w" id="mw3Q"> </span> <span class="w" id="mw3g"> </span><span class="nx" id="mw3w">strFinalImage</span><span class="w" id="mw4A"> </span><span class="o" id="mw4Q">=</span><span class="w" id="mw4g"> </span><span class="nx" id="mw4w">strHTMLStart</span><span class="w" id="mw5A"> </span><span class="o" id="mw5Q">+</span><span class="w" id="mw5g"> </span><span class="nx" id="mw5w">strURL</span><span class="w" id="mw6A"> </span><span class="o" id="mw6Q">+</span><span class="w" id="mw6g"> </span><span class="nx" id="mw6w">strHTMLEnd</span><span class="p" id="mw7A">;</span> <span class="w" id="mw7Q"> </span><span class="k" id="mw7g">return</span><span class="w" id="mw7w"> </span><span class="nx" id="mw8A">strFinalImage</span><span class="p" id="mw8Q">;</span> <span class="p" id="mw8g">}</span>

The same algorithm above can be rewritten to be less redundant and more efficient as follows (although not as readable):

<span id="mw9g"></span><span class="c1" id="mw9w">// Simplified</span> <span class="kd" id="mw-A">function</span><span class="w" id="mw-Q"> </span><span class="nx" id="mw-g">TK2getImageHTML</span><span class="p" id="mw-w">(</span><span class="nx" id="mw_A">sz</span><span class="p" id="mw_Q">,</span><span class="w" id="mw_g"> </span><span class="nx" id="mw_w">zm</span><span class="p" id="mwAQA">,</span><span class="w" id="mwAQE"> </span><span class="nx" id="mwAQI">sens</span><span class="p" id="mwAQM">,</span><span class="w" id="mwAQQ"> </span><span class="nx" id="mwAQU">mks</span><span class="p" id="mwAQY">){</span> <span class="w" id="mwAQc"> </span><span class="kd" id="mwAQg">let</span><span class="w" id="mwAQk"> </span><span class="nx" id="mwAQo">url</span><span class="o" id="mwAQs">=</span><span class="s2" id="mwAQw">""</span> <span class="w" id="mwAQ0"> </span><span class="nx" id="mwAQ4">mks</span><span class="p" id="mwAQ8">.</span><span class="nx" id="mwARA">forEach</span><span class="p" id="mwARE">(</span><span class="nx" id="mwARI">mk</span><span class="w" id="mwARM"> </span><span class="p" id="mwARQ">=></span><span class="w" id="mwARU"> </span><span class="nx" id="mwARY">url</span><span class="w" id="mwARc"> </span><span class="o" id="mwARg">+=</span><span class="w" id="mwARk"> </span><span class="nx" id="mwARo">mk</span><span class="p" id="mwARs">.</span><span class="nx" id="mwARw">addMarker</span><span class="p" id="mwAR0">())</span> <span class="w" id="mwAR4"> </span><span class="k" id="mwAR8">return</span><span class="w" id="mwASA"> </span><span class="sb" id="mwASE">`<img src="https://example.com/staticmap?center=</span><span class="si" id="mwASI">${</span><span class="nx" id="mwASM">mks</span><span class="p" id="mwASQ">[</span><span class="mf" id="mwASU">0</span><span class="p" id="mwASY">].</span><span class="nx" id="mwASc">latitude</span><span class="si" id="mwASg">}</span><span class="sb" id="mwASk">,</span><span class="si" id="mwASo">${</span><span class="nx" id="mwASs">mks</span><span class="p" id="mwASw">[</span><span class="mf" id="mwAS0">0</span><span class="p" id="mwAS4">].</span><span class="nx" id="mwAS8">longitude</span><span class="si" id="mwATA">}</span><span class="sb" id="mwATE">&size=</span><span class="si" id="mwATI">${</span><span class="nx" id="mwATM">sz</span><span class="si" id="mwATQ">}</span><span class="sb" id="mwATU">&zoom=</span><span class="si" id="mwATY">${</span><span class="nx" id="mwATc">zm</span><span class="si" id="mwATg">}</span><span class="sb" id="mwATk">&sensor=</span><span class="si" id="mwATo">${</span><span class="nx" id="mwATs">sens</span><span class="si" id="mwATw">}${</span><span class="nx" id="mwAT0">url</span><span class="si" id="mwAT4">}</span><span class="sb" id="mwAT8">" alt="The map">`</span> <span class="p" id="mwAUA">}</span>