JavaScript Object Model
Objectives
- Differentiate between functions and methods
- Store functions in properties
- Define and invoke functions as methods on objects
- Add methods to objects that use `this` to refer to that object
function name(){
return "Barbara Streisand";
}
var person = {
name: function(){
return "John Cena";
}
};
name();
person.name(); function name(){
return "Barbara Streisand";
}
var person = {
name: function(){
return "John Cena";
}
};
name(); // Barbara Streisand
person.name(); // John CenaFunctions vs Methods
A reusable block of code that can accept inputs and return values
A function is a set of reusable code that performs a task
A function is an object that contains a local environment and performs operations
Functions vs Methods
A function is called a method when it is a property of an Object
Plain and simple.
Let's do some logic
All ___________ are ___________,
but not all ___________ are ___________.

methods
methods
functions
functions
Exercise
In pairs, come up with 4 examples you've already used where a method is called on an Object (i.e. console.log)
var simpleObj = {}var simpleObj = {
property: 'value'
}var simpleObj = {
property: 'value'
}
simpleObj.toString();var simpleObj = {
property: 'value'
}
simpleObj.toString();
// Result: [Object object]var simpleObj = {
property: 'value',
method: function(){
return 'Method'
}
}var simpleObj = {
property: 'value',
method: function(){
return 'Method'
}
}
simpleObj.method;var simpleObj = {
property: 'value',
method: function(){
return 'Method'
}
}
simpleObj.method;
// Result:
// function(){
// return 'Method'
// }var simpleObj = {
property: 'value',
method: function(){
return 'Method'
}
}
simpleObj.method();var simpleObj = {
property: 'value',
method: function(){
return 'Method'
}
}
simpleObj.method();
// Result:
// MethodExercise
Let's create a Converter object
I DO: convert kg to lbs
WE DO: converts km to miles, converts weeks to minutes
YOU DO: converts in to cm
Objectives
- Differentiate between functions and methods
- Store functions in properties
- Define and invoke functions as methods on objects
- Add methods to objects that use `this` to refer to that object
var person = {
first: "John",
last: "Cena",
fullName: function () {
return person.first + " " + person.last;
}
};
person.fullName(); var person = {
first: "John",
last: "Cena",
fullName: function () {
return this.first + " " + this.last;
}
};
person.fullName(); var person = {
first: "John",
last: "Cena",
fullName: function () {
return this.first + " " + this.last;
}
};
person.fullName(); // John Cena
// `this` is a reference to the object
// that it is inside of var person = {
first: "John",
last: "Cena",
fullName: function () {
return this.first + " " + this.last;
}
};
person.fullName();
person.first = "JoJo";
person.fullName(); var person = {
first: "John",
last: "Cena",
fullName: function () {
return this.first + " " + this.last;
}
};
person.fullName();
person.first = "JoJo";
person.fullName(); // JoJo CenaRemember those real life examples?
Let's program one!
In pairs, model a TV
- Define at least two methods
Homework
Submit solution to Assessment under the 'Exercises' tab on Workbook
Answer the assessment under 'Question' tab on Workbook
What's an Object?
An object is a hard shell that hides the gooey complexity inside it and instead offers us a few knobs and connectors that present an interface through which the object is to be used.

Let's think of some real life examples...
JavaScript Object Model
By Dize Hacioglu
JavaScript Object Model
- 216