Writers

The Nerdary

Finally, a place where web developers blog.

Your JavaScript is Iffy

By Kenny Meyers September, 4th 2010

There’s an article I wanted to share with you fine nerds, one of those that you read and it changes your perception of writing in a language.

The language is JavaScript and it’s the most important language of our times. A lot of people come to it from different languages and start applying their knowledge of how their language works to it. JavaScript is super-flexible to those needs, because it’s such a function-based language.

There are some unique tricks you can do using operators, however, which are more flexible than other languages.

So what’s a great article that can improve your JavaScript writing? This one on a great blog to subscribe to: JavaScript, JavaScript.

In the article, Angus (the author) turns this:

function getEventTarget(evt) {
    if (!evt) {
        evt = window.event;
    }
    if (!evt) {
        return;
    }
    var target;
    if (evt.target) {
        target = evt.target;
    } else {
        target = evt.srcElement;
    }
    return target;
}

…into this:

function getEventTarget(evt) {
    evt = evt || window.event;
    return evt && (evt.target || evt.srcElement);
}

If that doesn’t look like the most beautiful transformation since a truck turned into the leader of the Autobots, than you’re probably not fun at parties.

Bookmark and Share

Comments

  • Doug Avery said…

    This stuff drives me crazy because I want to use awesome ternary magic BUT it’s practically the definition of the phrase “excessive trickiness.” I feel like your example, while elegant, would make other devs at my company hit me with hammers if they had to read or edit it later. Sigh.

    Posted at 10:58 AM on February 04, 2011

  • Paul Irish said…

    I’m a big fan of funtimes with logic operators, but yeah, they can definitely be a big source of WTFs. In this case, I would definitely use the latter code, but comment the shit out of it..

     function getEventTarget(evt) {
    // evt will be the event object passed into the handler
    //   ... or (in the case of oldIE), the global window object
    evt = evt || window.event;
    // if either of those is undefined, we'll return undefined
    // otherwise we'll use the target property, which may need to be
    // grabbed from .srcElement in some cases.
    return evt && (evt.target || evt.srcElement);
}

    Posted at 07:10 PM on March 01, 2011

  • Marc Diethelm said…

    With comments like these, who needs tutorials? Would you really comment your code like this in real life? Because I know, most people wouldn’t. Rebecca probably wouldn’t. I don’t think I would.

    And please think of the tutorials!

    Posted at 04:53 AM on March 04, 2011

  • Nick Tulett said…

    If you liked that, you should check out his Russian Doll Pattern article - the only problem with the above example is that it has to check the browser’s capability every time it is called.
    This version only checks once and then monkey patches itself:

    getEventTarget = function (e) {
      getEventTarget =
          window.event ?
            function () {
              return window.event.target || window.event.srcElement;
            } :
            function (e) {
              return e.target || e.srcElement;
            }
      return getEventTarget(e);
    }

    Posted at 05:38 AM on March 07, 2011

Post a Comment