This presentation will give you a brief background to JavaScript, what it is and where it comes from. Then it will walk you through general pitfalls, best practices and more advanced topics such as object-orientation, scope and closures.

1. JavaScript
From birth to closure

2. Yeah, nothing

3. Brendan Eich

4. Brendan Eich

5. What is JavaScript?

6. • Developed by Brendan Eich 1995
• Initially called Mocha, then LiveScript
• First day of light in a beta of Netscape 2
in December 1995
• IE followed suit with JScript in 1996

9. “You’re number one!”

10. Has NOTHING to do
with Java!

11. • JavaScript is one of the world’s most
popular programming languages
• One interpreter on every machine
• ECMAScript standardizing - Fifth edition
• Web browsers becoming much faster

13. SunSpider test

14. Douglas Crockford

15. Douglas Crockford

16. • JSON
• JSLint
• JSMin

18. JavaScript basics

19. Variable declaration:
var benAffleck = ”Actor”;

20. Function declaration:
function benQuote () {
! return "Rumors about me?
Calista Flockhart, Pam
Anderson, and Matt Damon.
That's who I'm dating.";
}

21. Conditionals

22. • If
• Switch
• Shorthand assignment
• Ternary operators

23. function makeMovie (withLivTyler) {
! var nice = withLivTyler || false;
}

24. (datedJLo)? "Lucky guy!" : "No?";

25. Comparison operators

26. • =
Assignment
• ==
Equality
• === Identity

27. // Assignment
var bestFriend = "Matt Damon";
// Equality
if (5 == "5") {
! // true
}
// Identity
if (5 === "5") {
! // false
}

28. // Short-circuit logic
if (true || false)
if (false && true)
// Makes this code safe
if (obj && obj.property)

29. // Short-circuit logic
if (true || false)
if (false && true)
// Makes this code safe
if (obj && obj.property)

30. Type coercion

31. // true
5 == "5"
// 123
"1" + 2 + 3;

32. // 6, manual type conversion
parseInt("1", 10) + 2 + 3;

33. null == undefined == 0 ==
false == ""
• Not really, but sort of
• Rather “truthy” or “falsy”

34. var a = null;
var b; // undefined
var c = 0;
var d = false;
var e = "";
if (a) // false
if (b) // false
if (c) // false
if (d) // false
if (e) // false

35. JavaScript data types

36. • string
• number
• boolean
• null
• undefined
• Object

37. Types of Object include:
• function
• Array
• Date
• RegExp

38. Checking type

39. typeof return values:
• string
• number
• boolean
• function
• object
• undefined

40. typeof fanClub // "undefined"
var title = "Armageddon";
typeof title // Equals "string"
var age = 37;
typeof age // Equals "number"

41. function anotherQuote () {
! return "If I ever woke up
with a dead hooker in my
hotel room, Matt would be
the first person I'd call.";
}
typeof anotherQuote; //"function"

42. var obj = {};
typeof obj = // "object"
var arr = ["B", "E", "N"];
typeof arr // "object"

43. var obj = {};
typeof obj = // "object"
var arr = ["B", "E", "N"];
typeof arr // "object" ?!

44. Using instanceof

45. obj instanceof Array // false
arr instanceof Array // true

46. Functions

47. Procedural
function notAHit () {
! return "Gigli";
}

48. Functions as variables
var wroteScript = function () {
! return "Good Will Hunting";
};
wroteScript();

49. Anonymous
document.onmousemove = function (evt) {
alert(evt.pageX);
};

50. Self-invoking
(function () {
! var dogma = "Shot in 1999";
})();

51. Self-invoking
(function () {
! var dogma = "Shot in 1999";
})();

52. Function arguments

53. • Any argument can be omitted
• Any argument can be added
• No overloading
• The arguments collection

54. function concat (a, b, c) {
! return a + b + c;
}
concat(1, 2, 3); // 6
concat(1, 2); // NaN

55. • The arguments collection
• Property: arguments.length
• NOT an array

56. function concat () {
! var sum = 0,
l = arguments.length;
! for (var i=0; i<l; i++) {
! ! sum += arguments[i];
! }
! return sum;
}
concat(1, 2, 3); // 6
concat(1, 2); // 3
concat(1, 2, 7, 11, 5); // 26

57. Objects

58. function Ben () {
! this.name = "Ben Affleck";
! this.gotAnOscar = true;
};
var ben = new Ben();
alert(ben.gotAnOscar); // true
Object constructor

59. var ben = {
! name : "Ben Affleck",
! gotAnOscar : true
};
alert(ben.name); // "Ben Affleck"
Object literal

60. Different syntax, same thing:
ben["arms"] = 2;
ben.arms = 2;

61. Different syntax, same thing:
ben["arms"] = 2;
ben.arms = 2;

62. For any object:
var ben = {};
ben[1972] = "Year of birth";
ben["born"] = 1972;
ben[true] = false;

63. var regEx = new RegExp;
regEx[3] = "I can do this?";

64. var goodMovie = {
! title : "Good Will Hunting",
! year : 1997
};
for (var item in goodMovie) {
! alert(item + ": " + goodMovie[item]);
}

65. var goodMovie = {
! title : "Good Will Hunting",
! year : 1997
};
// Check returns true
if ("year" in goodMovie) {
! alert(goodMovie.year);
}

66. Inheritance

67. • Prototype-based inheritance
• Not class-based

68. • The prototype chain checks itself first
• It then goes to the parent, parent’s parent
etc...

69. function Being () {
! this.living = true;
}
Being.prototype.greet = function () {
! return "Hello!";
};

70. function Ben () {
! this.talks = true;
}
Ben.prototype = new Being;
Ben.prototype.saySomething = function () {
! return "I feel like fame is wasted on me.";
};

71. // Create an instance
var ben = new Ben();
// Returns "I feel like fame is wasted on me."
ben.saySomething();
// Returns "Hello!", inherited
// from the Being object
ben.greet();

72. Checking for the greet() method in this order:
• ben instance
• Ben prototype
• Being prototype
• Object prototype

73. • Simple JavaScript Inheritance
• A Base Class for JavaScript Inheritance
• Defining classes and inheritance
Class-based mimicking

74. • It’s native, i.e. no dependencies
• Freedom of style and version
• Easy readability
• Code handover
Why prototype syntax

75. “I have been writing JavaScript for 8 years
now, and I have never once found need to
use an uber function...
...I now see my early attempts to support the
classical model in JavaScript as a mistake.”
- Douglas Crockford
Why prototype syntax

76. Scope

77. • Scope refers to where variables and
functions are accessible
• In what context something is being
executed

78. • Basically, global or local
• Variables have function scope
• Functions have the same scope as variables

79. // Global
var likesToPlay = "Poker";
function getGame () {
! // Local
! var likesToPlay = "Hold ‘em";
! // Global
! playOnline = true;
! return likesToPlay;
! // Returns "Hold ‘em"
}

80. function playPoker (money) {
! if (money) {
! ! var willPlay = true;
! }
! // Perfectly valid
! return willPlay;
}

81. function global () {
! return "Access anywhere";
}

82. function outer () {
! function inner () {
! ! return "Inner";
! }
! return inner();
}
outer(); // Accessible
inner(); // Not accessible

83. “Global scope is like a public toilet.
You can’t avoid going in there. But
try to limit your contact with
surfaces when you do.”
- Dmitry Baranovskiy, Raphaël JS
library
Polluting the global
namespace

84. Function scope

85. • Run a function in a certain context
• The call and apply methods
• Defined for all functions

86. function docReady () {
! alert(this);
! // this is the window object
}
window.onload = docReady;

87. function setName (name) {
! this.name = name;
! // document.name === "Bennifer"
}
document.onclick = function () {
! setName.call(document, "Bennifer");
};

88. function setName (name) {
! this.name = name;
! // document.name === "Bennifer"
}
document.onclick = function () {
! setName.call(document, "Bennifer");
};

89. function setNames () {
! this.firstName = arguments[0];
! this.lastName = arguments[1];
// document.firstName === “Ben”
// document.lastName === “Affleck”
}
function callSetNames () {
! setNames.apply(document, arguments);
};
callSetNames("Ben", "Affleck");

90. function setNames () {
! this.firstName = arguments[0];
! this.lastName = arguments[1];
// document.firstName === “Ben”
// document.lastName === “Affleck”
}
function callSetNames () {
! setNames.apply(document, arguments);
};
callSetNames("Ben", "Affleck");

91. Closures

96. • Closures are expressions, usually functions,
which can work with variables set within a
certain context
• Inner functions referring to local variables
of its outer function create closures

97. function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
var no7 = add5(2); // Equals 7

98. “Right...What?!”

99. function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
// How JavaScript sees it
var add5 = function (y) {
! return 5 + y;
}

100. function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
// How JavaScript sees it
var add5 = function (y) {
! return 5 + y;
}

101. function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function () {
! ! ! alert(i);
! ! };
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;

102. function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function () {
! ! ! alert(i);
! ! };
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function () {
! ! ! alert(i);
! ! };

103. function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;

104. function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

105. function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

106. function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

107. function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

108. Yahoo JavaScript
Module Pattern

109. • Origins from Douglas Crockford
• Singleton pattern
• Offers private and public members

110. var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();

111. var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();

112. var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();

113. var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true,
! ! title = function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen = function () {
! ! ! return isDirectedByBen;
! ! };
!
! // Public members
! return {
title : title,
directedByBen : directedByBen
! };
}();

114. Namespacing

115. • Avoiding global variables
• Code structure
• Extending, but not necessarily inheriting

116. // Create a Ben object
var Ben = {};
// Set functionality
Ben.Director = function () {
! var noOfMovies = 4;
! return {
! ! movies : function () {
! ! ! return noOfMovies;
! ! }
! };
}();

117. // Assertion
if (typeof Ben === "undefined") {
! Ben = {};
}
Ben.Actor = function () {
! var noOfMovies = 51;
! return {
! ! actAndDirectorCount : function () {
! ! ! return noOfMovies + " as actor & "
+ Ben.Director.movies.call(this)
+ " as Director";
! ! }
! };
}();

118. Sugar & spice
It’s awfully nice!

119. • Sugaring
• Currying

120. // A little sugar
String.prototype.trim = function () {
! return this.replace(/^s*|s*$/g, "");
};
var monkey = " Monkey ";
monkey.trim(); //"Monkey"

121. // Currying
function add () {
! var sum = 0;
! for (var i=0, il=arguments.length; i<il; i++) {
! ! sum += arguments[i];
! };
! return sum;
}

122. // Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

123. // Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

124. // Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

125. // Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

126. // Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

127. // Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

128. Syntax
recommendations

129. • No real standard, only best practices
• Recommended tool: JSLint

130. Embrace JavaScript

131. • Embrace JavaScript
• Don’t try to make it into Java, C or any
other language
• Learn to love it and its dynamic, loose and
prototypical nature

132. This is how we roll

133. Robert Nyman
robertnyman.com/speaking/
robert@robertnyman.com
Twitter: @robertnyman
Pictures:
Brendan - http://www.flickr.com/photos/mollyeh11/279367481/
Yoda - http://buzzybeegirl.files.wordpress.com/2008/12/yoda-400x3001.jpg
Twitter - http://twitter.com/manssandstrom/status/1528315581
Gmail - http://www.flickr.com/photos/webber/71748774/
Slow - http://www.feministing.com/archives/012345.html
Crockford - http://www.flickr.com/photos/charliebrewer/2897862701/
Obi-Wan - http://enterthecircle.files.wordpress.com/2009/01/obi-wan-kenobi-01-large.jpg
Ben Affleck - http://www.flickr.com/photos/sasy/3993866442/
Squat toilet - http://www.flickr.com/photos/35034350906@N01/4080372999
Cuddling bears - http://www.nogg.se/blogg.asp?intShowMenu=a2&idHomepage=6951&idBloggCategory=6162
Winnie The Pooh and friends - http://mammacarola.blogg.se/2009/april/
IEVoodoo Doll - http://nexus404.com/Blog/2007/10/26/make-your-own-internet-explorer-voodoo-doll-a-step-by-step-guide/
Ben Affleck confused - http://cdn.buzznet.com/assets/imgx/4/9/0/5/8/orig-49058.jpg