Advanced Javascript tips and tricks

http://code.google.com/p/jslibs/wiki/JavascriptTips#language_advanced_Tips_&_Tricks

by ck2 • 15 years ago

311 35 15 years ago

code.google.com

ck24• 15 years ago

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

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

yid5• 15 years ago

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!

ck24• 15 years ago

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 ?

ErikCorry2• 15 years ago

No version of IE or Safari or Chrome has yield.

masklinn• 15 years ago

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.

yid5• 15 years ago

Well, that significantly dampens my excitement...

tomstuart3• 15 years ago

  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.

yid5• 15 years ago

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.

photon_off• 15 years ago

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

bzbarsky• 15 years ago

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.

tolmasky• 15 years ago

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?

omaranto2• 15 years ago

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]; })

tomstuart3• 15 years ago

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

omaranto2• 15 years ago

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).

gmurphy• 15 years ago

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...

ck24• 15 years ago

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.

thomas11• 15 years ago

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.

niels• 15 years ago

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

ErikCorry2• 15 years ago

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.

ck24• 15 years ago

Some more goodies here:

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

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

perlgeek• 15 years ago

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?

gimpf• 15 years ago

> +new Date() // ...

Title: Milliseconds since epoch

s00pcan• 15 years ago

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

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

walrus• 15 years ago

"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).

altano• 15 years ago

Right, and it's equivalent to the more readable

    Number(new Date())

or more simply

    Date.now()

if you don't need IE8 support.

Yansky• 15 years ago

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?

tomstuart3• 15 years ago

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

IanDrake• 15 years ago

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.

tlrobinson• 15 years ago

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

Advanced Javascript tips and tricks

Related Stories