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 Cena

Functions 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 ___________.

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:
// Method

Exercise

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 Cena

Remember 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