JavaScript Classes

Classes:

class MyClass { constructor () { this.myProperty1 = 3; this.myProperty2 = "test"; } myMethod1 () { console.log( "Var 1 is " + this.myProperty1 + ", Var 2 is " + this.myProperty2 ); } }

myObject = new MyClass(); myObject.myProperty1 = 5; myObject.myMethod1();

- A class defines a new complex variable type which can have its own variables and functions to access

- Variables defined in a class are called "properties" (or "fields"), and functions defined there are called "methods"

- When you create a variable of this type, it is called an Object

- An object has the variables and functions defined in the class, and they can be accessed with the object name followed by a period followed by the method/property name

- If you add a "#" before the method or property name, it will be private, meaning it is only able to be accessed from within a member function

- If you pass an object as a function parameter value, changes made to the object within the function will remain changed out of the function

Getters and Setters:

class MyClass { #myProperty1; // Define a Private Property get myProperty1 () { if (this.#myProperty1 != undefined) { return this.#myProperty1; } else { return 0; } } set myProperty1 (myParam1) { if (myParam1 > 0) { this.#myProperty1 = myParam1; } } }

myObject = new MyClass(); console.log(myObject.myProperty1); // Get value (0, since it was undefined) myObject.myProperty1 = -5; // Set value (to 0, since -5 is invalid)

- You can create private properties (that can only be accessed from within the methods); just define the property outside the constructor with '#' before the property name, then access it with 'this.#' in the methods

- Sometimes it is best to keep properties private and to modify or retrieve them through functions, typically called getters and setters because of what they do

- This allows you to add code such as to ensure that invalid data is not set, or that the value being retrieved isn't an empty variable

- When you have created a getter and setter, you can access the private property the same way as you would access public properties, but it performs the extra verifications or modifications defined in the functions

- Create a setter method with "set " followed by the private property name (without the "#") and have it modify the property, validating parameters as needed

- Create a getter method with "get " followed by the private property name and have it return the value (you may want to validate the current value)

- In this example, the myProperty1 value is undefined before being set with the setter

Basic Constructor:

class MyClass { constructor () { this.myProperty1 = 3; } }

- A constructor is a function that is executed when you create an object (in this case, using the "= new MyClass()" function )

- It must be named "constructor"

- It is useful for setting the start values for the properties

- "this." means that it is referring to the property in this class (so as not to be confused with other variables with the same name)

- You don't have to define a constructor, you can still initiate an object and just use other methods to set properties

Constructors with Parameters:

class MyClass { constructor (myParam) { // Takes a parameter this.myProperty1 = myParam; } }

- In the example above, the constructor would be used by a call with a parameter passed, e.g. myObj = new MyClass(12);

- Unlike with Java, you can't define multiple constructors (differentiated by number of parameters) for the same class

- To make an object using different parameters from the constructor, make a method that creates a new object and returns it

Making Copies of Objects:

class MyClass { constructor () { this.myProperty1 = 3; this.myProperty2 = "test"; } getCopy () { var myCopy = new MyClass(); myCopy.myProperty1 = this.myProperty1; myCopy.myProperty2 = this.myProperty2; return myCopy; } }

myObject = new MyClass(); myObjCP = myObject.getCopy(); console.log(myObjCP.myProperty1);

- If the property being copied is an array or an object, you will have to make a shallow copy or deep copy (not using "=")

- The "=" operator is for copying simple values or references

- A shallow copy will make a new array/obj with copies of the values or references in the array

- A deep copy is for copying values within values in complex arrays/objects

Challenge

Create a class called "Dog" that stores its name, weight, and breed; create getters and setters for its properties, and create a single function that will display all of the details. Create a constructor that takes parameters for each of the variables. If a getter is called for data that is not filled, return a default value of 0 or "not specified". In the main class, create two objects of this class (one with the parameters and one without). For the object created without parameters, call a getter to ensure that the default value is returned, then set the values with the setters, and display the values accessed with the getters. Finally, run the display function for the object created with parameters.

Completed