JavaScript Literacy

JavaScript LiteracyIntermediate Language Featuresfor Reading and Understanding JavaScriptDavid Jacobs@MetaThis

Object Literal Notation// create a person objectvarperson = {};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 notationvar person = {firstName: "Joe",lastName: "Jones", address: { street: "123 main", zip: "12345", state: "MO" }};

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

Object Literals - JSONJSON is a subset of Object Literal notationRequires property names to be in quotesFunctions are not allowedSpecial characters must be escaped/encodedOther than these restrictions, you cansimply think of JSON as a JavaScript objectAll valid JSON is a valid Object Literalvar person = { "firstName ": "Joe", "lastName": "Jones", "address": { "street": "123 main", "zip:": "12345", "state ": "MO" }getFullName: function() {return …}};

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

Object Literals as ArgumentsJavaScript Idiom for Optional Named ParametersFunctions often have an optional “options” or “settings” parameterjQuery.ajax( url, [settings] )Object Literals are often used as constructors, providing or overriding defaultsjQuery.ajax( {url: "test.html", data: myObject, success: alert("success")} )

ArraysThe 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 nameWhich 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.

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

FunctionsFunctions are objectsFunctions are valuesCan be assigned to a variableCan be passed to another function as an argumentCan be returned by a functionFunctions are the building blocks of scopeA function created inside a function is a nested scopeThe outer scope is available to the inner scopeThe inner scope is not available to the outer

Function PointersWhat is the $ in jQuery?// in this example, $ is a variable that points to a functionvar $ = 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 };

CallbacksA 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.

Higher Order FunctionsA higher order function is a function that takes or returns a functionAll asynchronous callback-style function calls involve higher order functionsThey are used nearly everywhere in JavaScriptAJAX calls, event handling, Node.js, etcA better understanding of functional programming will improve your JavaScript code and your programming skillsLearn More about Functional JavaScriptArticle: http://www.hunlock.com/blogs/Functional_JavascriptBook: JavaScript Patterns by StoyanStefanovUnderscore.js An excellent utility library for functional programming in JavaScript:http://documentcloud.github.com/underscore/

JavaScript Literacy

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to JavaScript Literacy (20)

Recently uploaded (20)

JavaScript Literacy