Common javascript bugs and gotchas
Javascript

Common javascript bugs and gotchas

Here is a list of common javascript bugs and gotchas our startup has encountered:

  1. Using jquery element.off without a namespace to turn off specific event callback.
    1. Problem: it turns off all callbacks registered to the event and not only the callback you desire to remove.
  2. Using jquery selector without ‘>’, for example: $(“.class1 .class2”) or element.find(“.class1 .class2”).
    1. Problem: those selectors will select all .class2 elements under .class1 while usually the requirement is to select the immediate children\grandchildren. Use ‘>’ to solve this.
  3. Using multiple get\set of dom properties in executing code causing multi-rendering of the DOM.
    1. Problem: reading properties such as width causes the DOM to render to get the correct width, then setting property and reading again will cause the DOM to render again. See the following library which is supposed to help deal with this problem: https://github.com/wilsonpage/fastdom
  4. Removing jquery-data-set html elements with the native html methods – remove,removeChild
    1. Problem: if the elements might have been added ‘.data’ by jquery, then removing them with those html functions will cause jquery to keep the ‘.data’ without deleting it which causes a memory leak.
  5. Using jquery .on instead of .one
    1. Problem: some initialization code should run only once and developers use .on instead of .one because they don’t think the function where the .on happens will be called more than once. This might be a wrong assumption and the best practice is to use .one always for code which runs only once.
  6. Registering callback to event in code which is executed multiple times.
    1. Problem: it causes multiple unnecessary registrations of same code to an event. Avoid using $(window).resize and instead use .off(“resize.” + namespace).on(“resize.” + namespace) and same about hover and others.
  7. Assuming javascript innerHTML gives all of the inner html.
    1. Problem: javascript innerHTML can’t handle html entities well, need use: https://github.com/mathiasbynens/he to handle it
  8. Using (obj[“property”]) to check if property exists.
    1. Problem: it will return false even if property exists but evaluates to false.
  9. Using stopPropagation or return false from event.
    1. Problem: it blocks other functionality and requires other code to change to handle it. Usually its a workaround and not a fix to do this, and instead a fix for the bug or behavior should be looked for.
  10. Create empty <a> with javascript:; in href when not wanting anything to happen on click.
    1. Problem: it causes click to jump to top of page. Use href=”javascript:void(0);” instead.
  11. Use document.elementFromPoint on event location.
    1. Problem: use event target instead or other method because for example in IE the document.elementFromPoint on an svg returns always the <svg> element and not its children.
  12. Using .classList, Blob, FileReader, .startsWith, .forEach without shimming.
    1. Problem: they are not supported by some browsers. Don’t forget to use shimming\polyfilling for them.
  13. Using bootstrap tooltip on an element without propert height\width.
    1. Problem: Bootstrap tooltip calculates position according to element width and height which should be set correctly if the tooltip is used.
  14. Run important code in the $(window).load event in pages which have videos or long loading elements.
    1. Problem: it will take a while to wait for the heavy elements to load and meanwhile the important code will not run and cause a bad UX.
  15. Register callback to scrolling or window resize.
    1. Problem: those events might happen multiple times when they happen and usually the code being run should run only once every some period (at-least a second). Use throttle\debounce to solve this (lodash library has an implementation).
  16. Assume jquery window load executes before jquery document ready.
    1. Problem: wrong assumption because sometimes jquery document ready happens before jquery window load.
  17. Use a dynamic parameter for window.setTimeout time period without handling the value 0 in a special way.
    1. Problem: window.setTimeout with time of 0 causes the code to execute asynchronously which is different than not using window.setTimeout at all. In many cases passing time of 0 means not to execute window.setTimeout at all so this case should be handled separately for correct behavior.
  18. Allow svg upload by assuming its a picture format.
    1. Problem: svg format allows code execution and is dangerous in general and if not necessary then should be forbidden to be uploaded. See the following link for a discussion on whether to allow svg upload in wordpress and after many years the discussion still didn’t come to a conclusion that svg is safe: https://core.trac.wordpress.org/ticket/24251

Leave your thought here