JavaScript Literacy


Published on

Intermediate Language Features for Reading and Understanding JavaScript

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JavaScript Literacy

  1. 1. JavaScript LiteracyIntermediate Language Featuresfor Reading and Understanding JavaScript<br />David Jacobs<br />@MetaThis<br />
  2. 2. Object Literal Notation<br />// create a person object<br />varperson = {};<br />person.firstName = "Joe";<br />person.lastName = "Jones";<br />person.address = {};<br />person.address.street = "123 main";<br /> = "12345";<br />person.address.state = "MO";<br />// same thing in object literal notation<br />var person = {<br />firstName: "Joe",<br />lastName: "Jones",<br /> address: {<br /> street: "123 main",<br /> zip: "12345",<br /> state: "MO" <br /> }<br />};<br />
  3. 3. Object Literals with Functions<br />// can include functions<br />var person = {<br />firstName: "Joe",<br />lastName: "Jones",<br /> address: {<br /> street: "123 main",<br /> zip: "12345",<br /> state: "MO" <br /> },<br />getFullName: function() {<br /> return this.firstName + " " + this.lastName;<br /> }<br />};<br />Inline function<br />
  4. 4. Object Literals - JSON<br />JSON is a subset of Object Literal notation<br />Requires property names to be in quotes<br />Functions are not allowed<br />Special characters must be escaped/encoded<br />Other than these restrictions, you can<br />simply think of JSON as a JavaScript object<br />All valid JSON is a valid Object Literal<br />var person = {<br /> "firstName ": "Joe",<br /> "lastName": "Jones",<br /> "address": {<br /> "street": "123 main",<br /> "zip:": "12345",<br /> "state ": "MO" <br />}<br />getFullName: function() {<br />return …<br />}<br />};<br />
  5. 5. Arguments<br />function doSomething(a, b, c) {<br />// something<br />}<br />// arguments are optional<br />doSomething(); //this is valid!<br />// can pass extra arguments<br />doSomething("apple", “banana", "cat", "wtf"); //this is also valid!<br />// regardless of declared parameters, functions have access <br />// to all arguments through a special arguments array<br />function doSomething() {<br /> return arguments[3]; //returns "wtf"<br />}<br />
  6. 6. Object Literals as Arguments<br />JavaScript Idiom for Optional Named Parameters<br />Functions often have an optional “options” or “settings” parameter<br />jQuery.ajax( url, [settings] )<br />Object Literals are often used as constructors, providing or overriding defaults<br />jQuery.ajax( {url: "test.html", data: myObject, success: alert("success")} )<br />
  7. 7. Arrays<br />The Array prototype contains methods specific to arrays, but as a data structure…<br />Arrays are essentially just object literals with an implicit number as the property name<br />Which generalizes to a universal property:value pattern for all objects (and JSON data)<br />Which enables a universal data access pattern of object[property]<br />var array = ["first","second", "third"];<br />var object = {0: "first", 1: "second", 2: "third"};<br />array[1] //returns "second"<br />object[1] //returns "second“<br />Don’t take this point too literally…but it may help you better understand JavaScript data structures. <br />
  8. 8. || and &&<br />You know<br />|| is a boolean Or<br />&& is a boolean And<br />Do you know?<br />Expressions using them can return a non-boolean value<br />This is useful<br />// if userInput is null or an empty string, then the Or case <br />// is evaluated and returned as a value<br />var name = userInput || "Bob";<br />// conditional execution – validate() is only called if there’s a value<br />var valid = userInput && validate(userInput);<br />
  9. 9. Functions<br />Functions are objects<br />Functions are values<br />Can be assigned to a variable<br />Can be passed to another function as an argument<br />Can be returned by a function<br />Functions are the building blocks of scope<br />A function created inside a function is a nested scope<br />The outer scope is available to the inner scope<br />The inner scope is not available to the outer<br />
  10. 10. Function Pointers<br />What is the $ in jQuery?<br />// in this example, $ is a variable that points to a function<br />var $ = function (id) { <br /> return document.getElementById(id); <br />}; <br />// this is a function call on the $ variable, setting the onClick handler <br />// on the DOM element returned by the function<br />$('yourDiv').onClick = function (event) { <br /> //do something <br />};<br />
  11. 11. Callbacks<br />A callback is just a function that is passed to another function, typically with the intent of it being called later (“called back”)<br />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.<br />
  12. 12. Higher Order Functions<br />A higher order function is a function that takes or returns a function<br />All asynchronous callback-style function calls involve higher order functions<br />They are used nearly everywhere in JavaScript<br />AJAX calls, event handling, Node.js, etc<br />A better understanding of functional programming will improve your JavaScript code and your programming skills<br />Learn More about Functional JavaScript<br />Article:<br />Book: JavaScript Patterns by StoyanStefanov<br />Underscore.js <br />An excellent utility library for functional programming in JavaScript:<br /><br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.