views:

11109

answers:

29

Is there a set of things that every JavaScript programmer should know to be able to say "I know JavaScript"?

+6  A: 

jQuery would be my best recommendation. Not just for the code itself, it's the idiom, the style, the thinking behind it that's most worthy of emulation.

duffymo
+1 Jquery has revolutionised my use of javascript.
amelvin
Good argument outline. Expanding would make it a *great* answer.
Donal Fellows
+18  A: 

Javascript objects and function as first-class citizen, callbacks, not to forget about events and then JQuery.

Sarfraz
+1 Good reasoning
amelvin
@amelvin: Thanks..... :)
Sarfraz
Ah jQuery, the overhyped JS framework!
Murali VP
+1  A: 

JSLint http://www.JSLint.com/

Richard Inglis
+6  A: 

That JavaScript is much more different than other languages than you might think. Watch this great Google Tech Talk to get an impression: http://www.youtube.com/watch?v=hQVTIJBZook

eteubert
+1 This is a great explanation of how to stop JavaScript sucking. These are worth watching afterwards: http://yuiblog.com/crockford/
Colonel Sponsz
Another good Crockfod presentation ("The JavaScript Programming Language" 4 parts) http://video.yahoo.com/watch/111593/1710507
Alex K.
+1 Didn't know about this.
amelvin
+14  A: 

How to use the good parts, and how to avoid the awful parts.

Daniel Vassallo
+1 The best book to read on JavaScript; and also Flanagan's book
Andreas Grech
+21  A: 

..that javascript is not java :)

Many, many people starting with website development have told me javascript is just simple java!

sri
+1 This point is pretty fundamental!
amelvin
I'd like to think a JS programmer would know this, but it's all to common to here people unfamiliar with the language ask/state this.
Finglas
“JavaScript is to Java as carpet is to car.”
jleedev
Javascript is about as similar to Java as C# is similar to C. Sure there syntax looks kinda similar, but way way different.
Earlz
unless they use Google Web Toolkit
afriza
Interestingly, Microsoft did base the Y2k compliant date functions in JScript for IE3 on java.util.Date.
Bayard Randel
+22  A: 
  1. Familiarize yourself with atleast one Javascript library ( Jquery, Prototype, etc ).

  2. Learn how to use the debugging tools of the major browsers ( MSIE 7-8, Firefox, Chrome, Safari )

  3. Read up on the industry: Douglas Crockford's website is a treasure trove while Ajaxian.com is a good blog to keep up on new, interesting, and or odd ideas for Javascript. There are a number of other resources but those are the ones that helped me the most.

David
Seriously, why the down vote?
David
+1 Too much tactical voting, seriously people should just upvote the good answers not just try to foist their answer to the top.
amelvin
David
@Murali VP To be fair, Javascript has come a long way since I started using it in the 90's and with the exception of Microsoft, the other Javascript interpreters have done impressive work to obey the specifications and play fair.
David
@David thanks for the nice explanation. Tend to agree with you.
Murali VP
I downvoted simply because I don't feel the answers have anything to do with the JavaScript language itself. Although they are excellent advice.
ScottKoon
+46  A: 

Understanding the stuff written in Crockford's Javascript: The Good Parts is a pretty good assumption that a person is a decent JS programmer.

You can pretty much know how to use a good library like JQuery and still not know the hidden parts of Javascript.

Another note is Debugging tools on various browsers. A JS programmer should know how to debug his code in different browsers.

Oh! And knowing JSLint will totally hurt your feelings!!

bron
+1 Keep forgetting about that book, excellent recommendation.
David
+1 good points.
Daniel Vassallo
There are also a lot of instructive and insightful Crockford videos at http://developer.yahoo.com/yui/theater/ - and I think I need not mention http://crockfordfacts.com/ :-)
ndim
+1 - JSLint is a wonderful thing when you try developing JS for a framework that has zero embedded debugging support (*cough* Siebel, *cough* PDFs).
sheepsimulator
+7  A: 

For knowing that Javascript was originally called LiveScript and the 'Java' prefix was attached for marketing purposes not because Java and Javascript are related (which they are not).

Oh and for owning any version of David Flanagan's 'Javascript: The Definitive Guide' (this information is on page 2).

... and for appreciating those that have gone before in trying to obfuscate Internet Explorer 4's document.all[] and Netscape Navigator 4's document.layers[] before the likes of Jquery took away the pain.

EDIT:

As @Kinopiko points out JavaScript was called project Mocha originally (some sources also reckon it was called project LiveWire) but it is generally accepted that the language (written by Brendan Eich) was slated to be released as LiveScript before the Java prefix was adopted on release in early 1996.

amelvin
+1 for picking tit bits from Douglas Crockford!
gath
I thought JavaScript was originally called Mocha?
Kinopiko
@Kinopiko According to my 'Javascript: The Definitive Guide' 3ed (June 1998) book by David Flanaghan it was called LiveScript.
amelvin
@gath A day when you learn something is a good day!
amelvin
Sez Mocha here: http://en.wikipedia.org/wiki/JavaScript
Kinopiko
@amelvin Every day's a school day.
Colonel Sponsz
@Kinopiko Agreed that on wikipedia it says it was called Mocha, then LiveScript then JavaScript. But it was never released as Mocha (or LiveWire another of its project names) it was intended to be released as LiveScript - before the Java bandwagon lead to a last minute release change.
amelvin
Even though it was never released as Mocha, Netscape up to at least version 4 would interpret `mocha:` as equivalent to `javascript:` as an URL scheme.
Kragen Javier Sitaker
A: 

Since JS is a functional language, a decent JS programmer must be able to write Y-combinator and explain how it works off the top of head.

stereofrog
What's wrong with being able to write Y-combinator's ? And yes javascript is a functional language. If you want to say you "know javascript" good understanding of functional programming is neccesary.
Raynos
+5  A: 

That javascript is the most widely deployed language in the world. (Probably)

zaf
Most widely deployed native natural language is Mandarin. Would knowing that make you a Mandarin speaker? Would knowing that fact even have anything to do with your grasp of the language?
Zano
The most widely deployed language in the world is the genetic code of the DNA that controls the protein synthesis within the cells.
Ernelli
+114  A: 

That it can be disabled.

graphicdivine
+1, I'm so tired of pages that doesn't even bother with even the very basics of graceful degradation because "it's so hard and everyone has javascript enabled anyway".
wasatz
+1. A page that doesn't work without JavaScript is a page that will be fragile even with JS enabled.
bobince
I disagree. An AJAX application will be totally useless without JS. So far Wt and ASP.NET WF is are the only toolkits that do graceful degradation automatically. And even then, it's only for generated code.
iconiK
@iconiK If you are building an Ajax app that relies heavily on JS for core functionality then you still need to rememebr that it can be disabled and put in some form of appropriate warning at the entry points rather than just leaving a scattering of broken UI elements across the screen or, worse still, just a blank screen.
Colonel Sponsz
@Colonel Sponsz, a warning is fine and easily doable. However, expecting it to be gracefully degradable is way too much. Today web applications are REAL applications. In my book, if you have JS disabled, you're a moron, and thus I'll warn you.
iconiK
@iconiK If it can degrade gracefully then it should, if it can't then a clean page with a warning is the equivalent - it's not rocket surgery. There's so much bad JS out there that I have it disabled until you've proved to me that you are not a moron.
Colonel Sponsz
@iconiK I'll just go and tell all my Government clientelle who have JavaScript globally disabled for security reasons that they're all morons, shall I?
graphicdivine
@graphicdivine, JS security problems? What, they're still running IE where you can modify local files? (which turns out to be really bad with a FAT partition). That sounds stupid.
iconiK
+1 Even funnier, is looking at your fancy new javascripted and stylesheeted site without a style sheet. The javascript still cycles through slideshows and the fancy hover feature on menus look hilarious in the default blue underlined font for links. Try it some time.
Elizabeth Buckwalter
@iconiK I use noscript to protect me from malicious scripts, XSS, click-jacking and whatever other thing it does (blocking unwanted flash, google analytics spying etc.). So when I stumble on a JS only website, the chance of me going forward are low if I don't see anything.The best was a website who tried to redirect you if you did not have javascript activated and got a good old XSS warning when js was authorized for the main domain.
Arkh
-1 this is off topic and doesn't really have anythong to do with knowing about javascript as a language. It's good thing to consider when designing a web app, but it's still not an answer that belongs in this thread.
TM
@TM, no, it really is an important consideration. This should be in the forefront of your mind as you test values before inserting them into the database or have the only way to login to your website through a fancy javascript pop up box. Speaking of which.... I think I need to go check something.
Elizabeth Buckwalter
+1 for the shortest but still very usefull answer ... and for making me laugh :)
Petr Peller
However people may feel about this issue it is definitely statistically irrelevant. Surveys have found over the last few years that people and organisations no longer switch off JS in significant numbers. It's falling all the time and getting down to the level where it's hard to measure at all.
Daniel Earwicker
@Daniel Earwicker "Surveys"? Do you have any examples? I find it impossible to find any reliable statistics on the subject. And by reliable I mean a statistics gathering procedure which doesn't rely on javascript.
graphicdivine
@Elizabeth - While you're right that it is an important consideration given a browser implementation, it really has nothing to do with the javascript language. That is strictly a browser feature and not all javascript runs in the browser.
patrick dw
JavaScript is a programming language, and this comment hast absolutely nothing to do with it.
alcuadrado
+309  A: 

Not jQuery. Not YUI. Not (etc. etc.)

Frameworks may be useful, but they are often hiding the sometimes-ugly details of how JavaScript and the DOM actually work from you. If your aim is to be able to say “I know JavaScript”, then investing a lot of time in a framework is opposed to that.

Here are some JavaScript language features that you should know to grok what it's doing and not get caught out, but which aren't immediately obvious to many people:

  • That object.prop and object['prop'] are the same thing (so can you please stop using eval, thanks); that object properties are always strings (even for arrays); what for...in is for (and what it isn't).

  • Property-sniffing; what undefined is (and why it smells); why the seemingly-little-known in operator is beneficial and different from typeof/undefined checks; hasOwnProperty; the purpose of delete.

  • That the Number datatype is really a float; the language-independent difficulties of using floats; avoiding the parseInt octal trap.

  • Nested function scoping; the necessity of using var in the scope you want to avoid accidental globals; how scopes can be used for closures; the [closure loop problem][7].

  • How global variables and window properties collide; how global variables and document elements shouldn't collide but do in IE; the necessity of using var in global scope too to avoid this.

  • How the function statement acts to ‘hoist’ a definition before code preceding it; the difference between function statements and function expressions; why named function expressions should not be used.

  • How constructor functions, the prototype property and the new operator really work; methods of exploiting this to create the normal class/subclass/instance system you actually wanted; when you might want to use closure-based objects instead of prototyping. (Most JS tutorial material is absolutely terrible on this; it took me years to get it straight in my head.)

  • How this is determined at call-time, not bound; how consequently method-passing doesn't work like you expect from other languages; how closures or Function#bind may be used to get around that.

  • Other ECMAScript Fifth Edition features like indexOf, forEach and the functional-programming methods on Array; how to fix up older browsers to ensure you can use them; using them with inline anonymous function expressions to get compact, readable code.

  • The flow of control between the browser and user code; synchronous and asynchronous execution; events that fire inside the flow of control (eg. focus) vs. events and timeouts that occur when control returns; how calling a supposedly-synchronous builtin like alert can end up causing potentially-disastrous re-entrancy.

  • How cross-window scripting affects instanceof; how cross-window scripting affects the control flow across different documents; how postMessage will hopefully fix this.

Most of all, you should be viewing JavaScript critically, acknowledging that it is for historical reasons an imperfect language (even more than most languages), and avoiding its worst troublespots. Crockford's work on this front is definitely worth reading (although I don't 100% agree with him on which the “Good Parts” are).

[7]: http://stackoverflow.com/questions/2568966/how-do-i-pass-the-value-not-the-reference-of-a-js-variable-to-a-function f

bobince
Ahhhh, finally a thoughtful, thorough answer. If I could +10, I would. Knowing a framework does not mean you can program JavaScript effectively.
Tim Down
Thanks a lot for that well thought answer.I'd like to add that using a framework can be really beneficial if you know how it's being done. You should learn to do those things by yourself before resorting to a framework.
Javier Parra
Any online references with the answers to these JS details?
luiscubal
Adding some more links. (Sorry for the preponderance of SO self-links, but it's much easier to find past comments than sift through the search results...)
bobince
This is a fantastic answer, and more than enough of a reason for this question to remain open.
Skilldrick
"`object.prop and object['prop']` are the same thing" not quite. If followed by `()` they execute `prop` as a function, but only the first one sets `this = object` so `prop` can access `object`.
Daniel Earwicker
+1 a very good answer - might want to link to this when you mention Crockford's book http://yuiblog.com/crockford/ - the first part isn't about JS but may be interesting anyway as a selective potted history of programming languages.
Daniel Earwicker
@Daniel: actually not so, `this` is bound whichever way you access it. Try it: `var o= {b: function(){alert(this===o);}};`, then `o['b']();` -> `true`. And if you want *really* freaky, `(o['b'])()` -> `true`, but `(c= o['b'])()` -> `false`, and in Mozilla only, `(true? o['b'] : null)()` -> `true`. W, T, and indeed, F.
bobince
OMG! And OYG for that matter! I think I got that idea from Crockford's videos - presumably I misunderstood. Does the ECMA standard actually say when `this` goes back to being the global object in a definite way?
Daniel Earwicker
ECMAScript Fifth Edition section 11.2.3, then see 8.7 for what GetBase does. Then the NOTE in 11.1.6 explains why adding brackets around the reference doesn't lose the baseValue, and 11.13.1 step 3 for why the assignment operator does. By my reading of 11.12, Mozilla's behaviour with the conditional operator is an error (maybe an optimisation gone awry?) but given how horrible the ECMAScript standard is to read (even by standards documents standards it's pretty heavy going), I can't be 100% sure...
bobince
What a crock! It's not as if knowing all the different browser quirks makes you a better JS coder. Maybe more street cred among your peers...Abstractions make life easier and are an essential part of JS so I would say knowing a framework makes you a better JS coder than one who doesn't and wants to do things the long way.
Sir Psycho
This is an excellent post. Several of these quirks in the language have bitten me even in the last year!
Kragen Javier Sitaker
Great list, although I'd add "know the difference between == and === and how it relates to null and undefined". Seen a lot of bad bugs caused by null checks using == and not catching typos in method calls.
ScottKoon
Sir Psycho: note that none of this answer mentions the DOM, which is what the big libraries are there to help you with. **A framework cannot protect you from any of the things mentioned here**. This stuff is important for anyone doing browser scripting, using a framework or not.
Tim Down
Bobince:<blockquote>the function statement acts to ‘hoist’ a definition before code preceding it;</blockquote>That is a false and misleading statement.`FunctionStatement` is a Mozilla syntax extension and it does not work like you described. The phrase "code that appears before it" is false if interpreted literally.Daniel Earwicker: <blockquote>"object.prop and object['prop'] are the same thing" not quite. If followed by () they execute prop as a function, but only the first one sets this = object so prop can access object.</blockquote>That is completely false, as explained.
Garrett
Garrett's correct. It's function declarations rather than function statements that are subject to hoisting.
Tim Down
I think “function statement” is a pretty normal and appropriate way to describe the construct represented by the ECMAScript `FunctionDeclaration` production; indeed, Mozilla docs widely use the phrase to mean just this. There is no “function statement” that is not a `FunctionDeclaration` in ECMAScript. The production that Mozilla named `FunctionStatement` is a peculiar non-standard and undesirable extension (presumably meant as some form of compatibility measure, and at least not quite as bad as what IE does). As with named function expressions, all the regular coder needs to know is: avoid.
bobince
I take your point, but given the existence of a separate `FunctionStatement` that is distinct from a `FunctionDeclaration`, I think it's worth being clear.
Tim Down
This answer is awesome, and a little intimidating for a slightly naive gunslinger like me who just thought, "hey, I'll just quickly whip up this nifty ajaxified UI for next Wednesday, I mean, how hard can it be to learn some event handlers". ;) Well, I'll start out with some jQuery and work my way through that list by and by...
Hanno Fietz
A: 

object literals because they are so nice to write.

poo
+20  A: 

If you want to be a true JavaScript ninja, you should know the answers to every question in the Perfection kills JavaScript Quiz.

An example to whet your appetite:

(function f(f){ 
  return typeof f(); 
})(function(){ return 1; });

What does this expression return?

  • “number”
  • “undefined”
  • “function”
  • Error
Skilldrick
Give a look to my answers: http://codingspot.com/2010/02/answering-the-juriy-zaytsev-javascript-quiz/
CMS
@CMS Very good! Did you actually get the all right first time, or does this include some research?
Skilldrick
Skilldrick: I think I got them all at the first time, I'm a frequent reader of the ECMA-262 Standard (I know, I'm a freak :-)
CMS
+1 Very nice quiz!
Tomas
A: 

You know JavaScript if the following statements return true:

  1. You know the fundamentals of JavaScript, such as objects are in fact hashes, the language is functional and prototype based. And that JavaScript's official name is ECMAScript.
  2. You must have at least read 2 books regarding the subject and understand the code that's inside that book. If you could answer a bunch of answers here on SO regarding JavaScript, it helps too.
  3. You should understand the language as is, that frameworks/libraries only increase your productivity. In case of web development, you should understand it works most of the time client-side (unless you have a server side technology such as JAXER) and how it access the DOM.
  4. The understanding of the Event Model.
  5. If you could change a statical website into an AJAX-driven or dynamical website without a sweat, you can pretty much say you know JavaScript.

Gotta say though, knowing something doesn't make you an expert of the subject.

Shyam
Objects are not arrays. The term "array" has a specific meaning in JavaScript.
David Dorward
Edited, and I know what the term array means in most languages. http://www.quirksmode.org/js/associative.html
Shyam
-1 (1. objects are not arrays; how is the official name relevant? 2. Not everyone needs books to understand something. 3. Not all frameworks will. 4. Which one? 5. What's wrong with some sweat?). Bad answers.
Tomas
1. It's about JavaScript Objects and how they differ from other languages. The name is relevant because of the standardization it comes with. Wiki it. 2. Digital or paper, it does not matter. Sooner or later you do want to have some references or educate yourself to become more profound in the language. 3. Will what? 4. The Event model that is related to the environment the JavaScript is deployed. Such as the browser, or the server side solution. 5. A programmer that doesn't need more besides some reference to build a dynamic website, without breaking a sweat is an experienced programmer.
Shyam
I've been working in JavaScript for 10 years and have yet to ever read a single printed book on the subject. There is a wealth of information available online (such as SO, for example), so there is no reason to ever need to buy a printed book.
ChiperSoft
ECMAScript is not the official name for JavaScript.
kirk.burleson
+4  A: 

One should be aware about the following to say "I Know JavaScript":

  1. JavaScript is good but DOM is pain point
  2. Cross browser issues can make you go crazy
  3. Unless code is tested on least 4 different good browsers you can't say its bug free
  4. Closure.............. Must know
  5. Its prototype based ........... Nice one its fun to learn this
  6. debugger keyword ..... Helps in crisis
Anil Namde
Nice list, pretty slim. I got a laugh at "4" good browsers. :) I think number 7 should be a healthy hatred for IE browsers under version 8.
Shyam
@Shyam, what makes you think we shouldn't have a healthy hatred of IE8? I still have issues in IE8... issues that are only in IE8 at that.
Tracker1
@Tracker1: There will be always issues. And bashing a browser I haven't touched, well, that would be a bit unfair. That's why I laughed at 4 good browsers: 'Firefox, Chrome, Safari and Opera' are the only ones I develop for. I stopped hacking for IE, I just make it run Fisher Price code, as if JavaScript would be disabled.
Shyam
A: 

... about Google Web Toolkit, which means that your javascript project probably could be developed in a much more conveniant way.

Viktor Sehr
+4  A: 

I strongly recommend to read Javascript: The Good Parts

sunglim
+9  A: 

Variables are global unless declared to be local!!

Bad (DoSomething() is only called 10 times):

function CountToTen()
{
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();

Good (DoSomething() is called 50 times as intended):

function CountToTen()
{
  var i;
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  var i;
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();
theycallmemorty
I'd never even considered this. Very good point.
lhnz
I try and get in the habit of `for (var i=0;` in all my loops
ghoppe
Crockford prefers putting the `var` at the top of the function, because it doesn't deceive you about the size of the variable's scope. `js2-mode` will complain if you `var i` in two separate `for` loops in the same function, since it suggests you think you have two separate variables, and you don't. Nevertheless, I do try to never `var` things separate from where I initialize them.
Kragen Javier Sitaker
A: 

The following things are also important:

1) Variable hoisting. 2) Scope chains and activation objects.

and then things like these: :)

3) wtfjs.com

4) everything is an object

Rajat
3.) is **wrong**. Not everything is an object. http://stackoverflow.com/questions/3907613/how-is-a-javascript-string-not-an-object/3907659#3907659
galambalazs
+2  A: 

Having read all the above, it's also perfectly fine to learn Javascript by using a framework like jQuery. The truth is it's the first way a lot of folks picked JS up in the first place. No shame in that.

Soup
+14  A: 

You don't know JavaScript if you don't know:

  1. Closures
  2. Prototype-based inheritance
  3. The module pattern
  4. The W3C-DOM
  5. How events work
edwin
I really like this answer.It helps you spot dark areas in your knowledge.Events are the only thing still a bit obscure to me in this checklist (if the module pattern means "don't clobber the global namespace" and so includes scopes and the var operator).
silviot
I would argue that `You don't know JavaScript if you don't know The W3C-DOM`. The two things are different.
galambalazs
+3  A: 

What every javascript coder should know?

How about, I can turn off your efforts with 2 clicks. So provide a fallback if possible.

Khainestar
+10  A: 

That Javascript is not something which can be learnt in an hour!

Ashwin Prabhu
+4  A: 

You know javascript if you can use Array, Number, String, Date and Object effectively. Plus points for Math and RegExp. You should be able to write functions and use variables (in correct scope, i.e. as 'methods' of an object).

I see some comments about knowing closures, extravagant function syntax, blabla. All that is quite irrelevant for this question. That's like saying you are a runner if you can run the 100m dash under 11 seconds.

I say it takes maybe a couple of weeks to become proficient in javascript. After that it takes years and dozens of books and thousands of lines of programming to become an expert, a ninja, etc.

But that wasn't the question.

Oh, and the DOM is not a part of javascript, and neither is jQuery. So I think both are equally irrelevant to the question too.

Michiel van der Blonk
Closure is there whether you care for it or not. It's powerful but can easily be misused. You don't know the language if you don't know how it works.
galambalazs
A: 
  1. Knowing that there is a life with and without with() and where to draw the line.
  2. You can create custom errors with the throw statement to purposely stop the javascript runtime.
FK82
A: 

In Javascript, Performance matters.

There is not an intelligent compiler to optimize your code so You should be more careful while you are writing javascript code than languages like C#, Java...

mcaaltuntas