This document provides an overview of JavaScript basics including data types, dynamic typing, strings, numbers, Booleans, arrays, objects, functions, scope, and common patterns like namespaces, modules, and immediately invoked function expressions (IIFEs). It covers topics like primitive vs reference types, type coercion, equality operators, object literals, constructors, and the revealing module pattern for encapsulating code.

1. JavaScript Basics
Joar Gullestad Pettersen

2. JavaScript Data Types
String, Number, Boolean, Array, Object, Null, Undefined

3. Dynamic Types
• var x;

4. Dynamic Types
var x;
// x is: undefined

5. Dynamic Types
var x;
// x is: undefined
x = 5;
// x is set to a Number: 5

6. Dynamic Types
var x;
// x is: undefined
x = 5;
// x is set to a Number: 5
x = "Bond";
// x is changed to a String: "Bond"

7. Strings
var car = "Telsa Model S";
var car2 = 'Tesla Model S';

8. Numbers
• var x = 42;
• var y = 13.37;
• var z = 10e3;
// Written without decimals
// Written with decimals
// Exponential notation

9. Booleans
• var x = true;
• var y = false;

10. Array
var frukt = new Array();
frukt[0] = "eple";
frukt[1] = "banan";
frukt[2] = "pære";
["eple", "banan", "pære"]

11. Array 2
var frukt = new Array("eple", "banan", "pære");
["eple", "banan", "pære"]

12. Array 3
var frukt = ["eple", "banan", "pære"];
["eple", "banan", "pære"]

13. Array 4
• var frukt = ["eple", "banan", "pære"]
•
•
•
•
frukt.pop();
// ["eple", "banan"]
frukt.push("tomat");
// ["eple", "banan", "tomat"]
frukt.shift();
// ["banan", "tomat"]
frukt.unshift("tomat"); // ["tomat", "banan", "tomat"]

14. Objects
• Everything is an Object

15. Objects
•
•
•
•
•
Everything is an Object
Booleans can be objects or primitive data treated as objects
Numbers can be objects or primitive data treated as objects
Strings are also objects or primitive data treated as objects
Dates, Maths, Regular expressions, Arrays and functions are always objects

16. Object literal
An object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
lastName: "Doe",
id: 5
};

17. Object literal
An object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
lastName: "Doe",
id: 5
};
person.id; // 5

18. Object literal
An object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
lastName: "Doe",
address: {
street: "Strandsvingen",
number: "14B"
}
};
person.address.street; // "Strandsvingen"

19. Functions
a block of code that will be executed when "someone" calls it:
function add(a, b) {
return a + b;
}
var add = function(a, b) {
return a + b;
}

20. Object Constructor
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var randomPerson = new Person("John", "Doe");

21. Object
var randomPerson = new Object();
randomPerson.firstName = "John";
randomPerson.lastName = "Doe";

22. Boolean expressions
if (a == 2) {//if this is true
//do this...
}

23. Type coercion
• When JavaScript are unsure what you mean, It makes a guess
• Example:
if ('false') { alert("true"); }
• «A String is obviously not true or false, you probably
mean true!»

24. True! 
• if (true) { alert("true"); } // alerts "true"
• if ('false') { alert("true"); } // alerts "true"
• if ([]) { alert("true"); } // alerts "true"
• if (5) { alert("true"); } // alerts "true"
• if ({}) { alert("true"); } // alerts "true"

25. False 
• if (false) { alert("false"); } // does nothing
• if (0) { alert("false"); } // does nothing
• if (null) { alert("false"); } // does nothing
• if (undefined) { alert("false"); } // does nothing
• if ("") { alert("false"); } // does nothing

26. More type coercion 
1 == "1"
true == "1"
false == "0"

27. More type coercion 
1 == "1"
true
true == "1"
false == "0"

28. More type coercion 
1 == "1"
true
true == "1"
true
false == "0"

29. More type coercion 
1 == "1"
true
true == "1"
true
false == "0"
true

30. More type coercion
1 == "1"
true
true == "1"
true
false == "0"
true
false == "0" == 1 == true == [] == ""

31. More type coercion 
1 == "1"
true
true == "1"
true
false == "0"
true
false == "0" == 1 == true == [] == ""
true

32. Confusing?
• Solution?

33. Confusing?
• Solution?
• Avoid bugs| and use: ===

34. ===
1 == true
true
1 === true
false
1 == "1"
true
1 === "1"
false

35. Scope & global variables
• C#/Java: anything inside curly brackets, {} , defines a scope
• Example:
if (true)
{
var scopeVariable = "Test";
}
scopeVariable = "Test2"; // variable not defined

36. Scope & global variables
• Javascript: only functions define a new scope
• Example:
if (true) {
var scopeVariable = "Test";
}
scopeVariable; // value: "Test";

37. Scope & global variables
function scope1() {
var member; //is a member of the scope defined by the function example
//this function is also part of the scope of the function example
var innerScope = function() {
member= 12; // traverses scope and assigns member in scope1 to 12
};
};

38. Scope & global variables
function scope1() {
var member; //is a member of the scope defined by the function example
//this function is also part of the scope of the function example
var innerScope = function() {
var member= 12; // defines member in this scope and do not traverse
};
};

39. Scope & global variables
function scope1() {
var member;
//is a member of the scope defined by the function example
//this function is also part of the scope of the function example
var bar = function() {
member= 12; // traverses scope and assigns scope1member.foo to 12
};
};
function scope2() {
member = 15; // traverses scope and assigns global.member to 15
}

40. Namespaces
• Not built into JavaScript
• Problem?

42. C# namespace
namespace Peanuts
{
}

43. JavaScript (Ad-hoc) namespace
var Peanuts = {};
// Object used as namespace

44. JavaScript (Ad-hoc) namespace
var Peanuts = Peanuts || {}; // in case it already
exists

45. C# Namespace
namespace Peanuts
{
public class Person
{
}
}

46. «Classes» and «methods» ?
var Peanuts = Peanuts || {};
Peanuts.Calculator = {
add: function (a,b) {
return a + b;
},
subtract: function () {
return a - b;
}
};
Peanuts.Calculator.add(1, 2); // 3

47. Immediately invoked function expressions
• (function () {
•
// logic/code here
• })();

48. Why?
• Executes an expression and therefore code immediately
• Creates «privacy» for your code (function scope ftw!)

49. How?
• JavaScript, parenthesis can’t contain statements.
• When the parser encounters the function keyword, it knows to
parse it as a function expression and not a function declaration.

50. Immediately invoked function expressions
•
•
•
•
•
(function () {
// logic/code here
})();
The key thing about JavaScript expressions is that they return values.
To invoke the function expression right away we just need to tackle a couple
of parentheses on the end(like above).

51. Immediately invoked function expressions
• (function ($) {
•
// logic/code here
• })(jQuery);

52. Revealing module pattern
var Peanuts = Peanuts || {};
Peanuts.Calculator = function () {
var add = function(a, b) {
return a + b;
};
var subtract = function(a, b) {
return a - b;
};
return {
add: add,
subtract: subtract
};
};
Peanuts.Calculator().add(1, 2); // 3

53. Revealing module pattern 2
var Peanuts = Peanuts || {};
Peanuts.Calculator = (function () {
var add = function(a, b) {
return a + b;
};
return {
add: add,
};
})();
Peanuts.Calculator.add(1, 2); // 3

54. Revealing module pattern 3
var Peanuts = Peanuts || {};
Peanuts.Calculator = (function () {
var PI = 3.14; // private variable!
var getCircleArea = function(r) {
return PI * r * r;
};
return {
getCircleArea: getCircleArea // public method
};
})();
Peanuts.Calculator.getCircleArea(2); // 12.56

55. Sources
• http://javascriptweblog.wordpress.com/2010/06/07/understandingjavascript-prototypes/
• www.w3schools.com
• http://www.youtube.com/watch?v=wOMLlEAqgRk
• http://designpepper.com/blog/drips/an-introduction-to-iifes-immediatelyinvoked-function-expressions