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

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

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