Objects and Functions in Javascript

There is a saying that everything is an object in JavaScript...

Primitives

• Numbers
• Strings
• Booleans
• Undefined
• Null

Objects

• Arrays
• Functions
• Objects
• Dates
• and more...

Almost everything is an object in JavaScript and this is what differentiates JavaScript.

Object-Oritented Programming

Object Oriented Programming is a programming paradigm which heavily relies on usage of objects.

• Objects interact with one another with methods and properties
• Used to store data and structure applications into modules in order keep code clean

In JavaScript, classes might be reffered to as constructor or prototype

Inheritance

Inheritance is when one object is based on another object and has access to other object's properties and methods.

Prototypes

Prototype property of an object is where we put methods and properties that we want other objects to inherit.

Inheritance is possible in JavaScript thanks to the existance of Prototypes. **Every JavaScript object has a Prototype property. **

All objects in JavaScript is an instance of Object constructor / prototype.

Instance -> Occurance of an object.

Think of prototype as a blueprint or a class

Prototype Chain

Chain of prototypes. When an object doesn't have a method or a property, it will look at the parent prototype. If the Object prototype doesn't have it, it simply returns null.

Implementation

Function Constructor

var Person = function(name, yearOfBirth, job) {
  this.name = name;
  this.yearOfBirth = yearOfBirth;
  this.job = job;
};

// Instatiation
var john = new Person('John',1990,'teacher');

The 'new' operator points the 'this' variable to the empty object created when the new operator was called instead of the global object. This is why we can have multiple instances of the same Prototype.

Prototype property

Person.prototype.calculateAge = function(){  
  console.log(2019-this.yearOfBirth);
}

john.calculateAge() // Outputs '29'

'calculateAge' method is attached to constructor function's prototype property.

A property can also be attached to prototype.

john.hasOwnProperty('job'); // true
john.hasOwnProperty('calculateAge'); //false
john instanceof Person; // true

^ Checking if an instance has a specified property

Property for objects

Arrays

Arrays have array prototype

var x = [1,2,3]; // x has property of length
x.length; // 3

Another way to create an object : Object.create

This is another way to create an object. Also inherits from a prototype

1. Create an object that will act as a prototype

2. Create an object based on the prototype object

var personProto = {
  calculateAge: function() {
    console.log(2019 - this.yearOfBirth);
  }
};

// Pass in the object that will act as the prototype.

// Method 1
var john = Object.create(personProto);
john.name = 'John';
john.yearOfBirth = 1990;
john.job = 'teacher';

// Method 2
var jane = Object.create(personProto, {
  name: { value: "Jane" },
  yearOfBirth: { value: 1969 },
  job: { value: "designer" }
});

Object.create inherits from the prototype passed in as an argument whereas the function constructor inherits from the constructor's prototype property.

Object.create allows more complex inheritance.

Function constructor is more popular