How can I truly master Javascript?

Question

OK, maybe "master" is a bit strong of a word, but I'd certainly like to get better at it. I can get things done with JS for the most part, but I've always had a nagging feeling that my knowledge in the language is lacking.

I believe the main problems I have with Javascript are:

1. Inconsistent behavior across browsers
2. Event-driven programming in general
3. Behavior of anonymous functions
4. The keyword this

1) is (for the most part) not JS' fault and can be "solved" by using frameworks like jQuery or prototype, but 2, 3 and 4 are concepts that I can't fully grasp.

How can I have a deeper understanding of those and other "gotchas" in JS?
(links to helpful resources very much appreciated)

Answer 1

After writing my own implementation I pretty much know every little detail about the language. Now if that's not your bag you'll simply have to write lots of code.

Answer 2

There's no substitute for experience, but when I have something specific I need I usually visit the Mozilla Developer Network or the Opera Dev Centre

Answer 3

Hi,

maybe you're interested in the standards, defined by the TC39 Committee:

https://developer.mozilla.org/en/JavaScript_Language_Resources

Edit:

This maybe a little bit more advanced than just Basic JS but it's a really good resource about design patterns in JavaScript.

http://ajaxpatterns.org/Patterns

Answer 4

If you master Javascript, you can explain what the following code means:

Function.prototype.bind = function(){ 
  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); 
  return function(){ 
    return fn.apply(object, 
      args.concat(Array.prototype.slice.call(arguments))); 
  }; 
};

And if you can't explain what it does, you should definitely read this great tutorial of John Resig: Learning Advanced Javascript, which makes you truly master Javascript!

---

The example above includes a lot of advanced stuff, like:

• Prototyping
• Closures
• arguments
• What is this?
• Using standard Javascript Objects ( Function, Array )
• "Advanced" methods ( Function.apply(), Function.call() )

Answer 5

My best advice to better understand and learn the language is to look through the source code of the popular libraries such as jQuery, Prototype, ExtJS, YUI, base2, glow (maybe not so popular at the moment, but worth looking at nonetheless).

You'll see

• a mix of functional and object oriented programming practices
• a multitude of closures
• exactly how the different browser event models are abstracted away

This will provide a wealth of insight into how the language has been used in libraries that are used in countless commercial applications. Reading the comments can prove insightful and often have links to blogs or bug tickets such that one can gain a deeper understanding of the issue.

Answer 6

You have to accept it for what it is. Best resource: the book "JavaScript: The Good Parts" by Douglas Crockford, published by O'Reilly and Yahoo! Press.

JavaScript is an Object Oriented language, but not in a way familiar to Java and C++ programmers. Objects are prototype-based, not class-based. JavaScript is also a functional language, not quite to the extent that LISP is, but much more so than most languages in that functions are truly first-class objects.

Learning JavaScript after knowing only Java or C++ is like switching to the pipe organ after playing piano all your life. You already have the skills you need to develop the additional skills you need to master it, but it's not a piano and no matter how much you complain, it does NOT have a damper pedal.

Answer 7

There are at least a dozen good videos on Yahoo Theater that do a good job of explaining javascript, basic and advanced, and DOM and the like, without skipping on the details and nuances.

Also -- while you might hate this, the proof that God does not exist is undefined.

Answer 8

Although you could learn Javascript from example code, Javascript is probably best learned from a master because it's full of traps. That's why "JavaScript: The Good Parts" is probably where you should start.

Here's a quote from the author:

When I was a young journeyman programmer, I would learn about every feature of the languages I was using, and I would attempt to use all of those features when I wrote. ...

Eventually I figured out that some of those features were more trouble than they were worth. Some of them were poorly specified, and so were more likely to cause portability problems. Some resulted in code that was difficult to read or modify. Some induced me to write in a manner that was too tricky and error-prone. And some of those features were design errors. Sometimes language designers make mistakes.

Most programming languages contain good parts and bad parts. I discovered that I could be a better programmer by using only the good parts and avoiding the bad parts. After all, how can you build something good out of bad parts?

Answer 9

Hi, the concept of event-driven programming is really simple. In the classical program, the line of code must be executed one by one, from the beginning to the end. The program control the execution and ask the user to make some choices. But whatever the user do, he must follow the program sequence.

In event-driven programming, the user is the one that control the sequence of execution. The program do nothing until the user interact by clicking on certain button, moving the mouse or just selecting a menu. So the execution will depend on what the user do on the graphical user interface (GUI). For exemple, clicking on a button "Delete" will probably call a corresponding function that may act differently depending what is selected.

I hope that it give you an hint!

Answer 10

Inconsistent behavior across browsers

This is really important to keep in mind, javascript is 'nearly' equal in ALL browser and differences are usually in the obscure areas. Where most browser inconsistency is perceived however is not in JavaScript but in the DOM API. JavaScript has a bad rep mainly due to poor/incomplete or even outright different DOM implementations.

Event driven programming:

Event driven programming is a means to accomplish loose coupling (next to dependency injection), an object fires events to whomever is interrested and other programs can listen and act on the events. More then one listener can for example listen and act on a click event, but the click itself is not dependant on it's listeners.

Behavior of anonymous functions

Anonymous functions are no different from named functions, and are used in cases where you simply do not need to store a reference to a piece of code. They are ideal for self executing code, callbacks and oneshot listeners. They should be avoided inside loops and when using them inside recursive functions a good 'thinking it through' is needed.

The keyword this

Global functions can be considered 'methods' of the global scope (window) and this is a reference to the scope of a method. Where this is concerned, one needs to really make the distinction between function and method. In other languages, this is usually a safeguard, but in JavaScript, this is mandatory when a referencing properties and methods on the current scope of a method (except for methods and properties in the global scope).

Advice

Lots of awnser already listed the good books and YUI theater movies, they are all worth reading/watching, but the real school is get your hands dirty, so I'll give you an assignment:

• Write an EventDispatcher/Observer/Publisher (same thing, different names/apis) that can:
  • fire any event
  • invokes the listener function on the scope of itself
  • passes an eventObject to each listener function
  • invokes each listener in the order they started listening
  • can remove specific listeners per eventType
  • can be instantiated so each instance has it's own events and listener stack.

Doing this basically teaches you about your last 3 points and gives you a useful reusable pattern. You can cheat ofcourse and look one up, but try to understand it's workings and how you would use it in your programs at the very least ;)

I would also advice reading about design patterns which are useful in any language, including JavaScript. This will simply make you a better programmer period.

How I mastered javascript

1.) I wrote my own DOM framework (you learn a LOT from this)
2.) I wrote my own Class implementation (starting to learn about structure)
3.) I wrote my own ScriptDependency loader
4.) I read a lot of discussions and follow a bunchload of blogs/twitters
5.) Bought/read the books, watched the YUI theater vids
6.) I awnser questions on Stackoverflow (sometimes I learn a bit more from this STILL)

Writing code and more importantly REwriting code whilst always questioning myself was in my case the best learning school. Fortunatly I began in a period where jQuery didn't even exist and making your own toolkits was a must. Frameworks and toolkits are helpful, but only teach you how to use their API's, they don't teach you much about JavaScript in depth.

Answer 11

Watch as many videos you can by Douglas Crockford

Answer 12

One of the ways I learned is by writing Userscripts (Greasemonkey). It's not that difficult to develop your own JavaScript application. It's much more difficult to design JavaScript AROUND someone else's website. You have to deal with their design and implementation choices. It has really helped with closures, anonymous functions, scope, this, etc. I did a lot of it with jQuery, as well. However, if I was just learning, I would start with native JavaScript.

Answer 13

You don't learn from reading. You learn from doing. Doing over-and-over correctly is the best way to master.

How do you know it's correct?

• Start by learning from reputable sources: yahoo, google api/coders, good books
• Get verification from the JavaScript coding community

Use it over and over again and keep up-to-date with new changes with the different browsers.