//Constructor Functions and Classes 

//When working with Javascript, sometimes we want to be able to reproduce many different copies of the same type of structure. Imagine that we are creating a database of student information for a school. We might want to create one object with the same properties (student name, id, birthday, parent contact info etc). We don't necessarily want to create a new object each time we need to enter a new student. Instead, it would be better to plug the information into some pre-existing outline. 

//Think of the date object. Any time we want to work with the date object, we know it has a consistent set of properties and methods that we can use on it, so we can easily plug it in wherever we need it. 

//This is where custon objects come in. We already know that we can create a custom javascript object, like so: 

let myStudent = {
  name: "John Smith",
  id: 40586,
  birthday: new Date(2010, 4, 3)
};

//We can also create what's called a constructor function, which is a function that has various parameters that we can use to construct many instances of the same object. These parameters then become values of properties inside our object. 

//Here is the syntax:

// function(parameter1, parameter2, parameter3) {
//    this.property1 = parameter1;
//    this.property2 = parameter2;
//    this.property2 = parameter2;
// }

//Now let's rewrite the student object as a constructor function:

function Student(name, id, birthday) {
  this.name = name;
  this.id = id;
  this.birthday = birthday;
}

//When we want to call this constructor function, we use the syntax of new Student(), just like new Date(). Then, we pass in the values that we want to assign for each parameter.

let student1 = new Student("Henry Jones", 57489, new Date(2015, 5, 4));

//Let's see what this gives us:
console.log(student1);

//We can also acess the individual properties:
console.log(student1.id);
console.log(student1.name);

//Now that we have our constructor function, we can make as many instances of the Student object as we want:

let student2 = new Student("Jalia Smith", 57489, new Date(2012, 6, 24));
let student3 = new Student("Emma Johnson", 57489, new Date(2013, 0, 8));

//Now imagine that we want to do the same thing with all the names. We know that we can easily loop through arrays, so we might consider putting all the students in an array:

let studentData = [student1, student2, student3];

studentData.forEach((student, index) => {
  let para = document.createElement("p");
  document.body.appendChild(para);
  para.innerHTML = "Student " + (index + 1) + ": " + student.name + ". Student ID: " + student.id + ". Student Birthday: " + student.birthday.toLocaleDateString();
});

//Note about the index property: the first parameter in the forEach loop represents each item in the array, and the second represents the index position in the array. The second argument is optional. We could replace these with anything, such as i and j, and it would have the same result. 

//Notice how we used the toLocaleDateString method on the date method that we used each time we passed a parameter into our function. If we can use methods inside constructor functions, then we can also build our own methods inside them as well. Consider the following example: 

function Flower(type, color) {
  this.type = type;
  this.color = color;
  this.text = function() {
    let p = document.createElement("p");
    document.body.appendChild(p);
    p.innerHTML = this.type;
    p.style.color = this.color;
  }
}

let flower1 = new Flower("rose", "pink");
let flower2 = new Flower("pansy", "purple");
let flower3 = new Flower("sunflower", "yellow");

//We must still invoke the methods in order for them to run:

flower1.text();
flower2.text();
flower3.text();

//If you want to add a property to one of these objects but not the others, you can do it using simply dot notation, like so:

flower1.location = "back garden";

//This will add the location property to ONLY the flower1 object:

console.log(flower1.location, flower2.location);

//If you want to add a new property to ALL instances of the constructor function, you must use the prototype property before the new property, for example:

Flower.prototype.season = "Summer";

//Now all the objects will have summer for a season. Note that because you are adding this property after the fact, each will have the value of "Summer" rather than having a parameter to fill with an argument. 

console.log(flower1.season, flower2.season, flower3.season);

//Classes 

//Another way of creating an easily reproducible object is by using a Class. JavaScript Classes are templates for JavaScript Objects. Here is the syntax:

// class ClassName {
//   constructor() { ... }
// }

//each property of the class must go inside the constructor function inside the class. Here is an example:

class Teacher {
  constructor(name, subject) {
    this.name = name;
    this.subject = subject;
  }
}

let teacher1 = new Teacher("Mr. Smith", "geography");
console.log(teacher1.name + " teaches " + teacher1.subject);

//The constructor method must be present in a class. If you do not add it, javascript will add an empty construcor. 

//If you want to add methods to a class, you can add them with the name of the method, empty parentheses, and then the code to execute in curly brackets, like so:

class Snack {
  constructor(type, flavor) {
    this.type = type;
    this.flavor = flavor;
  };
  printSnack() {
    console.log("My favorite flavor of " + this.type + " is " + this.flavor);
  }
}

let snack1 = new Snack("chips", "cheese and onion");
let snack2 = new Snack("cookie", "chocolate chip")

snack1.printSnack();
snack2.printSnack();

//Note about constructor functions and classes: As you will have noticed, they have the same use case, and are very similar. So which should you use? They do have some differences that would be too complex to explain here, but it is important to note that the class syntax is newer than the constructor function, and therefore it may be better to use that, although it is still useful to be able to recognize both.