10 ms·

The best JavaScript guide ever

278 points by alrex021 16y ago

Tichy 16y ago
While we are at it, perhaps somebody could explain this JS gotcha I recently ran into? My goal was to return something like {x:1} (an object) from a script. It never worked. If I type that into a console, it returns "1". If I type x:1 into the console, it also returns 1. So I guess the "{}" is just interpreted as a block, returning the value of the x:1 expression. But what does x:1 mean? I am guessing it might just be a bug in the interpreter? Or when is something an object, and when just a block? var a = x:1 doesn't work, btw. this.x is also still undefined after this. The only way I could return my wanted object was by doing var y = {x:1};y; (This was supposed to be the return value of a Script in NodeJS, using these silly values because it was a unit test).
- nfriedly 16y ago
  JavaScript doesn't have blocks. {} is shorthand notation for an object, so you would want something like function asdf(){ return {x:1}; } It's a less verbose way of doing this: function asdf2(){ var myObj = new Object(); myObj.x = 1; return myObj; } Outside of a object written in shorthand notation, x:1 is treated as a label (x:) followed by a value (1). In general labels are not used in JS, and it's probably a good idea to avoid them. Relatedly, to "fake" a block in JS, wrap it in a function: (function(){ var a = 1; // do something with a }()); // out side of the "block" a is undefined (or whatever value it was before the "block") [Edited for accuracy and clarity]
  - Tichy 16y ago
    Of course, a label! That explains it, thanks! I didn't have a JS reference handy at the time (and couldn't find it in the Mozilla ref in the short amount of time I had). I have actually used labels in JS before, which resulted in a lot of questions from my colleagues. I think the loop: for(...){break loop;} thing is acceptable (if for can not be avoided anyway).
  - points 16y ago
    > "JavaScript doesn't have blocks" I think what you mean to say is that Javascript doesn't have block scope for variables. It has blocks.
  - tlrobinson 16y ago
    More precisely, JavaScript doesn't have block scope. It does have syntax for grouping multiple statements into "blocks" (not sure if that's the right word), e.x. if (...) { // block } It turns out that blocks don't need to follow a control flow construct like "if", "while", etc, they can stand on their own anywhere a statement can. What's happening in the above case is the syntax for an object literal and a block is ambiguous. It's normally not a problem since you don't have object literals standing on their own as statements, you do something with them as an expression. On a console (or any time you eval an expression) you should wrap it in a parenthesis to disambiguate it: ({x:1}) // expression (object with "x" property equal to "1") {x:1} // statement (label "x" followed by statement "1")
  - nfriedly 16y ago
    Yes, as several people have mentioned, I should have said block scope. JS does allow for blocks, but they don't work the way the parent was thinking. You can toss extra curly braces in the code and it is a "block" but unless they are preceded by an "if", "for", or something similar, they don't do much. They do not return values and they do not affect variable scope. Functions do both, hence my last example.
    - Tichy 16y ago
      I think my understanding of blocks is fine. "Returning" was the wrong expression, I meant the value of a script (like the result of an eval). I am aware of the lack of block scope in JS :-)
      - nfriedly 16y ago
        Gotcha, glad you've got it figured out then =]
- points 16y ago
  var a = x:1 This is invalid. Stop guessing. Read the language spec. Best by far is "Definitive Javascript O'Reilly" {} is a block of statements. For example, {doSomething();doAnotherThing()} {} when used as an expression, is object literal notation. For example, var a = {foo:23,bar:99}; If you want to be explicit that something is an expression, enclose it in parenthesis... Console>{foo:1} 1 // "{}" = code block, "foo:" = label. Console>({foo:1}) {foo:1} Return an object: function foo() { return {bar:23, baz: function() {return 89}}; }
  - Tichy 16y ago
    Returning an object from a function was not the problem - it was "returning" from a Script (as executed by the NodeJS Script class). So essentially the last value in the script, I suppose. I like the ({x:1}) shortcut, thanks!
    - points 16y ago
      I don't quite understand what you mean by 'returning from a script'. That doesn't make too much sense within Javascript itself, if it's a case of the last expression being considered the return value (I haven't used NodeJS), then you would want: doSomething(); ({x:1});
      - tlrobinson 16y ago
        eval("{x:1}") // returns 1 eval("({x:1})") // returns {x:1}
- pdelgallego 16y ago
  This works different is firefox than in webkit. ==== if (true) { function foo(){ return 1; } } else { function foo(){ return 2; } } foo(); firefox return 1 webkit return 2 Other engines return an error (that is what is suppose to happen according to the specification)
- deleted 16y ago
  [deleted]
wazoox 16y ago
It is not a tutorial. It's a reference guide.
- alrex021 16y ago
  Good point. I'll update the title. [edit] title updated
  - aw3c2 16y ago
    Please read http://ycombinator.com/newsguidelines.html http://ycombinator.com/newsguidelines.html and edit accordingly. Something like "The Mozilla Developer Center's JavaScript Guide" would be a good title.
    - trustfundbaby 16y ago
      I think the title is fine as it is now ... makes it clear that this isn't just another JavaScript guide/tutorial.
      - city41 16y ago
        I disagree. The title is against HN's posting guidelines. It's also not unanimous, as even in the comments here people have suggested other ways to learn JS that they feel are superior. Noting in the title that this is Mozilla's JS reference is enough to give it credence and is still objective.
    - gmjosack 16y ago
      The linkbait title was ripped straight from reddit where it was also a bad title.
- dolinsky 16y ago
  ...and yet it has 17 points only being posted 16 minutes ago. Is PG working at all on an algorithm that takes into consideration factors such as the repetition with which certain accounts vote up a link (or a group of accounts) and inversely weigh that against other links sumbitted? Possibly implementing the results via the Fisher Method / Bayesian rank of some kind? As the noise to signal ratio has widened with HN's popularity I find it harder to see the 'good stuff' bubble to the top.
revjx 16y ago
Is this the same Mozilla JS reference that's been kicking around for ages? I know there seems to be a big campaign to promote JS resources at the moment, but surely everyone on HN would know about this if they have more than a passing interest in Javascript or learning it...
- adamhowell 16y ago
  It's on the frontpage of Reddit at the moment, so I assume that's why it's here, too.
kreek 16y ago
The best way I've found to learn JavaScript is through anything by Douglas Crawford. 'JavaScript the Good Parts' is especially good. http://oreilly.com/catalog/9780596517748 http://oreilly.com/catalog/9780596517748 http://www.youtube.com/watch?v=hQVTIJBZook http://www.youtube.com/watch?v=hQVTIJBZook
- kenjackson 16y ago
  I was a Javascript hater for a long time. Douglas turned me around through his videos and writing. Still not my favorite language, but I have a lot more respect for it and actually wouldn't mind writing in it if needed. I also strongly recommend his work for a better understanding of Javascript.
  - sysprv 16y ago
    Met Douglas at JAOO (http://gotocon.com/ http://gotocon.com/) this year; got him to sign my copy of "JavaScript: The Good Parts" :)
- Groxx 16y ago
  I wish more books were like that. A programming book for programmers.
- kraynar 16y ago
  Agreed, but the name is Crockford. His site, which has a bunch of interesting JavaScript links on it: http://crockford.com http://crockford.com
  - kreek 16y ago
    Woops my bad, apologies to Mr. Crockford.
    - thisisblurry 16y ago
      You'd better apologize: http://crockfordfacts.com/GN_06PA13xG5uKNcAkuh_Q http://crockfordfacts.com/GN_06PA13xG5uKNcAkuh_Q
Samuel_Michon 16y ago
I personally prefer programming guides with some humor, lots of examples and exercises. That's why I recommend Eloquent Javascript by Marijn Haverbeke. http://eloquentjavascript.net/ http://eloquentjavascript.net/
- jinfiesto 16y ago
  I agree. Eloquent Javascript is excellent.
  - lkrubner 16y ago
    At least in Google Chrome on a Mac, all I get are blank white pages. If I hit view source, then I see text, but otherwise I see no text.
    - Samuel_Michon 16y ago
      I just checked in Chrome 6 on Mac OS X 10.6.4 -- works fine here. In Safari 5 Mac as well.
    - marijn 16y ago
      Can you tell me which version you're using? I'm also not seeing any problems (in version 6), but I'd like to figure out what's happening for you.
      - 20after4 16y ago
        works for me
    - stuff4ben 16y ago
      Works for me in Chrome 6.0.472.63 on MacOS 10.6.4.
- mhb 16y ago
  And Marijn developed Postmodern for Lisp Postgres access too!
alexyim 16y ago
I like John Resig's tutorial: http://ejohn.org/apps/learn/ http://ejohn.org/apps/learn/
- thisisblurry 16y ago
  I used Resig's a few days ago to quickly fix a bug at work. He really does a great job of making very complex language constructs understandable and easy to follow.
ez77 16y ago
A bit off topic: does anybody know why Mozilla uses https for this kind of open stuff?
pyre 16y ago
Sorry, I must have missed the download/offline option. Care to link me up?
- marijn 16y ago
  http://eloquentjavascript.net/Eloquent%20JavaScript.zip http://eloquentjavascript.net/Eloquent%20JavaScript.zip (sorry)
etherael 16y ago
This used to be my sole resource for everything javascript, it is actually very good still but there's a slight catch; beware cross browser compatibility issues, especially with IE, especially especially with older versions of IE.
wtn 16y ago
Would be nice if they allowed you to download a tarball of the whole guide.
eel 16y ago
I do like the content of MDC, but it can be frustrating at times, as it seems to have broken links (links that go to pages which have had their content merged into a different page). Or apparently, on the Processing XML with E4X page, there are errors in the page: /content/body/div[2]/pre[1]/@function, reference to undefined name 'syntax': line 1, column 1 where every code sample should be. It's under a CC license, so I am hoping that someone will make a better interface for the content some day.

278 points by alrex021 16y ago

Tichy 16y ago

While we are at it, perhaps somebody could explain this JS gotcha I recently ran into? My goal was to return something like {x:1} (an object) from a script. It never worked. If I type that into a console, it returns "1". If I type x:1 into the console, it also returns 1. So I guess the "{}" is just interpreted as a block, returning the value of the x:1 expression. But what does x:1 mean? I am guessing it might just be a bug in the interpreter? Or when is something an object, and when just a block? var a = x:1 doesn't work, btw. this.x is also still undefined after this. The only way I could return my wanted object was by doing var y = {x:1};y; (This was supposed to be the return value of a Script in NodeJS, using these silly values because it was a unit test).

nfriedly 16y ago
JavaScript doesn't have blocks. {} is shorthand notation for an object, so you would want something like function asdf(){ return {x:1}; } It's a less verbose way of doing this: function asdf2(){ var myObj = new Object(); myObj.x = 1; return myObj; } Outside of a object written in shorthand notation, x:1 is treated as a label (x:) followed by a value (1). In general labels are not used in JS, and it's probably a good idea to avoid them. Relatedly, to "fake" a block in JS, wrap it in a function: (function(){ var a = 1; // do something with a }()); // out side of the "block" a is undefined (or whatever value it was before the "block") [Edited for accuracy and clarity]
- Tichy 16y ago
  Of course, a label! That explains it, thanks! I didn't have a JS reference handy at the time (and couldn't find it in the Mozilla ref in the short amount of time I had). I have actually used labels in JS before, which resulted in a lot of questions from my colleagues. I think the loop: for(...){break loop;} thing is acceptable (if for can not be avoided anyway).
- points 16y ago
  > "JavaScript doesn't have blocks" I think what you mean to say is that Javascript doesn't have block scope for variables. It has blocks.
- tlrobinson 16y ago
  More precisely, JavaScript doesn't have block scope. It does have syntax for grouping multiple statements into "blocks" (not sure if that's the right word), e.x. if (...) { // block } It turns out that blocks don't need to follow a control flow construct like "if", "while", etc, they can stand on their own anywhere a statement can. What's happening in the above case is the syntax for an object literal and a block is ambiguous. It's normally not a problem since you don't have object literals standing on their own as statements, you do something with them as an expression. On a console (or any time you eval an expression) you should wrap it in a parenthesis to disambiguate it: ({x:1}) // expression (object with "x" property equal to "1") {x:1} // statement (label "x" followed by statement "1")
- nfriedly 16y ago
  Yes, as several people have mentioned, I should have said block scope. JS does allow for blocks, but they don't work the way the parent was thinking. You can toss extra curly braces in the code and it is a "block" but unless they are preceded by an "if", "for", or something similar, they don't do much. They do not return values and they do not affect variable scope. Functions do both, hence my last example.
  - Tichy 16y ago
    I think my understanding of blocks is fine. "Returning" was the wrong expression, I meant the value of a script (like the result of an eval). I am aware of the lack of block scope in JS :-)
    - nfriedly 16y ago
      Gotcha, glad you've got it figured out then =]
points 16y ago
var a = x:1 This is invalid. Stop guessing. Read the language spec. Best by far is "Definitive Javascript O'Reilly" {} is a block of statements. For example, {doSomething();doAnotherThing()} {} when used as an expression, is object literal notation. For example, var a = {foo:23,bar:99}; If you want to be explicit that something is an expression, enclose it in parenthesis... Console>{foo:1} 1 // "{}" = code block, "foo:" = label. Console>({foo:1}) {foo:1} Return an object: function foo() { return {bar:23, baz: function() {return 89}}; }
- Tichy 16y ago
  Returning an object from a function was not the problem - it was "returning" from a Script (as executed by the NodeJS Script class). So essentially the last value in the script, I suppose. I like the ({x:1}) shortcut, thanks!
  - points 16y ago
    I don't quite understand what you mean by 'returning from a script'. That doesn't make too much sense within Javascript itself, if it's a case of the last expression being considered the return value (I haven't used NodeJS), then you would want: doSomething(); ({x:1});
    - tlrobinson 16y ago
      eval("{x:1}") // returns 1 eval("({x:1})") // returns {x:1}
pdelgallego 16y ago
This works different is firefox than in webkit. ==== if (true) { function foo(){ return 1; } } else { function foo(){ return 2; } } foo(); firefox return 1 webkit return 2 Other engines return an error (that is what is suppose to happen according to the specification)
deleted 16y ago
[deleted]

wazoox 16y ago

It is not a tutorial. It's a reference guide.

alrex021 16y ago
Good point. I'll update the title. [edit] title updated
- aw3c2 16y ago
  Please read http://ycombinator.com/newsguidelines.html http://ycombinator.com/newsguidelines.html and edit accordingly. Something like "The Mozilla Developer Center's JavaScript Guide" would be a good title.
  - trustfundbaby 16y ago
    I think the title is fine as it is now ... makes it clear that this isn't just another JavaScript guide/tutorial.
    - city41 16y ago
      I disagree. The title is against HN's posting guidelines. It's also not unanimous, as even in the comments here people have suggested other ways to learn JS that they feel are superior. Noting in the title that this is Mozilla's JS reference is enough to give it credence and is still objective.
  - gmjosack 16y ago
    The linkbait title was ripped straight from reddit where it was also a bad title.
dolinsky 16y ago
...and yet it has 17 points only being posted 16 minutes ago. Is PG working at all on an algorithm that takes into consideration factors such as the repetition with which certain accounts vote up a link (or a group of accounts) and inversely weigh that against other links sumbitted? Possibly implementing the results via the Fisher Method / Bayesian rank of some kind? As the noise to signal ratio has widened with HN's popularity I find it harder to see the 'good stuff' bubble to the top.

revjx 16y ago

Is this the same Mozilla JS reference that's been kicking around for ages? I know there seems to be a big campaign to promote JS resources at the moment, but surely everyone on HN would know about this if they have more than a passing interest in Javascript or learning it...

adamhowell 16y ago
It's on the frontpage of Reddit at the moment, so I assume that's why it's here, too.

kreek 16y ago

The best way I've found to learn JavaScript is through anything by Douglas Crawford. 'JavaScript the Good Parts' is especially good. http://oreilly.com/catalog/9780596517748 http://oreilly.com/catalog/9780596517748 http://www.youtube.com/watch?v=hQVTIJBZook http://www.youtube.com/watch?v=hQVTIJBZook

kenjackson 16y ago
I was a Javascript hater for a long time. Douglas turned me around through his videos and writing. Still not my favorite language, but I have a lot more respect for it and actually wouldn't mind writing in it if needed. I also strongly recommend his work for a better understanding of Javascript.
- sysprv 16y ago
  Met Douglas at JAOO (http://gotocon.com/ http://gotocon.com/) this year; got him to sign my copy of "JavaScript: The Good Parts" :)
Groxx 16y ago
I wish more books were like that. A programming book for programmers.
kraynar 16y ago
Agreed, but the name is Crockford. His site, which has a bunch of interesting JavaScript links on it: http://crockford.com http://crockford.com
- kreek 16y ago
  Woops my bad, apologies to Mr. Crockford.
  - thisisblurry 16y ago
    You'd better apologize: http://crockfordfacts.com/GN_06PA13xG5uKNcAkuh_Q http://crockfordfacts.com/GN_06PA13xG5uKNcAkuh_Q

Samuel_Michon 16y ago

I personally prefer programming guides with some humor, lots of examples and exercises. That's why I recommend Eloquent Javascript by Marijn Haverbeke. http://eloquentjavascript.net/ http://eloquentjavascript.net/

jinfiesto 16y ago
I agree. Eloquent Javascript is excellent.
- lkrubner 16y ago
  At least in Google Chrome on a Mac, all I get are blank white pages. If I hit view source, then I see text, but otherwise I see no text.
  - Samuel_Michon 16y ago
    I just checked in Chrome 6 on Mac OS X 10.6.4 -- works fine here. In Safari 5 Mac as well.
  - marijn 16y ago
    Can you tell me which version you're using? I'm also not seeing any problems (in version 6), but I'd like to figure out what's happening for you.
    - 20after4 16y ago
      works for me
  - stuff4ben 16y ago
    Works for me in Chrome 6.0.472.63 on MacOS 10.6.4.
mhb 16y ago
And Marijn developed Postmodern for Lisp Postgres access too!

alexyim 16y ago

I like John Resig's tutorial: http://ejohn.org/apps/learn/ http://ejohn.org/apps/learn/

thisisblurry 16y ago
I used Resig's a few days ago to quickly fix a bug at work. He really does a great job of making very complex language constructs understandable and easy to follow.

ez77 16y ago

A bit off topic: does anybody know why Mozilla uses https for this kind of open stuff?

pyre 16y ago

Sorry, I must have missed the download/offline option. Care to link me up?

marijn 16y ago
http://eloquentjavascript.net/Eloquent%20JavaScript.zip http://eloquentjavascript.net/Eloquent%20JavaScript.zip (sorry)

etherael 16y ago

This used to be my sole resource for everything javascript, it is actually very good still but there's a slight catch; beware cross browser compatibility issues, especially with IE, especially especially with older versions of IE.

wtn 16y ago

Would be nice if they allowed you to download a tarball of the whole guide.

eel 16y ago

I do like the content of MDC, but it can be frustrating at times, as it seems to have broken links (links that go to pages which have had their content merged into a different page). Or apparently, on the Processing XML with E4X page, there are errors in the page: /content/body/div[2]/pre[1]/@function, reference to undefined name 'syntax': line 1, column 1 where every code sample should be. It's under a CC license, so I am hoping that someone will make a better interface for the content some day.