JavaScript that you need to know but might not!

This appendix covers

• Which JavaScript concepts are important for effectively using jQuery
• JavaScript Object basics
• How functions are first-class objects
• What's an IIFE?
• Determing (and controlling) what this means
• What's a closure?

1 JavaScript Object fundamentals

1.1 How objects come to be

1.2 Properties of objects

---

var ride = new Object();
ride.make = 'Yamaha';
ride.model = 'XT660R';
ride.year = 2014;
ride.purchased = new Date(2015, 4, 10);
ride.purchased = new Date(2015, 7, 21);

var owner = new Object();
owner.name = 'Spike Spiegel';
owner.occupation = 'bounty hunter';
ride.owner = owner;

var ownerName = ride.owner.name;

ride.make
ride['make']
ride['m' + 'a' + 'k' + 'e']

var p = 'make';
ride[p]
ride["a property name that's rather odd!"]

---

1.3 Object literals

---

var ride = {
make: 'Yamaha',
model: 'XT660R',
year: 2014,
purchased: new Date(2015, 7, 21),
owner: {
    name: 'Spike Spiegel',
    occupation: 'bounty hunter'
  }
};

var someValues = [2, 3, 5, 7, 11,13, 17];

---

1.4 Objects as window properties

---

var aVariable = 'This is a text.';
someObject.aProperty = 'This is another text.';

var foo = 'bar';
window.foo = 'bar';
foo = 'bar';

• A JavaScript object is an unordered collection of properties.
• Properties consist of a name and a value.
• Objects can be declared using object literals.
• Arrays can be declared using array literals.
• Top-level variables are properties of window.

---

2 Functions as first-class citizens

---

• Assigned to variables
• Assigned as a property of an object
• Passed as a parameter
• Returned as a function result
• Created using literals

---

2.1 Function expressions and function declarations

---

function doSomethingWonderful() {
  alert('Does something wonderful');
}

function hello() {alert('Hi there!');}
hello = function hello() {alert('Hi there!');}
window.hello = function hello() {alert('Hi there!');}

var myFunc = function() {
  alert('this is a function');
};

myFunc();

var myObj = {
  bar: function() {}
};

---

2.2 Functions as callbacks

---

function hello() {alert('Hi there!');}
setTimeout(hello, 5000);

setTimeout(function() {alert('Hi there!');}, 5000);

---

2.3 What this is all about

---

var ride = {
 make: 'Yamaha',
 model: 'XT660R',
 year: 2014,
 purchased: new Date(2015, 7, 21),
 owner: {
 name: 'Spike Spiegel',
 occupation: 'bounty hunter'
 },
 whatAmI: function() {
 return this.year + ' ' + this.make + ' ' + this.model;
 }
};

var obj1 = { handle: 'obj1' };
 var obj2 = { handle: 'obj2' };
 var obj3 = { handle: 'obj3' };
 var value = 'test';
 window.handle = 'window';
 function whoAmI(param) {
 return this.handle + ' ' + param;
 }
 obj1.identifyMe = whoAmI;
 alert(whoAmI(value));
 alert(obj1.identifyMe(value));
 alert(whoAmI.call(obj2, value));
 alert(whoAmI.apply(obj3, [value]));

• When the function is called directly as a top-level function, the function context is the window instance.
• When called as a property of an object, the object becomes the function context of the function invocation. you could say that the function acts as a method for that object-as in OO languages. But take care not to get too blase about this analogy. you can beled astray if you're not careful, as the remainder of this example's results will show.
• Employing the call() method of Function causes the function context to be set to whatever object is passed as the first parameter to call()-in this case, obj2. In this example, the function acts like a method to obj2, even though it has no association whatsoever-even as a property-with obj2. It also shows how parameters can be passed when using call().
• As with call(), using the apply() method of Function sets the function context to whatever objects is passed as the first parameter. The difference between these two methods becomes significant only when parameters are passed to the function. In fact, when using apply() all the parameters must be provided as elements of a single array passed as the second argument.

alert(obj1.identifyMe.call(obj3));

---

2.4 Closures

---

function timer() {
 var local = 1;
 window.setInterval(
 function() {
 $('#display').append(
 '
At ' + new Date() + ' local=' + local + '
'
 );
 local++;
 },
 2000
 );
 }
 timer();

this.id = 'someID';
var outer = this;
$('*').each(function() {
 alert(outer.id);
});

---

2.5 Immediately-Invoked Function Expression

---

(function() {
 // The code of the function goes here...
})();

var i = 10;
(function(index) {
 // The code of the function goes here...
})(i);

for (var i = 1; i <= 3; i++) {
 document.getElementById('button-' + i).addEventListener(
 'click',
 function() { alert(i); }
 );
}

for (var i = 1; i <= 3; i++) {
 (function(index) {
 document.getElementById('button-' + index).addEventListener(
 'click',
 function() { alert(index); });
 })(i);
}

---

3 Summary