A Quick Pair of Random JavaScript Tips

I recently came across Jed Schmidt’s 140bytes project on GitHub. Jed describes the project as, “a tweet-sized, fork-to-play, community-curated collection of JavaScript.” There’s a ton of interesting (and interestingly coded) script examples from a variety of people, but my favorite part of the project so far has been the Byte-saving Techniques page on the wiki.

Here are two quick tips gleaned from the wiki.

Use ~ and indexOf to test presence

This piece of code will set a variable to a value that evaluates to true or false depending on the presence or absence of a string (your needle) in another string (your haystack).

has_my_name = "Most times, Jason knows what he's doing.".indexOf( "Jason" ) >= 0;
has_my_name = ~"Most times, Jason knows what he's doing.".indexOf( "Jason" );

The first line (the traditional method) sets has_my_name to true. The second, shorter, line sets has_my_name to -13 which, being non-zero, would also evaluate to true. I’m not entirely sure why the returned index is negative, but it works. Chris Jones unearthed this article on the tilde that more-or-less clarifies what the tilde is doing. Thanks, Chris!

Update: In Elliot's comment, he rightly notes that separating the equals and tilde works and is less obscure than "=~". I've updated the example accordingly.

Use the .link String method

Quickly generating blocks of HTML in JavaScript can be a mess of concatenated strings. Reign in some of the mess with the .link String method.

anchor = '<a href="' + url + ">' + text + '</a>';
anchor = text.link( url );

The first line is the string-concatenating method of building anchor elements with which we’re all familiar. The second line is the new hotness. Turns out, though, that it’s actually the old hotness: .link has been available to us since IE 3.0 and Netscape 2.0. If I’d known then what I know now…


There you have it, friends: two quick JavaScript tips that’ll save a couple of bytes, make your code a little cleaner, and impress your friends at dinner parties.

Jason Garber

Posted in Article Category: #Design & Content