Object Oriented Programming Module #19

Question 1

What is this syntax: 
const car = { 

}

Answer 1

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.

Question 2

Define a JavaScript object.

Answer 2

Anything that is not a primitive. Functions, arrays, or object literals.

Question 3

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?

Answer 3

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( )

Question 4

What is the 3rd way to create and “initialize” an object in JavaScript?

Answer 4

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"

Question 5

What’s one way to access an object’s property?

Answer 5

Dot notation. car.color //’blue’

Question 6

What is returned when accessing a property that doesn’t exist?

Answer 6

//undefined

Question 7

What’s the shorthand for deleting a property from an object?

Answer 7

delete card.model

Question 8

Aside from dot notation, what’s another way to delete a property from an object?

Answer 8

Brackets. For example:

delete car [ ‘color’ ]

Question 9

How can you invoke a function that has been assigned to an object?

Answer 9

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.

Question 10

How are arrow functions bound to objects?

Answer 10

They aren’t you can attach an arrow function to a property in an object but you won’t be able to access it.

Question 11

How can you add a parameter to a method?

Answer 11

The same way in which you’d add a param to to a function:

car.goTo(“Rome”)

Question 12

How is a class written?

Answer 12

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'
  }
}

Question 13

What is the purpose of a class in JavaScript?

Answer 13

They are a way to define a common pattern for multiple objects.

Question 14

How do you write a method inside of a class?

Answer 14

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( )

Question 15

How can you initialize class properties when we create a new object instance.

Answer 15

By using the constructor method, for example:

class Person {
  constructor(name) {
    this.name = name
  }

hello( ) {
return ‘Hello, I am ‘ + this.name + ‘.’
}
}

Question 16

What is a constructor?

Answer 16

It is a function that returns an object.

Question 17

How are classes and instances different?

Answer 17

Instances are assigned inside of a class.

Question 18

How are classes extended by other classes?

Answer 18

We can define a new class Programmer that extends Person:

class Programmer extends Person {

}

Question 19

How can you reference a parent class from inside of a child class?

Answer 19

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.

Question 20

How can you pull values out of an object and assign them to new variables?

Answer 20

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

Question 21

Why is copying object in JavaScript problematic?

Answer 21

Because it will only copy primitive types. However, it only copies references not the values of those references.

Question 22

What is the spread operator and what function does it perform?

Answer 22

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

Question 23

What is the purpose of Object.assign( ) ?

Answer 23

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 }

Question 24

What is a shallow copy?

Answer 24

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

Question 25

How can we use the spread operator to merge objects?

Answer 25

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.