Warning: This page is out of date
For a more modern take on JavaScript for CS559 see 2021 CS 559 JavaScript page. It’s less philosophical than this page. JavaScript (and JavaScript usage) is evolving so it is a more “normal” language. A lot of what is below is obsolete.
Contents
This post gives you some advice on how to learn JavaScript. It spends most of its time giving you a general strategy, and a sense of why this general strategy is the right thing. I recommend getting that philosophical dose, since it will make the reasons for the actual choices in books and stuff make more sense when they do come later down.
Warning: This is from 2015, and Javascript has evolved. New language features make a lot of the weirdness go away. Better constructs mean you don’t need to use the general functional programming mechanisms for everything.
Learning JavaScript
This is assuming you already know how to program in some other language. If you don’t already know how to program, I don’t think JavaScript is the right first language. I also don’t think it’s a terrible choice. However, the way to go about learning your first language will be different since your main focus should be on the concepts that are common across programming languages.
One interesting thing about JavaScript is that it builds on a lot of “foundational” computer science concepts. One of the cool things about JavaScript is that it provides the very basic abstractions that you can assemble into the things you need. This creates two kinds of problems: first, you must understand these foundations of how programming languages work (first class functions, scopes, environments, closures, …); second you must think about programming language feature needs in a general way so you can have an open mind about their being other ways to meet your needs (e.g. think about code re-use, data hiding, polymorphism and information organization rather than rigid classes and hierarchies). I fear that the way many intro CS classes work, they don’t do either of those things: they teach Java features, not necessarily the concepts from which they are built.
The effect of this is that the key to learning JavaScript is to see how it is a manifestation of the foundational programming language concepts, and understand how these concepts can be used to get stuff done in nice ways. The fact that the actual language isn’t an ideal representation of these concepts will get in the way – but try not to focus on that aspect. Try to focus (at first) on understanding why functional programming can be cool, why lexical scope (closures) can give you nice building blocks for making object and module systems, why a uniform and flexible type system lets you do object-oriented programming in the way that you want (for lots of different definitions of the way that you want), etc. If you appreciate that good stuff, you will not only be prepared to learn to work around the bad stuff, but even motivated to do so.
The bad parts of JavaScript will still be there. Being aware of them is important.
There are several kinds of problems with JavaScript:
- Issues with it being different (and in some ways better) than what people are using, but people wanting to use it in the old ways.
- Issues in it providing basic abstractions that can be used to build language features we’re used to. And often these more basic abstractions are not taught. And we’re (usually) not taught to think about programming languages in general ways, but rather just shown the specific features (not what the general issue they address are).
- Issues where its flexibility let you shoot yourself in the foot.
- Issues where poor design decisions make things ambiguous or misleading.
- Issues from the fact that it’s embedded in the web browser, and the web-browser wasn’t necessarily designed to make it easy for people to write code inside of it. (but this isn’t really JavaScript’s fault)
- Issues from non-standardization (different browsers/compilers being incompatible) – these are largely a thing of the past
- Other historical issues. It has a name that creates association with something very different, the early implementations of the language weren’t so great, etc. Fortunately, you can view these as historical footnotes.
If you think about this, most of these issues either: don’t effect what you actually program since you will use a modern compiler in a modern browser (and for class we will let you pick 1, so compatibility isn’t a problem) or can be gotten around by taking the time while learning JavaScript to learn to think about things in the right way. Number 3 and 4 will still be there – and you’ll need to learn to protect yourself.
How can you learn JavaScript this way?
Here are three paths:
You could try to learn about the programming language foundations first. Learn to program in a functional language that is a pure instantiation of these concepts. Then JavaScript will just be “Scheme (or Lisp) with ugly syntax.” Even Python has most of these concepts (although people don’t often learn Python this way). I don’t think this is the most practical way to learn JavaScript quickly. Full disclosure #1: this was my path, except that the programming language for me to get at the foundations was one that I was making myself in grad school (called whisper). Full disclosure #2: I am a Python fan, and for me, my biggest complaints with JavaScript are often “but Python does this so much better.”
You could look for resources that emphasize those foundational concepts and functional programming in teaching JavaScript. This is the path that I recommend, providing you can find the appropriate resources. But I’ve done some of the work for you: I’ve found some resources like this, and it’s how I’ll structure my class and the resources I create.
There is one last choice that I advise against: You could pretend JavaScript is like your statically scoped, rigidly typed, simple classical object-oriented language that you are used to. You will complain loudly every time things don’t behave as expected. You will think JavaScript is silly and want to stop using it. You will miss out on the great things that JavaScript’s flexibility gives you. You will be able to survive to do small things (like programming assignments in class), but it will be more painful than it should be.
If it’s not obvious, I am recommending the middle path. The first path might be better if you had enough time (take a programming language theory class before learning JavaScript). But not only is this impractical (I am guessing you want to learn JavaScript NOW), I’m not sure its the best thing. You don’t need to know that much programming language theory to appreciate this stuff, and it tends to over-emphasize certain stuff by trying to be pure.
One downside to the way that functional programming is taught is that it often emphasizes recursion rather than iteration. Being able to use recursion where it is appropriate is important, however learning to use it for everything is not (unless you are using a language that forces you to do things this way). In practice, recursion is harder to learn, often harder to debug, and requires specialized compiler support to be efficient at large scales. To my knowledge, JavaScript is not properly tail-recursive (if you don’t know what that means – don’t worry, it’s one for the programming language geeks, but it is a beautiful concept), so there is little incentive to prefer recursion to iteration except where it is is more convenient for what you are trying to do.
Part of the reason I like JavaScipt so much is it allows me to use the cool parts of functional programming, without having to make everything tail-recursive.
So how do I take this middle path?
Well, you can take my class. Or, someday these notes might turn into a book. But for now…
Books
One aspect of web programming is that the web really is the best resource for it (usually). Books and traditional media don’t evolve as quickly, don’t provide the diversity of viewpoints, and often aren’t the preferred venues of the “real experts.” (If you’re an expert programmer, you might be too busy to write a book, but willing to share your expertise). There are downsides to getting information from the web (how do you know you can trust it?), but to be honest books have this issue too. Except that if its a blog and its wrong, a lot of commenters will point out the problems and the author can update it.
As a JavaScript textbook, Eloquent JavaScript fits the bill. At first, I liked it because it had a free online option (it is free to look at online, but you can buy a printed copy if you want). But I’ve grown to appreciate how it does follow the philosophy I discuss above. It kindof starts out in a weird way – seeming to be telling you the CS101 stuff all over again, but not in a way that would work as a CS101 book. But if you bear with that in chapter 1, it gets better quickly. I am also not fond of his silly examples. And Chapter 4, which is trying to get some deep concepts across by telling it as part of a silly story is weird: the ideas are there, but the silly story kindof got in the way. But if you bear with that, it actually presents the concepts nicely.
 |
Eloquent JavaScript, by Marijin Haverbeke. (hardcopy at Amazon). I like this book because it is “free” (it is free online, but you can buy a hard copy from a traditional publisher). I also like the spirit of the book (because it focuses on teaching JavaScript as a functional programming language, not as a traditional language). That said, I haven’t compared it to a lot of other books, and I didn’t use it to learn myself, |
Tutorials
There are zillions of JavaScript tutorials out there. If you find one that you think is particularly good, let me know.
Some that I think are notable:
- A re-introduction to JavaScript (JS tutorial) – An official Mozilla thing. Supposedly an “intermediate level”. A nice concise description of the important stuff.
- There are actually a lot of great things on the Mozilla tutorials page. I haven’t read them all – but I probably should.
- JavaScript in Ten Minutes – A misnomer (even he admits it takes more than 10 minutes to read). But it’s useful – a programming language geek rants about what is good and bad about JavaScript, making sense of stuff by using the real CS terminology and concepts.
Tools
Web Browsers: All modern web browsers implement JavaScript well. This hasn’t always been the case. But nowadays, just about any web browser will be good enough. The differences between them are good for debates. Both Firefox and Chrome now have good compilers, debuggers, and profiling tools – I assume that Internet Explorer and Safari do as well (but I haven’t tried them). Make sure you can find the “web developer console” – this is slightly different in each browser, but gives you access to your programs error messages, console logging, as well as the debugger and other tools.
Debuggers: I recommend getting familiar with the debugger before you need it. Being able to step through your program and look at its data is really handy when things go wrong. Looking at the data can be enlightening even when things work (because something JavaScript will represent things internally in a different way than you might expect. Debuggers are built into current web browsers. Some IDEs (see below) offer connections to them.
Editors / IDEs: You can use any text editor you like to edit JavaScript code (and the HTML that loads it). Since you’re just loading these text files into a web browser, you don’t need anything more than a simple text editor. You can use notepad, notepad++, TextWrangler, emacs, vi, or whatever you like. However, you probably want to use something that is a little more specialized for web development.
A good code editor will give you syntax highlighting with integrated checking (see style checking below). They’ll give you autofill, hints about things like function parameters, and other handy things. It will help you organize your code in various ways. Some even connect to the debugger and browser to give you an integrated development experience.
Personally, I use the tools from JetBrains. Their python IDE (PyCharm) has their web tools (HTML and JavaScript) built in. For Python its the best I’ve seen, especially for mixed language development (mixing python and web stuff). For web stuff, I’m already used to PyCharm and have it installed on my machines. I believe their web development tool (WebStorm) is just PyCharm with some features removed, but I’ve never checked. One cool think about JetBrains: they will give you a free license to the Pro version if you are an education user. There are web development environments based on Eclipse (see Aptana), there are tools from Adobe, and some people I know swear by Visual Studio (especially since it has good TypeScript support).
In the opposite direction: there are some surprisingly good development tools that run right inside the web browser. These have a ton of advantages – no installation, you can work anywhere (since your code is stored in the cloud), there is the potential for easy sharing, … From what I’ve seen (and I’ve only really looked as JSBin, and a quick glance at some others) they are mainly good for small programs (plunker might be better for multi-file development). But since you’ll be writing small programs when you’re learning …
For Example… I started using https://jsbin.com because it allows me to easily embed live code examples right onto web pages (look at the other tutorials). It has an editor with syntax highlighting (which I find helpful) and a code-analysis engine (see hinting below). One catch: to get all the cool coding features, you need to put your JavaScript code into the JavaScript pane, not the HTML pane.
Style checkers: I recommend regularly running your program through a style checker. It will point out potential problems. Things that will either cause bugs, or might cause bugs in the future (if you try to add to or modify your code). It will remind you of good habits you should get into so you will write code that is clean the first time.
Many JavaScript editors have style checkers built in (PyCharm does, even JSBin has some code checking features). Or you can go to http://jshint.com/ and paste your code in.
Source Control: You should keep your program in some kind of source control so you back up old versions. I recommend putting your repositories someone that isn’t your own local computer – either the CS file servers (AFS) or a source control service (BitBucket, GitHub). Or don’t believe me until you learn the importance of source control the hard way when you lose your work.
If you are working by yourself, there are easy ways to get the versioning/backups without a full-blown source control system. If you use a file box service (box.com, dropbox), they can do versioning. Some of the online IDEs (JSBin, for example) will keep multiple snapshots of your work. You can decide how safe, secure and reliable this all is.
