Intermediate Language Features for Reading and Understanding JavaScript

1. JavaScript LiteracyIntermediate Language Featuresfor Reading and Understanding JavaScript David Jacobs @MetaThis

2. Object Literal Notation // create a person object varperson = {}; person.firstName = "Joe"; person.lastName = "Jones"; person.address = {}; person.address.street = "123 main"; person.address.zip = "12345"; person.address.state = "MO"; // same thing in object literal notation var person = { firstName: "Joe", lastName: "Jones", address: { street: "123 main", zip: "12345", state: "MO" } };

3. Object Literals with Functions // can include functions var person = { firstName: "Joe", lastName: "Jones", address: { street: "123 main", zip: "12345", state: "MO" }, getFullName: function() { return this.firstName + " " + this.lastName; } }; Inline function

4. Object Literals - JSON JSON is a subset of Object Literal notation Requires property names to be in quotes Functions are not allowed Special characters must be escaped/encoded Other than these restrictions, you can simply think of JSON as a JavaScript object All valid JSON is a valid Object Literal var person = { "firstName ": "Joe", "lastName": "Jones", "address": { "street": "123 main", "zip:": "12345", "state ": "MO" } getFullName: function() { return … } };

5. Arguments function doSomething(a, b, c) { // something } // arguments are optional doSomething(); //this is valid! // can pass extra arguments doSomething("apple", “banana", "cat", "wtf"); //this is also valid! // regardless of declared parameters, functions have access // to all arguments through a special arguments array function doSomething() { return arguments[3]; //returns "wtf" }

6. Object Literals as Arguments JavaScript Idiom for Optional Named Parameters Functions often have an optional “options” or “settings” parameter jQuery.ajax( url, [settings] ) Object Literals are often used as constructors, providing or overriding defaults jQuery.ajax( {url: "test.html", data: myObject, success: alert("success")} )

7. Arrays The Array prototype contains methods specific to arrays, but as a data structure… Arrays are essentially just object literals with an implicit number as the property name Which generalizes to a universal property:value pattern for all objects (and JSON data) Which enables a universal data access pattern of object[property] var array = ["first","second", "third"]; var object = {0: "first", 1: "second", 2: "third"}; array[1] //returns "second" object[1] //returns "second“ Don’t take this point too literally…but it may help you better understand JavaScript data structures.

8. || and && You know || is a boolean Or && is a boolean And Do you know? Expressions using them can return a non-boolean value This is useful // if userInput is null or an empty string, then the Or case // is evaluated and returned as a value var name = userInput || "Bob"; // conditional execution – validate() is only called if there’s a value var valid = userInput && validate(userInput);

9. Functions Functions are objects Functions are values Can be assigned to a variable Can be passed to another function as an argument Can be returned by a function Functions are the building blocks of scope A function created inside a function is a nested scope The outer scope is available to the inner scope The inner scope is not available to the outer

10. Function Pointers What is the $ in jQuery? // in this example, $ is a variable that points to a function var $ = function (id) { return document.getElementById(id); }; // this is a function call on the $ variable, setting the onClick handler // on the DOM element returned by the function $('yourDiv').onClick = function (event) { //do something };

11. Callbacks A callback is just a function that is passed to another function, typically with the intent of it being called later (“called back”) TIP: Callbacks are often easier to understand if you use function pointers (assigning a function to a variable) instead of creating an anonymous function on-the-spot.

12. Higher Order Functions A higher order function is a function that takes or returns a function All asynchronous callback-style function calls involve higher order functions They are used nearly everywhere in JavaScript AJAX calls, event handling, Node.js, etc A better understanding of functional programming will improve your JavaScript code and your programming skills Learn More about Functional JavaScript Article: http://www.hunlock.com/blogs/Functional_Javascript Book: JavaScript Patterns by StoyanStefanov Underscore.js An excellent utility library for functional programming in JavaScript: http://documentcloud.github.com/underscore/