Embedded Files
Welcome to the seventh & eighth lab of Team Edge!
Welcome to the seventh & eighth lab of Team Edge!
This topic will span two days. We will cover classes and objects in JavaScript.
Open LabSevenChallenges.js in your text editor and solve the challenges listed. Refer to the reference section for help.
Challenge 1 :
Challenge 1 :
What's Your Object?
What's Your Object?
New Skills :
New Skills :
Defining an object, including various data types (string, array, boolean, number)
Accessing values from keys using dot notation
Adding new properties
Adding and calling a method of the object
Using methods to change values using the ‘this’ keyword
Challenge 2 :
Challenge 2 :
Superhero Class
Superhero Class
New Skills :
New Skills :
Defining a class
Define a constructor function for the class
Instantiate objects of a class using the new keyword
Update values of an object using dot notation
Reference
Reference
Object Oriented Programming (OOP)
Object Oriented Programming (OOP)
In computer science, object oriented programming is a way to represent, or model, real world items within our programs. Related data and behaviors can be grouped together in objects to make it easy to identify and access. Just like in the real world, there are multiple versions of any item. This can be represented in code through the use of classes.
Objects
Objects
JavaScript objects are containers that hold a collection of properties and methods in the form of key:value pairs. They help us represent groups of related data that we associate to an item.
Let's say we wanted to create an object to represent our cat:
Let's say we wanted to create an object to represent our cat:
Our cat has the following attributes and behaviors:
Hover below to see our object:
Note that each key:value pair is separated with a comma (,)
Key : Value Pairs
Key : Value Pairs
Properties and their values are represented in objects as key:value pairs. The key is the name of the property and the value is the property or method of the object.
let person = {
firstName: 'Jane',
lastName: 'Doe',
intro(){
console.log(`I'm ${this.firstName}`);
}
}
In this example, the key is firstName and the value is 'Jane'.
this Keyword
this Keyword
The this keyword is used to reference the object that it belongs to.
let person = {
firstName: 'Jane',
lastName: 'Doe',
intro(){
console.log(`I'm ${this.firstName}`);
}
}
In this example, the intro function needs to access the firstName property. However, it is not in the same scope and therefore the value needs to be referenced using the this keyword which refers the object.
Without the this keyword in the example, the following error would appear:
firstName is not defined
Accessing Values With Dot Notation
Accessing Values With Dot Notation
Properties and methods of objects can be accessed using the dot operator. The syntax is:
object.property
let fullName = person.firstName + person.lastName;
person.intro();
You might have realized it by now, but you have been using the dot operator since the first lab! (console.log();)
Adding/Modifying Properties
Adding/Modifying Properties
Properties can be added to/modified in objects after they have been initialized. The syntax is similar to accessing values using dot notation, except this time, there is also a value assigned to the specified property.
console.log(`Name: ${person.firstName});
//Prints 'Name: Jane'
person.firstName = 'Janie'
console.log(`Name: ${person.firstName});
//This will now print 'Name: Janie'
person.favFood = 'sushi';
If a property does not exist in the object currently, it will add a new key:value pair with the defined property and value being assigned.
Classes
Classes
Classes are blueprints or templates that can be used to create object instances. The objects created will contain all of the data and functionality that is defined in the class.
Defining a Class
Defining a Class
Class Keyword
To indicate that a class is being created, the class keyword is used before the class name.
Constructor:
A constructor is a special method within classes that creates and initialize objects of that class.
The constructor method is called each time the class object is initialized. It can take in arguments to initialize the object with; however, it can also take no arguments.
The arguments are assigned to the corresponding properties indicated with the this keyword.
class Cat {
constructor(name, breed, age){
this.name = name;
this.breed = breed;
this.age = age;
this.isClean = true;
this.isHappy = true;
this.isSleepy = true;
}
meow() {
console.log("meowww!");
};
play() {
this.isSleepy = false;
}
}
Creating Objects Using Classes
Creating Objects Using Classes
Objects are created and initialized using the new keyword and calling the class's constructor method.
If the constructor does not have any parameters, then no arguments need to be passed in.
What would creating a Cat object look like?
Make a prediction then hover to the right to check your answer!
Additional Resources
Additional Resources
Report abuse