JavaScript

Question 1

Describe prototypal inheritance.

Answer 1

JavaScripts version of inheritance is based on prototypes rather than classes. What do you mean?
–> In JS, objects inherit from other objects, meaning every object is associated with some other object, known as its prototype.

Every function comes with a default prototype property, which contains an object that starts out more or less empty. A prototype object typically stores methods defined in the constructor.

Prototype?

• Yes. When you call any property of any object, the interpreter first looks at the object itself.
• If property is not there, the interpreter looks in the object’s prototype. (The object’s __proto__ property points at the object’s prototype.)

(i.e. 
function Animal () {};
function Dog () {};

Animal.prototype.toString() {};

const myAnimal = new Animal(); // any instance of Animal or Dog is automatically assigned to its prototype
const myDog = new Dog();

myAnimal’s __proto__ automatically references the prototype object, Animal.prototype
myDog’s __proto__ automatically references the prototype object, Dog.prototype
)

• If property is not in the object’s prototype, the interpreter will continue up the prototypal chain by looking at the prototype’s __proto__ property.

For more info:
pg 83 in Effective JavaScript
https://github.com/appacademy/curriculum/blob/master/javascript/readings/prototypal-inheritance.md
https://github.com/appacademy/curriculum/blob/master/javascript/readings/new-prototypal-inheritance.md

Question 2

How does ES2015 simplify JS inheritance? And what is the purpose of adding super( ) in constructor?

Answer 2

• class Dog extends Animal is the syntactic sugar equivalent to Object.create.
• A child class can access a parent class’s overwritten function by using super( ). How?
• In child class’s constructor function, call super( ) passing necessary arguments equivalent to parent class’s constructor function.

Example:
class Bicycle {
  constructor(color, model) {
    this.color = color;
    this.model = model;
  }

action() {
return “rolls along”;
}
}

class RaceBicycle extends Bicycle {
  constructor(color, model, gears) {
    super(color, model);
    this.gears = gears;
  }

  action() {
    const oldAction = super.action();
    return `${oldAction} at a blistering pace!`
  }
}

For more info:
https://github.com/appacademy/curriculum/blob/master/javascript/readings/prototypal-inheritance.md

Question 3

What are some ways to change an object’s prototype in JS?

Answer 3

Lets say you have a Dog and Animal class, and you want Dog to reference to (or inherit from) Animal.

0. Directly assign dog’s prototype to equal to animal’s prototype.
   Dog.prototype = Animal.prototype.

• Terrible practice. Any functions added to Dog class will also be added to Animal class. We don’t want to just set the child’s prototype to the parent’s prototype. If we do this, any functions we write in the child class will also be available to the parent.

1. Object.prototype.__proto__
   i.e.
   Dog.prototype.__proto__ = Animal.prototype
   Dog.prototype.constructor = Dog
   Dog now has access to methods defined on Animal’s prototype, but not vice versa..

child. prototype.__proto__ = parent.prototype;
child. prototype.constructor = child;

• Bad practice. Do not want to mutate/alter the prototype of an object. Leads to very poor performance because it affects the way JS searches and accesses properties in the prototypal chain. Do not use __proto__ to manage inheritance.

2. Object.setPrototypeOf(object whose prototype we want to link, prototype we want to link to)
   i.e.
   Object.setPrototypeOf(Dog.prototype, Animal.prototype)
   Dog.prototype.constructor = Dog

Object.setPrototypeOf(child.prototype, parent.prototype);
child.prototype.constructor = child;

• Bad practice for same reasons as option #1. It alters/mutates the object’s prototype.

3. Create an entirely new prototype object. Object.create() returns an entirely new object where its __proto__ points to whatever object is passed to .create( ). So in this case, Dog.prototype’s __proto__ points to Animal’s prototype.
   i.e.
   Dog.prototype = Object.create(Animal.prototype)
   Dog.prototype.constructor = Dog
   child.prototype = Object.create(parent.prototype);
   child.prototype.constructor = child;

4. 
`class Dog extends Animal` is the syntactic sugar equivalent to Object.create in ES2015. 

5. Old Surrogate trick to set up inheritance chain without directly changing its __proto__ property.
   i.e.
   function Surrogate() {};
   Surrogate.prototype = parent.prototype;
   child.prototype = new Surrogate();
   child.prototype.constructor = child; // otherwise child.prototype.constructor === parent

For more info:
pg 83 in Effective JavaScript
https://github.com/appacademy/curriculum/blob/master/javascript/readings/prototypal-inheritance.md
https://github.com/appacademy/curriculum/blob/master/javascript/readings/new-prototypal-inheritance.md

Question 4

Describe classes in JS.

Answer 4

Classes in JS is a design pattern consisting of a constructor function (User) and a prototype object used to share methods between instances of the class (User.prototype)

For more info:
pg 83 in Effective JavaScript

Question 5

What are higher order functions and first class functions in JS?

Answer 5

A higher order function is a function that takes a function as an argument. This is one of the characteristics that make JS a great language for functional programming.

Functions in JS are treated as first-class citizens, meaning functions are treated as objects. Functions are of type Object, and can be assigned to a variable and passed and returned just like any other variable.

Question 6

Difference between var, const, an let? When should you use one over the others?

Answer 6

var - function scoped
let - block scoped
const - block scoped, but const variable cannot be reassigned?