Section 4 is estimated to take a total of 10-14 hours to complete. Similar to the previous sections, this section of pre-work involves reading (both from this document as well as the 📒John Duckett book), 👨🏾💻exercises, and 📝reflection questions. Make sure to manage your time well so that should you get stuck and need help, you have plenty of time to do so and meet the deadline.
- Object Literal
- key-value pair
- dot notation
- method
- class (in JavaScript)
- object instance
- properties
classconstructornew
One challenge developers face, moreso when they are starting out, is estimating how long something will take. Sometimes we don't account for merge conflicts, bugs, annoying Slack messages, and all the other things that interrupt our workflow or slow us down.
One challenge learners in a new environment/content area face is feeling like they know nothing, and until they know everything, they feel like they are failing.
So this week, we would like you to start self-monitoring your progress. Before you start on the technical work, reflect back on how the pre-work has gone so far.
- Have the time estimates matched up with your experience?
- When you sit down to start working, do you have a clear goal of what you want to accomplish and in how much time? If so, how aligned is that to what actually happens?
- How do you work best - in 2 hour blocks, 4 hour blocks, etc? Do you take breaks regularly? Do you have a system to hold yourself accountable to taking breaks?
You've probably heard of the Pomodoro Technique in Mod 0 classes (and elsewhere, maybe!). During this final section of pre-work, we are going to ask that you follow this technique. Please read about it here. The article doesn't mention writing down Step 1, but we ask that you find a special spot in your notebook where you do this for each work session. In the deliverables, we will ask that you share what you wrote down for Step 1 of the technique each time you started a new task. Note: if the 25 minutes on/3-5 minutes off isn't best for you, you do not have to follow that! The main focus of this is setting an intention and continuing to better understand your working style.
An Object is a way to store more complex data similar to an array, but with several key differences. An array stores an ordered list of data. Each item in the array can be accessed using only numbers, or the index of item. For example:
var animalsArray = ["Zebra", "Giraffe", "Elephant"];
animalsArray[0]; // Accesses the first item in my array, "Zebra"
animalsArray[1]; // Accesses the second item in my array, "Giraffe"Objects store data but instead of using only index positions to get the data, you can use Strings. This lets you treat an object like it's a database for storing and organizing data. Below is the syntax of an object. This is called an Object Literal.
var zebraInfo = {
name: "Angela",
age: 3,
height: "5ft"
};In the zebraInfo, we store information about a Zebra. This object contains 3 key-value pairs. In zebraInfo the first key-value pair is name: "Angela". The key is name. The value is "Angela". A value can hold any data type.
In the code snippet below, we declare a similar variable, but this time have an additional key-value pair with a key of diet and a value that is an Array.
var zebraInfo = {
name: "Angela",
age: 3,
height: "5ft",
diet: ["grass", "leaves", "water"]
};To access a value in a specific object, we have to first tell the program which Object to look at. Then we use a period ., then call the key, or label, associated with the value we want to access. This syntax is referred to as dot notation.
console.log(zebraInfo.name);
//=> "Angela"
console.log(zebraInfo.age);
//=> 3
console.log(zebraInfo.weight);
//=> undefined (because there is not a weight key on the zebraInfo Object)We can change the value that is associated with a given key. We will use similar syntax to what we use when we need to access a value. We will combine dot notation with the same concept of re-assignment that we learned about when we re-assigned variables.
console.log(zebraInfo.name);
//=> "Angela"
zebraInfo.name = "Molly";
console.log(zebraInfo.name);
//=> "Molly"👨🏾💻 PAUSE here, and complete the exercises in
objects.js
Functions can also be stored as a value in a key-value pair. In these cases, we refer to the function as a method.
var zebraObject = {
name: "Angela",
age: 3,
height: "5ft",
diet: ["grass", "leaves", "water"],
feed: function() {
console.log("Give grass to the Zebra");
}
};
zebraObject.feed(); //logs "Give grass to the Zebra"👨🏾💻 PAUSE here, and complete the exercises in
methods.js
Classes can serve as object factories (we can even think of them as cookie cutters!) that allow us to create multiple objects of the same type, which we will refer to as object instances.
- Think of a car factory. It is set up to install engines, mount 4 wheels, attach doors and spray a nice of of paint. But the size of the engine, type of wheels, number of doors, and paint color may all differ from car to car.
- Think of a cookie cutter. It's a piece of metal that has a specific shape. each cookie made from it will take that shape. But, the type of dough can differ, and so can the cookie toppings.
Syntax: A class is defined using the class keyword, followed by the ClassName (using Pascal Case), then an opening and closing curly brace.
Naming: Class names should be a singular noun (thing). Because classes are the factories for future objects, they we name them after the general object they are creating. A couple of examples follow:
- If you are going to create a class for cars (eventually, specific types of cars) use the name
Car - If you are going to create a class for writing utensils (some pens, pencils, different colors etc.) use the name
WritingUtensilThe previous examples may seem pretty straightforward, but naming in programming is notoriously hard, so it's good to lay out best practices early and often!
class TransactionItem {
}A class is technically a type of a function in JavaScript. This is a big concept which you will learn about much deeper in Mod 1.
Creating the class, or blueprint, alone doesn't do much. It's kind of like having a big car factory with no electricity or employees to to run the machinery. We have to do a little work to create objects from the class.
Syntax: An object instance (almost always) needs to be stored in a variable so we can access and use it later on. Declare a variable, then use the new keyword to create an instance. After the class name, call the class (which remember, is a type of function) by using the opening and closing parenthesis.
Naming: Object instances are things, just like other variables. They are a specific instance, so should have singular names that describe the object in a little more detail than the class name. Because they are objects stored in variables, they should use camelCase; so if a single word, all lower cased. A couple examples follow:
- Class:
Car. Object Instances:civic,passat,jetta - Class:
WritingUtensil. Object Instances:pencil,mechanicalPencil,ballPointPen,gelPen
var deposit = new TransactionItem();Proerties contains data about a specific object. We also refer to this group of data as state. The information format should be one of the data types we've learned about (String, Number, Boolean, Array, Object).
The example that follows has 3 properties in state - amount, date, and type. They are declared inside of the constructor method inside of the class.
The constructor method is called when we use the
newkeyword. If a consutrcutor method is not declared inside the class, like in our skeleton above, there is actually one that we don't see. You will learn about that at a deeper level in Mod 1.
class TransactionItem {
constructor() {
this.amount = 200;
this.date = "07/24/20";
this.type = "deposit";
}
}
var deposit = new TransactionItem();
console.log(deposit);
//=>TransactionItem {amount: 200, date: "07/24/20", type: "deposit"}There is one problem with the class above - every single object instance it makes will be the exact same. It's not dynamic. To make it dynamic, we need to leverage arguments and parameters. If you need to brush up on that content, go back to Section 2 - Functions!
The example that follows has the same 3 properties, but now assigns them dynamically, based on the arguments passed into the new TransactionItem. Those 3 arguments map to the 3 parameters declared in the constructor.
class TransactionItem {
constructor(amt, transactionDate, type) {
this.amount = amt;
this.date = transactionDate;
this.type = type;
}
}
var deposit = new TransactionItem(200, "02/03/20", "deposit");
console.log(deposit);
//=>TransactionItem {amount: 200, date: "02/03/20", type: "deposit"}
var withdrawl = new TransactionItem(150, "02/04/20", "withdrawl");
console.log(withdrawl)
//=>TransactionItem {amount: 150, date: "02/04/20", type: "withdrawl"}Passing arguments to the new instance and declaring parameters in the constructor allow us to build classes and create objects that follow the same blueprint, but have potentially unique data attached to each said object instance.
Remember, the new keyword is what calls the constructor method. Note the way data flows through this. The argument of 200 maps to the paramter amt in the constructor. Then the deposit object instance has 200 as the value of the amount property. If you aren't quite sure how those are coming together yet - good! The exercise will be a good opportunity to poke and explore that more. In mod 1 you will go into a LOT of detail about the this keyword. Don't worry much about it now, but do include this. in your properties inside the constructor.
👨🏾💻 PAUSE here, and complete the exercises in
classProperties.js
Methods define the behavior of an object, actions that can be performed on that object, or calculations that use the object’s properties. Methods are generally verbs (action words or short action phrases).
Methods generally answer the question “What can this object instance do?” or “What can be done to this object instance?”
Syntax: A method should be declared below the constructor, but inside the curly braces of the class. We do not need the function keyword.
Naming: Methods are a type of functions that take action, so their names should include a verb. Examples follow:
- Class:
Car. Methods:startEngine,stopEngine,changeOil,fillGas,setCruiseControl
The example that follows has a method that logs a String to the console. It does something:
class TransactionItem {
constructor(amt, transactionDate, type) {
this.amount = amt;
this.date = transactionDate;
this.type = type;
}
sendConfirmation() {
console.log("The transaction has been completed.");
}
}To call the method, we must call it on a specific object, as follows:
var deposit = new TransactionItem(200, "02/03/20", "deposit");
deposit.sendConfirmation();
//=> "The transaction has been completed."What gets more interesting, is when we can change the state of an object. A car won't always be parked, an Instagram post won't always have the default of 0 likes, things change.
Look at the code snippet below. Notice the default state of the isRecorded property; it was assigned to false as opposed to a parameter.
class TransactionItem {
constructor(amt, transactionDate, type) {
this.amount = amt;
this.date = transactionDate;
this.type = type;
this.isRecorded = false;
}
record() {
this.isRecorded = true;
}
}
var withdrawl = new TransactionItem(150, "02/04/20", "withdrawl");
var deposit = new TransactionItem(200, "02/03/20", "deposit");
console.log(deposit);
//=> TransactionItem {amount: 200, date: "02/03/20", type: "deposit", isRecorded: false}
console.log(withdrawl);
//=> TransactionItem {amount: 150, date: "02/04/20", type: "withdrawl", isRecorded: false}
deposit.record();
console.log(deposit);
//=> TransactionItem {amount: 200, date: "02/03/20", type: "deposit", isRecorded: true}
console.log(withdrawl);
//=> TransactionItem {amount: 150, date: "02/04/20", type: "withdrawl", isRecorded: false}The record method accessed the isRecorded property and re-assigned it. Note again, that it did this for the deposit object instance, and that object instance only. The withdrawl object instance was not changed. (Think of that car factory - this is like having a painting station and painting one car red. The others have the potential to be painted red, but no one has given the instructions, so they are not red.)
👨🏾💻 PAUSE here, and complete the exercises in
classMethods.js, thentweet.js
At this point, you should have worked through all files in the exercises directory. Confirm that you have before moving on.
📝 Answer the questions in the reflection.md file in the section4 directory.
Commit your Code Challenges and push up to your GitHub repository.