Object Creation Patterns

Question 1

2 disadvantages of factory functions

Answer 1

Each object created by the factory function has a copy of all the methods, which can be redundant and memory intensive.
(basically the benefit of prototypes)

There is no way to tell which factory function created an object, so there’s no way to be sure that you’re working with the right kind of object.
(which is the benefit of constructors)

Question 2

Problems 3 -5
https://launchschool.com/lessons/e3c64e3f/assignments/bf77a962

Answer 2

https://launchschool.com/lessons/e3c64e3f/assignments/bf77a962

Question 3

The object oriented code makes these questions easier to answer (5 things, 3 chunks)

Answer 3

How do we create that object?
Where should we add new properties and methods?

What are the properties of any given object?
What operations can I perform on that vehicle?

What are the important concepts in the program?

Question 4

Describe the constructor algorithm (5 things)

Answer 4

1 It creates an entirely new object.
2 It sets Constructor.prototype as the prototype for the new object. That is, the new object inherits from the object referenced by Constructor.prototype.
3 It sets the value of this for use inside the function to point to the new object.
4 It invokes the function. Since this refers to the new object, we use it within the function to set the object’s properties and methods.
5 Finally, once the function finishes running, new returns the new object even though we don’t explicitly return anything. If something is returned the object is returned instead. If ANOTHER object is returned, that OTHER object is returned instead

Question 5

What happens if you invoke a constructor function without the new keyword?

Answer 5

It executes the function body as normal. But without assigning this to a newly created object, “this” applies to the global object. So it puts a bunch of new properties on the global object.

Question 6

What happens with this:

let apple = () => {
this.apple = “sauce”;
};

let applesauce = new apple();

Answer 6

Type Error

Question 7

What happens with this:

let foo = {
Car: function(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
};

let car1 = new foo.Car(‘Toyota’, ‘Camry’, 2019);
car1.make;

Answer 7

//=> ‘Toyota’

Question 8

What happens with this?

let foo = {
Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
};

new foo.Car();

Answer 8

//=> Uncaught TypeError: foo.Car is not a constructor

concise syntax (also called a concise method) won’t work.
ie. Car(make, model, year) vs Car: function(make, model, year)

Question 9

new doesn’t work with these T or F

new console.log();
new Math();
new parseInt(“3”);
new Date();

Answer 9

T
//=> Uncaught TypeError: console.log is not a constructor
for the first 3,
but it works with Date();
//=> 2019-06-26T02:50:20.191Z

Question 10

What happens with

function Cat(name, breed, weight) {
this.name = name;
this.breed = breed;
this.weight = weight;

return ‘a cat’;
}

let fluffy = new Cat(‘fluffy’, ‘Persian’, 15);
fluffy.weight;

Answer 10

// 15

The rule here is that if a constructor explicitly tries to return an object, then that object is returned instead of the new object created with the use of new. In all other situations, it returns the newly created object, provided no errors occur. In particular, the constructor ignores explicit return values that are primitives.

Question 11

What happens with

function Cat(name, breed, weight) {
this.name = name;
this.breed = breed;
this.weight = weight;

return { foo: 1 };
}

let fluffy = new Cat(‘fluffy’, ‘Persian’, 15);
fluffy.weight;
fluffy.foo;

Answer 11

// undefined
// 1

The rule here is that if a constructor explicitly tries to return an object, then that object is returned instead of the new object created with the use of new. In all other situations, it returns the newly created object, provided no errors occur. In particular, the constructor ignores explicit return values that are primitives.

Question 12

How to avoid this noise:

function Car(make, model, year, color, passengers, convertible, mileage) {
this.make = make;
this.model = model;
this.year = year;
this.color = color;
this.passengers = passengers;
this.convertible = convertible;
this.mileage = mileage;
this.started = false;

this.drive = function() {
this.started = true;
};

// rest of the methods
}

Answer 12

One common technique that we can use to manage our parameters better involves passing them to our constructor with an object argument:

let civicArgs = {
make: ‘Honda’,
model: ‘Civic’,
year: 2016,
color: ‘black’,
passengers: 5,
convertible: false,
mileage: 16000
}

let civic = new Car(civicArgs);

Question 13

If we use an object as our constructor argument
How can we avoid this noise?

function Car(args) {
this.make = args.make;
this.model = args.model;
this.year = args.year;
this.color = args.color;
this.passengers = args.passengers;
this.convertible = args.convertible;
this.mileage = args.mileage;
this.started = false;

this.drive = function() {
this.started = true;
};

// rest of methods
}

Answer 13

Object.assign

function Car(args) {
Object.assign(this, args);

this.drive = function() {
this.started = true;
};

// rest of the methods
}

Question 14

Issue with the object.assign method inside the constructor function

Answer 14

However, one drawback of the Object.assign approach is that the args object may contain properties that the Car object doesn’t need. Those additional properties will, nevertheless, get added to the Car object. Those properties may just be excess baggage for the objects to carry around, but they may also cause trouble.

Question 15

Return boolean if an object was created using a specific constructor function

Answer 15

object instanceof Constructor
ex:
civic instanceof Car

Question 16

What is the implicit execution context of a method inside an object created with a contstructor?

Answer 16

The new object

Question 17

What happens with:

function Lizard() {
this.scamper = function() {
console.log(“I’m scampering!”);
};
}

let lizzy = Lizard();
lizzy.scamper(); // ?

Answer 17

Type error

undefined.undefined is what it’s tryin to do

Question 18

Create a constructor function that defines the prototype to something othe than default

Answer 18

let DogPrototype = {
bark() {
console.log(this.weight > 20 ? ‘Woof!’ : ‘Yip!’);
}
};

function Dog(name, breed, weight) {
Object.setPrototypeOf(this, DogPrototype);
this.name = name;
this.breed = breed;
this.weight = weight;
// this.bark method removed.
}

Question 19

Make a constructor function that “defines the prototype”, but use the native prototype setting functionality of constructor functions

Answer 19

function Dog(name, breed, weight) {
// deleted Object.setPrototypeOf(this, Dog.myPrototype);
this.name = name;
this.breed = breed;
this.weight = weight;
}

Dog.prototype.bark = function() {
console.log(this.weight > 20 ? ‘Woof!’ : ‘Yip!’);
};

let maxi = new Dog(‘Maxi’, ‘German Shepherd’, 32);
maxi.bark(); // ‘Woof!’

let biggie = new Dog(‘Biggie’, ‘Whippet’, 9);
biggie.bark(); // ‘Yip!’

Question 20

What’s the difference between an object prototype and a function prototype?

Answer 20

The object prototype is just a prototype for an object.
Ex.
If bar is an object, then the object from which bar inherits is the object prototype.

The function prototype is the constructor’s prototype object, exists on ConstructorObject.prototype. Any objects created by this constructor have their prototype set to the constructor’s prototype object.
Ex:
if the constructor’s name is Foo, then Foo.prototype references the constructor’s prototype object

Question 21

By default, constructor functions set the object prototype for the objects they create to Object.prototype.
T or F

Answer 21

F
By default, constructor functions set the object prototype for the objects they create to the constructor’s prototype object.

Question 22

When does the function’s prototype get used

Answer 22

All functions in JavaScript (that are not arrow functions) have a prototype property. However, JavaScript only uses it when you call that function as a constructor, that is, by using the new keyword.

Question 23

What does this do?

function ConstructorOfDog(breed) {
this.breed = breed;

this.apple = function() {
console.log(this);
};
}

let purple = new ConstructorOfDog(‘ads’);

let orange = purple.apple;

orange();

Answer 23

Logs the global object

Question 24

Return an objects constructor

Answer 24

anObject.constructor
or the objects constructor.prototype
Object.getPrototypeOf(aDog).constructor

Question 25

Is referencing a function’s .prototype.constructor always accurate?

Answer 25

no.
the constructor property can be reassigned like any property

Question 26

Only constructor functions have prototypes.Regular functions do not have prototypes.

Answer 26

F
All functions in JavaScript (that are not arrow functions) have a prototype property. However, JavaScript only uses it when you call that function as a constructor, that is, by using the new keyword.

Question 27

Rewrite this to work (and make sense):

let RECTANGLE = {
area: function() {
return this.width * this.height;
},
perimeter: function() {
return 2 * (this.width + this.height);
},
};

function Rectangle(width, height) {
this.width = width;
this.height = height;
this.area = RECTANGLE.area();
this.perimeter = RECTANGLE.perimeter();
}

let rect1 = new Rectangle(2, 3);

console.log(rect1.area);
console.log(rect1.perimeter);

Answer 27

let RECTANGLE = {
area: function() {
return this.width * this.height;
},
perimeter: function() {
return 2 * (this.width + this.height);
}
};

function Rectangle(width, height) {
this.width = width;
this.height = height;
this.area = RECTANGLE.area.call(this);
this.perimeter = RECTANGLE.perimeter.call(this);
}

let rect1 = new Rectangle(2, 3);
console.log(rect1.area); // => 6
console.log(rect1.perimeter); // => 10

Question 28

What happens with this?

function Ninja() {
this.swung = true;
}

let ninja = new Ninja();

Ninja.prototype.swingSword = function() {
return this.swung;
};

console.log(ninja.swingSword());

Answer 28

true

Question 29

What happens with this?

function Ninja() {
this.swung = true;
}

let ninja = new Ninja();

Ninja.prototype = {
swingSword: function() {
return this.swung;
},
};

console.log(ninja.swingSword());

Answer 29

Uncaught TypeError: ninja.swingSword is not a function

Despite the similarities to the code in the previous question, this code doesn’t work the same way. That’s because we’re reassigning Ninja.prototype to an entirely new object instead of mutating the original prototype object. The prototype for the ninja object doesn’t change; it’s still the original prototype defined during the constructor’s invocation. Thus, JavaScript can’t find the swingSword method in the prototype chain of ninja.

Question 30

let ninjaA;

{
const Ninja = function() {
this.swung = false;
};

ninjaA = new Ninja();
}

// create a ninjaB object here; don’t change anything else

console.log(ninjaA.constructor === ninjaB.constructor) // => true

Answer 30

let ninjaA;

{
const Ninja = function() {
this.swung = false;
};

ninjaA = new Ninja();
}

let ninjaB = new ninjaA.constructor();

console.log(ninjaA.constructor === ninjaB.constructor) // => true

Question 31

Have both the constructor, factory function, and string return in the same function

function User(first, last) {
// …
}

let name = ‘Jane Doe’;
let user1 = new User(‘John’, ‘Doe’);
let user2 = User(‘John’, ‘Doe’);

console.log(name); // => Jane Doe
console.log(user1.name); // => John Doe
console.log(user2.name); // => John Doe

Answer 31

function User(first, last){
if (!(this instanceof User)) {
return new User(first, last);
}

this.name = first + ‘ ‘ + last;
}

let name = ‘Jane Doe’;
let user1 = new User(‘John’, ‘Doe’);
let user2 = User(‘John’, ‘Doe’);

console.log(name); // => Jane Doe
console.log(user1.name); // => John Doe
console.log(user2.name); // => John Doe

Question 32

What do you call the object in relation to the constructor or factory that made it?

Answer 32

an instance of that constructor or factory

An instance is just another term for the objects created using any means of defining multiple objects of the same kind (e.g., dogs). The term object is more general, while instance is more specific.

Question 33

What are the properties called on an instance

Answer 33

instance properties

Question 34

What do we call the methods an instance may use (even if on a prototype)

Answer 34

instance methods
also instance properties but ‘methods’ to distinguish

Question 35

What do we call properties or methods on the constructor?

Answer 35

Static properties
Status methods

Question 36

What happens with this:
> new Array(3)

Answer 36

Creates an array of length 3
[ <3 empty items> ]

Question 37

> new Array(3.1415)

Answer 37

=> RangeError: Invalid array length

Question 38

> new Array(-5)

Answer 38

=> RangeError: Invalid array length

Question 39

Make an array like this using Array as a constructor
an array with 3 elements that are stars

Answer 39

(new Array(3)).fill(‘*’)
Are the parenthesis necessary?

No. But maybe looks more clear.

Question 40

> Array(1, 2, 3)
is the same as
new Array(1, 2, 3)

T or F

Answer 40

T
But always use new

Question 41

True or false:

> let numbers = [1, 2, 3]
Object.getPrototypeOf(numbers) === Array.prototype
true

Answer 41

T

Question 42

What happens with:
> Array.from({0: ‘a’, 1: ‘b’, 2: ‘c’, length: 3})

Answer 42

[‘a’, ‘b’, ‘c’]

Question 43

> let str1 = ‘abc’
typeof str1

> let str2 = new String(‘xyz’)
typeof str2

Answer 43

‘string’

‘object’

> ‘abc’ === ‘abc’
true

> new String(‘abc’) === new String(‘abc’)
false

Question 44

> let str = String(‘abc’)
typeof str

Answer 44

‘string’
String(‘abc’) and new String(‘abc’) are not the same!
(same with Number and Boolean)

Question 45

Add a method to a built in constructor object (like Array, String, or Object)

Answer 45

Array.prototype.applesauce = function() {}

But avoid doing it

Question 46

Call an Array prototype method on a string

Answer 46

let string = ‘EEE’;
Array.prototype.every.call(string, char => char === ‘E’); // => true

or

[].every.call(string, char => char === ‘E’); // => true

Question 47

> new String(‘abc’) === new String(‘abc’)
String(‘abc’) === new String(‘abc’)

Answer 47

false
false

Question 49

Have a constructor funtion create an object, but the body basically executes another contructor’s body

Answer 49

let Square = function(size) {
Rectangle.call(this, size, size);
}

Question 50

Make a constructor function prototype, inherit from another constructor function prototype

Answer 50

Square.prototype = Object.create(Rectangle.prototype);

Question 51

Why can’t you just go ThisConstructor.prototype = ThatConstructor.prototype
When you want some prototypal inheritance?

Answer 51

You can, but then ThatObject constructor doesn’t really have it’s own prototype.

Question 52

Do all functions have a .prototype property?

Answer 52

Yes

Question 53

What’s the difference between static and instance methods

Answer 53

Instance methods rely on each object’s specific data, while static methods must NOT rely on data from a specific object.

All objects of a particular type might have behavior that is not dependent at all on member variables; these methods are best made static. By being static, no instance of the class is required to run the method.