JavaScript the Good Parts

Frontend Masters intro Douglas Crockford introduces himself, gives a little introduction, and goes over the agenda for the course.

Our process of thought stems from two separate systems: System 1: Our Gut and System 2: Our Head. Visual processing is something human brains do better than the fastest super-computers. However visual processing can create conflicts between our two different systems. An illusion is an example of what is seen by System 1 (our gut) but may not make sense logically to system two (our head). Advertisers have always attempted to sell products to our Gut not to our Head. They try to appeal to us visually, not logically.

Computer programs are the most complicated things people make. While computer have attempted to create programs (i.e. Artificial Intelligence), they aren’t able to duplicate our system of thought. Humans right programs with the brains of hunters and gatherers. Programming uses both System 1 (our Gut) and System 2 (our Head). Intuition is a part of programming. Programming is about making tradeoffs. What any programming language (like JavaScript), there are good parts and there are bad parts. JavaScript has some of the best good parts and some of the worst bad parts.

JSLint is a code-quality tool that defines a professional subset of JavaScript. It lets you know when you are using the bad parts of JavaScript. (NOTE: The instructor video goes out from 19:23-19:32) The curly brace debate: On the right or on the left? It’s a simple example why we should prefer programming forms that are error resistant. Switch statements can introduce fall-through hazards. The cascading effect can lead to more places where errors can live.

In programming, saying “That hardly ever happens” is just another way of saying “It happens”. Good programming style can help produce better programs. The evolution of literary styles (i.e. lowercase, word breaks, and punctuation) helped reduce errors when transcribing language. Same applies to programming. Programs must communicate clearly to people. The programming process does not stop at the compiler. Good style makes code easier to understand. There are places in JavaScript where good style also communicates intent. You see this with immediately invocable functions, semicolon use, with statements and more.

Confusing code should be avoided. Use programming forms that avoid adding confusion. Looking at block scope versus function scope reveal common pitfalls with variable scope.

Additional pitfalls emerge from the use of global variables and syntax shortcuts. Bad coding styles fall into four classes: Under Educated, Old School, Thrill Seekers, and Exhibitionist Programming is the most complicated thing that humans do. Computer programs must be perfect. Humans are not good at perfection so designing a good programming style demands discipline.

The JSLint style was driven by the need to automatically detect defects. Not all features of a language should be used just because they are available. The key is finding a reliable subset within the language. Performance-specific code can be confusing. Only optimize the code that is taking the time. Algorithm replacement is vastly more effective than code fiddling. Bugs will exist no matter what coding style you use. All programmers can do is limit the chance for bugs. Part 1 wrap up and questions

JavaScript started with HyperCard. The developers of the first web browsers like Mosaic and Netscape wanted a way for people to make web pages interactive much the same way HyperCard made the Macintosh operating system interactive. First came LiveScript then came JavaScript. ECMAScript evolved to its third edition in 1999. The fourth edition was abandoned. The fifth edition was released in 2009. It turns out ten years between editions ended up being a good thing for JavaScript. The bad parts of JavaScript stem from Legacy, Good Intentions, and Haste. For the most part, these can be avoided.

JavaScript is an object-oriented language. An object is a dynamic collection of properties. Almost everything in JavaScript is an object. Object literals are not only a good part of the language, but influenced the development of JSON. While JavaScript does not have classes, it does have prototypes. Prototypes are much easier to work with than classes. Prototypes can utilize delegation or differential inheritance. However, in JavaScript, inheritance can sometimes work against you. Many other data types in JavaScript inherit from Object. These include Number, Boolean, String, Array Date, RegExp, and Function.

Exploring the Number type and using the Math object. NaN can be confusing, but ultimately it’s the result of undefined or erroneous operation.

A look at the way Strings behave in JavaScript and common String operations. In many languages, an Array is linear sequence of memory divided into equal sized blocks. In JavaScript, Arrays behave very differently. Sometimes they can be more efficient, most of the time they are less efficient.

Arrays and Object are often interchangeable. It’s best to use Objects when the names are arbitrary strings. Arrays are often more efficient when the names are sequential numbers. All values are objects except for null and undefined. The type of prefix operator will return a string identifying the type of a value. Use Array.isArray for Array validation.

JavaScript is syntactically a C family language and has very familiar identifiers, comments and operators. Many of the statements in JavaScript like if, switch, for and try/throw will mirror those found it other C family languages. Part 2 wrap-up and questions

Many object-oriented languages have methods, classes, constructors, and modules. JavaScript just has the Function. Best-practice suggests you declare all variables at the top of the function and declare all functions before you call them. Within functions, you can either return the result of an expression or return nothing (undefined). Each function also receives two pseudo parameters: arguments and this. The invocation operator can surround zero or more arguments. If a function is called with too many arguments, the extra arguments are ignored. Too few arguments will force undefined to be passed to the missing arguments. The four ways to call a function are Function form, Method form, Constructor form and Apply form.

The idea of a subroutine is the origin of functions. Subroutines allow for code reuse, modularity and recursion. With closures, the context of an inner function includes the scope of the outer function. An inner function continues to have access to that context even after the parent functions have returned. Function scope works like block scope.

JavaScript can begin to look like a classical object-oriented language. Inheritance can be achieved through the prototype chain. However, pseudo-classical inheritance can look foreign to developers and lead to some issues. The Prototypal Inheritance approach adds a constructor function which ensures proper inheritance. While it may not be better, it cleans up the implementation.

Using functions as modules may be the best way to create inheritance. This module pattern can be easily transformed into a powerful constructor pattern using functional inheritance. Part 3 Wrap-up and questions.

A sequence of problems will be presented followed by a solution. Each problem builds on the last so if you get a problem wrong, use the solution to begin the next problem. First, a quick quiz: What is x? o Problem 1: Write a function that takes an argument and returns that argument. o Problem 2: Write two binary functions, add and mul, that take two numbers and return their sum and product. o Problem 3: Write a function that takes an argument and returns a function that returns that argument. o Problem 4: Write a function that adds from two invocations. o Problem 5: Write a function that takes a binary function, and makes it callable with two invocations.

o Problem 6: Write a function that takes a function and an argument, and returns a function that can supply a second argument. o Problem 7: Without writing any new functions, show three ways to create the inc function. o Problem 8: Write methodize, a function that converts a binary function to a method. o Problem 9: Write demethodize, a function that converts a method to a binary function.

o Problem 10: Write a function twice that takes a binary function and returns a unary function that passes its argument to the binary function twice. o Problem 11: Write a function compseu that takes two unary functions and returns a unary function that calls both of them. o Problem 12: Write a function compseb that takes two binary functions and returns a function that calls both of them.

o Problem 13: Write a function that allows another function to only be called once. o Problem 14: Write a factory function that returns two functions that implement an up/down counter. o Problem 15: Make a revocable function that takes a nice function, and returns a revoke function that denies access to the nice function, and an invoke function that can invoke the nice function until it’s revoked.

Monads are a powerful functional pattern. There are two ways to use functional programming. One ways is by simply programming with function. The other way is much more mathematical. In the real world, everything changes. Immutability makes it hard to interact with the world. Monads are a loophole in the function contract.

While some experts believe in order to understand monads you need to first learn Haskell and Category Theory, all you really need is a solid understanding of JavaScript. A monad is an object. A monad example: The identity monad.

The Ajax monad is another example of a monad design pattern. We can add the ability to bind additional methods to our monad to create Ajax functionality.

Null pointer exceptions can create many bugs within JavaScript code. Null pointer checkers are typically used to prevent against null values. The maybe monad behaves similar to NaN, but can be applied to null pointers. While computers are getting better at concurrency, programming languages are not. Threads are an example of concurrency and can be difficult to handle. The alternative is turn based processing but there can be issues with this technique too.

Promises are an excellent mechanism for managing asynchronicity. A promise is an object that represents a possible future value. An example of using promises can be found with the Filesystem API.

Using the composition pattern, a promise can be created by nesting when statements. The result will look very familiar: A promise is a monad. There are a number of additional resources and videos regarding monads and monad-related concepts.

o What is your preferred text editor? o What is your favorite notation? Additional audience questions o Why is the prototyping approach in object-oriented programming more powerful than a classes-based approach?