Advanced Javascript tips and tricks | Hacker News Reader

Advanced Javascript tips and tricks

code.google.com

311 pointsck235 comments

  list = list.sort(function() Math.random() - 0.5);

Please don't shuffle an array like this. Array.prototype.sort requires the comparison function to be referentially transparent (i.e. to always return the same result when given the same two elements to compare), otherwise the sort order is undefined. For example, imagine how far from "shuffled" the resulting array will be if a bubble sort is used with a randomised comparison function.

Use a Fisher-Yates shuffle instead.

While I agree in principle, there are many cases where you don't care about the statistical quality of a random shuffle, where brevity has its benefit.

I think there's also an issue of performance -- it's possible, though unlikely, that the sort could take forever to complete.

Unlikely is an understatement -- the probability of an infinite sequence of PRNG outputs that prevents any sort algorithm from terminating is negligible.

What about 'taking too much time' though?

Touche...

You don't understant. The code cited isn't even guaranteed to terminate by the spec; browsers could just go into an infinite loop if the comparison function effectively lies to them so the array never looks sorted... and this would be perfectly reasonable behavior.

So it's not that you get a bad random shuffle; it's that your code might never return from that sort() call.

And to be clear, there have been cases of "hang" bugs being reported to browser vendors in situations exactly like this one because people were writing boneheaded script like this.

When? It's not like anyone is asking you to write the shuffling code by hand, so when is time so precious, and space so constrained, that it's beneficial to use this "brief" incorrect solution over taking the 5 minutes to google a correct solution and copy-pasting that?

Fisher-Yates is a better idea, of course, since it is pretty short and runs in linear time, but if someone insists on a sort-based one-linear this should work:

  list.map(function (t) { return [Math.random(), t]; }).sort().map(function (t) { return t[1]; })

Fisher-Yates is also in-place, just like Array.prototype.sort.

Argh, I missed the edit time window: "one-linear", should be, of course, "one-liner". Fisher-Yates is O(n), but the sort makes this algorithm Omega(n log n).

What's 'Omega'?

omega() is like the opposite of O(). it means "at least" rather than "at most". — http://en.wikipedia.org/wiki/Big_Oh_notation#Family_of_Bachm...

The European Browser Choice screen was a good example of where this style of sorting can come and bite you - the browser choice screen was designed to display a selection of browsers in random order, but the above sorting code unintentionally biased it towards particular browsers.

Here's a good writeup with a bunch of test runs and graphs: http://www.robweir.com/blog/2010/02/microsoft-random-browser...

Lots of the stuff in this list is only available in Mozilla browsers. It's not part of the ECMAScript standard:

yield

Optional named function arguments

let (in the 'remove an object from an array' example)

"Convert a string into a charcode list" (both methods)

toSource method on an array ("Array iteration pitfall")

etc.

BTW I also just noticed Resig's next advanced JS book is almost done (finally!)

http://www.manning.com/resig/

and there is a 50% off code that is working for July 4th - july450

which makes it $16 for the early-edition PDF-only version

(or $20+$5 shipping for dead-tree version but it's $25 on amazon anyway)

If I learn just one new trick for $16 it's probably worth it.

I'm not sure if it's "almost done". I bought the MEAP (early access) a long time ago, and for months nothing happened at all. Then a second author came on board to get things moving.

A few days ago I got an update from Manning:

    "What's new?
    Chapter 2, "Testing and Debugging" has been added.
    Chapter 3, "Functions are fundamental" has been revised.

    What's next?
    Our next update will be coming quickly, with revised versions of Chapter 4 on closures and Chapter 5 on object-orientation with prototypes.

I haven't bothered yet to actually look at the PDF, it sounds like it's still in a rather early stage.

Ha ha, yep I bought the MEAP version of this book almost three years ago. Can't believe it's not finished yet.

inb4 duke nuken forever jokes

Some more goodies here:

http://stackoverflow.com/questions/724826/javascript-tips-an...

http://stackoverflow.com/questions/61088/hidden-features-of-...

Wow, I'm seriously overjoyed to discover the "yield" operator, which I did not know existed (it barely shows up anywhere!). No more hackishly using window.setTimeout() to yield in JS pseudo-thread simulations!

Just note the small print that yield is JS 1.7

Firefox 2 was the first to have JS 1.7 but I dunno if any version of IE has yield, maybe IE9 ?

No version of IE or Safari or Chrome has yield.

Javascript 1.x where x > 5 are proprietary extensions of Mozilla.

Some of those extensions (e.g. Array Extras) trickled into the wider language, but as far as I know most of them (including let and generators) are confined to Gecko-based browsers still.

Well, that significantly dampens my excitement...

There is a handy index of them all near the bottom:

http://code.google.com/p/jslibs/wiki/JavascriptTips#delete_a...

I use the pattern listed under "Objects private and public members" frequently and feel they missed an important point.

They really should add something like:

function MyConstructor( pub, priv ) {

  var thisMyConstructor = this; //**Copy the 'this' variable**

  var privateVariable = priv;

  this.publicVariable = pub;

Otherwise "public" variables can't be accessed in private functions because "this" no longer references the object. So, from what I've learned it's always best to copy "this" to a private variable and use the private variable for consistency.

Most of these tricks involve non-standard features of Mozilla's dialect of JavaScript.

I don't understand the need for the first example: Array.prototype.push.apply(a, b);

Isn't that what the concat() method is for?

Array.prototype.push.apply(a, b) modifies a in-place; a.concat(b) returns a copy of a with b appended to it.

I find some of them horribly obscure

     +new Date() // 1259359833574

Oh come on, magic constants? How do you check if that's the right number?

    function PrefixInteger(num, length) {

        return (num / Math.pow(10, length)).toFixed(length).substr(2);
     }

Is there no sprintf in Javascript? Or did I misunderstand what the function does?

> +new Date() // ...

Title: Milliseconds since epoch

Your browser likely has a javascript console, it's pretty useful:

  +new Date()
  1309882329679
  +new Date()
  1309882331551
  +new Date()
  1309882332511

"1259359833574" isn't a magic constant. JavaScript uses // for comments. The number is just an example of the possible output of the expression "+new Date()" (specifically, it was the time at which the author of that page evaluated the expression).

Right, and it's equivalent to the more readable

    Number(new Date())

or more simply

    Date.now()

if you don't need IE8 support.

Reply on news.ycombinator.com