js.ax

Safety tips for working with JavaScript

A collection of tips to make your JavaScript code safe for you and others.

Contributing

Please feel free to add tips to the list!

Pro Tip: separate and name your callbacks and bind them to avoid stagnant closure values

new ES arrow functions make it even more tempting to write dangerous stuff like this:

Potentially Broken Code:

function bindMyAction(getSomeValue) {

  const  someValue = getSomeValue();
  myElement.addEventListener('click',(e)=>{
    myData.remove(someValue, e.target)
  });
  //someValue is always the same for all subsequent clicks.
  //Are you sure this is what you intended?
}

Working code

function removeData(e) {
  myData.remove(this.getSomeValue(),e.target)
}

function bindMyAction(getSomeValue) {
  const clickHandler = removeData.bind({getSomeValue});
  myElement.addEventListener('click',clickHandler);
}