Object Oriented Programming Module #19 Flashcards
What is this syntax:
const car = {
}
A JavaScript Object. This particular syntax is aka object literal syntax. It starts with a variable, then the = assignment operator, follow by open and closing curly braces.
Define a JavaScript object.
Anything that is not a primitive. Functions, arrays, or object literals.
There are 3 ways to create an object in JS. We already know the “object literal” syntax, what’s the second way to create an object?
The Object.create( ) method creates a new object, using an existing object as the prototype of the newly created object.
const car = Object.create( ) Declare a variable then assign = name.create( )
What is the 3rd way to create and “initialize” an object in JavaScript?
By using a constructor.
The constructor method is a special method of a class for creating and initializing an object of that class.
const myCar = new Car("Ford", "Fiesta")
myCar.brand //'Ford'
myCar.model //'Fiesta'
Example from MDN:
class Polygon {
constructor( ) {
this.name = 'Polygon';
}
}
const poly1 = new Polygon( );
console.log(poly1.name);
// expected output: "Polygon"
What’s one way to access an object’s property?
Dot notation. car.color //’blue’
What is returned when accessing a property that doesn’t exist?
//undefined
What’s the shorthand for deleting a property from an object?
delete card.model
Aside from dot notation, what’s another way to delete a property from an object?
Brackets. For example:
delete car [ ‘color’ ]
How can you invoke a function that has been assigned to an object?
By using dot notation syntax exactly like a method. For example:
const car = {
brand: "Ford",
model: "Fiesta",
start: function () {
console.log("Started")
},
}
car.start()
Inside a method defined using a function( ) { } syntax we have access to the object instance by referencing this.
How are arrow functions bound to objects?
They aren’t you can attach an arrow function to a property in an object but you won’t be able to access it.
How can you add a parameter to a method?
The same way in which you’d add a param to to a function:
car.goTo(“Rome”)
How is a class written?
Using the “class” keyword, an identifier starting with a capital letter “Name”, a method, a parameter and then the body. Example:
class Person {
hello( ) {
return 'Hello, I am Flavio'
}
}
What is the purpose of a class in JavaScript?
They are a way to define a common pattern for multiple objects.
How do you write a method inside of a class?
Almost exactly like a function, except without the function key word.
Example:
class Person {
hello( ) {
return 'Hello, I am Flavio'
}
}
We can also invoke methods on an instance of the class:
class Person {
hello( ) {
return 'Hello, I am Flavio'
}
}
const flavio = new Person( )
flavio.hello( )
How can you initialize class properties when we create a new object instance.
By using the constructor method, for example:
class Person {
constructor(name) {
this.name = name
}
hello( ) {
return ‘Hello, I am ‘ + this.name + ‘.’
}
}
What is a constructor?
It is a function that returns an object.
How are classes and instances different?
Instances are assigned inside of a class.
How are classes extended by other classes?
We can define a new class Programmer that extends Person:
class Programmer extends Person {
}
How can you reference a parent class from inside of a child class?
By calling the super( ) keyword.
From MDN: The super keyword is used to access and call functions on an object’s parent.
Check it out in action:
class Rectangle {
constructor(height, width) {
this.name = 'Rectangle';
this.height = height;
this.width = width;
}
sayName() {
console.log('Hi, I am a ', this.name + '.');
}
get area() {
return this.height * this.width;
}
set area(value) {
this._area = value;
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length);
this.name = 'Square';
}
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
// Here, it calls the parent class's constructor with lengths
// provided for the Rectangle's width and height
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
How can you pull values out of an object and assign them to new variables?
By targeting the property names out side of the object, declaring a new variable and using the assignment operator.
Example:
const person = {
firstName: 'Tom',
lastName: 'Cruise',
actor: true,
age: 54, //made up
}
const { firstName, age } = person
Now we have 2 new variables, firstName and age, that contain the desired values:
console. log(firstName) // ‘Tom’
console. log(age) // 54
Why is copying object in JavaScript problematic?
Because it will only copy primitive types. However, it only copies references not the values of those references.
What is the spread operator and what function does it perform?
The spread operator is 3 dots … and it provides a very convenient way to perform a shallow clone equivalent to what the Object.assign( ) function does.
Basic example from MDN:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // expected output: 6
What is the purpose of Object.assign( ) ?
Object.assign( ) performs a shallow copy of an object, not a deep clone.
const obj = { a: 1 };
const copy = Object.assign( { }, obj);
console.log(copy); // { a: 1 }
What is a shallow copy?
Being a shallow copy, values are cloned, and objects references are copied (not the objects themselves), so if you edit an object property in the original object, that’s modified also in the copied object, since the referenced inner object is the same:
const original = {
name: "Fiesta",
car: {
color: "blue",
},
}
const copied = Object.assign({ }, original)
original. name = “Focus”
original. car.color = “yellow”
copied. name //Fiesta
copied. car.color //yellow
How can we use the spread operator to merge objects?
Short answer: assign the objects to a new variable inside of a bracket using the ellipse separated by a comma.
The spread operator is the perfect way to merge two simple objects into one:
const object1 = {
name: 'Flavio'
}
const object2 = {
age: 35
}
const object3 = {…object1, …object2 }
Be aware that if both objects have a property with the same name, then the second object property overwrites the first.
