JSFiddle - React, Tailwind, and code Playground

for CSCI E3, Harvard University author(s): Larry Bouthillier

by DustyWhite

HTML

<h3>
Open the Javascript console to see the output
</h3>

JavaScript

// This function is a simple contructor function using properties assigned using the 
//   'this' keyword. 
function SimpleAddrBookEntry(f, l, a, e) {
    this.fname = f;
    this.lname = l;
    this.addr = a;
    this.email = e;

    this.personRole = "student";
    this.getFullName = function(){
                return this.fname + " " + this.lname;
    }
}
var entry1 = new SimpleAddrBookEntry("Any","Student","Cambridge","[email protected]");
console.log(`Constructor function using 'this': ${entry1.fname} ${entry1.lname}`);


// This function is a constructor function using local variables instead of properties. 
//   Because of the normal rules limiting variables to function scope, these actually
//   are not porperties of the object, but are variables scoped within it. None of this
//   information can be accessed from the outside of the object, so it's not very useful. 
function NoGoodAddrBookEntry(f, l, a, e) {
    var fname = f;
    var lname = l;
    var addr = a;
    var email = e;

    var personRole = "student";
    var getFullName = function(){
                return this.fname + " " + this.lname;
    }
}
var entry2 = new NoGoodAddrBookEntry("Any","Student","Cambridge","[email protected]");
console.log(`Constructor function using variables: ${entry2.fname} ${entry2.lname}`);


// This function illustrates both - using properties (set with 'this') for information
//  that should be accessible directly on the object, and variables scoped within for
//  information that should be more protected.
function AwesomeAddrBookEntry(f, l, a, e) {
    this.fname = f;
    this.lname = l;
    this.addr = a;
    this.email = e;

    var personRole = "student";  // this can't be accessed like entry3.personRole
    this.getRole = function(){
            // But personRole is available within the object and can be returned 
            //   or manipulated using methods. 
                return personRole;  
    }
}
var entry3 = new...