OBJECT-ORIENTED JAVASCRIPT

PSEUDOCLASSICAL

*Ok - maybe it does just in ES6

JavaScript is an object-oriented programming language, but it does not have a "formal" way of creating class constructors* like most languages, hence the name: pseudoclasses.

OBJECT-ORIENTED JAVASCRIPT

RECIPE  |  Defining a (pseudo)Class

Methods  (for all instances)

OBJECT-ORIENTED JAVASCRIPT

COOKING IT  |  Using a (pseudo)Class

function Building(floors) {
  this.what = "building";
  this.floors = floors;

}

Building.prototype.countFloors = 
function() {
  console.log('I have',  
    this.floors, 'floors');
};

var yourHouse = new Building(2);
var theOffice = new Building(12);
yourHouse.countFloors();
theOffice.countFloors();

The results of the shared method depend on the unique instance values which are created at call-time inside each function's scope.

OBJECT-ORIENTED JAVASCRIPT

THINGS TO NOTE

• There are several methods in creating classes in JavaScript.
• Pseudoclassical is the industry standard and is expected knowledge in an interview.
• You may see elements of this style in your favorite JS framework.

OBJECT-ORIENTED JAVASCRIPT

MORE THINGS TO NOTE

• Subclassing and inheritance are not covered in this course.
• For more in-depth information on classes and subclasses, I recommend this blog.

OBJECT-ORIENTED JAVASCRIPT

EXERCISE TIME!

Create a unique constructor that makes a building of your choice using the pseudoclassical pattern.

Don't forget to add methods and practice creating instances.

OBJECT-ORIENTED JAVASCRIPT

INTRODUCTION TO

DATA STRUCTURES

STACKS & QUEUES

OBJECT-ORIENTED JAVASCRIPT

INGREDIENTS TO LEARN DS

4. Understand Data Structure

    - What is the time complexity? (coming soon)

    - How can you optimize?

OBJECT-ORIENTED JAVASCRIPT

CONCEPT : STACKS

"LIFO"

OBJECT-ORIENTED JAVASCRIPT

DIAGRAM : STACKS

OBJECT-ORIENTED JAVASCRIPT

INTERFACE : STACKS

1. Constructor Function

   • ​​Storage

2. Methods​

   • ​​push(value) //adds value to the front, returns size of stack

   • pop() //removes value from front, returns value

   • size() //returns size of stacks as an integer

OBJECT-ORIENTED JAVASCRIPT

INTERFACE : STACKS

1. Constructor Function

   • ​​Storage

2. Methods​

   • ​​push(value)

   • pop()

   • size()

var Stack = function(){
    this.storage = "";
};

Stack.prototype.push = function(val){

};

Stack.prototype.pop = function(){

};

Stack.prototype.size = function(){

};

var myWeeklyMenu = new Stack();

myWeeklyMenu.push("RedBeans");

OBJECT-ORIENTED JAVASCRIPT

PSEUDOCODE: STACKS

OBJECT-ORIENTED JAVASCRIPT

CONCEPT: QUEUES

"FIFO"

OBJECT-ORIENTED JAVASCRIPT

DIAGRAM: QUEUES

OBJECT-ORIENTED JAVASCRIPT

INTERFACE : QUEUES

1. Constructor Function

   • ​​Storage

2. Methods​

   • ​​enqueue(value) //adds value To the back, returns size

   • dequeue() //removes value from front, returns value

   • size() //returns size of queue as an integer

OBJECT-ORIENTED JAVASCRIPT

PSEUDOCODE: QUEUES

OBJECT-ORIENTED JAVASCRIPT

EXERCISE TIME!

OBJECT-ORIENTED JAVASCRIPT

Pancake Stacks

Browser History/Undo Button

JS Call stack

Stack Overflow

Email Inbox

Queues out the Door

JavaScript's Event Queue

Message Queueing (Buffer)

Ticket Sales (ticketmaster)

Popup Windows

IRL USES

OBJECT-ORIENTED JAVASCRIPT

RECURSION

OBJECT-ORIENTED JAVASCRIPT

WHY RECURSION?

OBJECT-ORIENTED JAVASCRIPT

WHY RECURSION?

OBJECT-ORIENTED JAVASCRIPT

WTHeck is this doing?

OBJECT-ORIENTED JAVASCRIPT

RECIPE

var callMyself = function() {

  if() {
    // base case
    return;
  } else {
    // recursive case
    callMyself();
  }
    
  return;
};

1. Identify base case(s).

2. Identify recursive case(s).

3. Return where appropriate.

4. Write procedures for each case that bring you closer to the base case(s).

OBJECT-ORIENTED JAVASCRIPT

LOOPING

var loopNTimes = function(n) {
  console.log('n equals', n)  
  if (n <= 1) {
      return 'complete';
  }
  return loopNTimes(n-1);
};

loopNTimes(3);

OBJECT-ORIENTED JAVASCRIPT

FACTORIAL WITH LOOP

If we call computeFactorial(5), then the loop will run:

What pattern do you notice?

OBJECT-ORIENTED JAVASCRIPT

WITH RECURSION

If we call computeFactorial(5), then the loop will run:

OBJECT-ORIENTED JAVASCRIPT

LOOP TO RECURSION

function logNumbers(start, end) {
  for(var i = start; i <= end; i++) {
    console.log(i);
  }
}

function logNumbersRecursively(start, end) {
  function recurse(i) {
    console.log(i);

    if(i < end) {
      recurse(i + 1);
    }
  }

  recurse(start);
}

OBJECT-ORIENTED JAVASCRIPT

RECURSIONS vs LOOPS

Recursion can always be implemented as a loop, but often, especially with certain DS it is much easier to use recursion.

Loops are more performant than recursion in JavaScript because every function call is added to the stack, state must be preserved, etc.

In other languages, you can write your recursive functions in a way that the engine would recognize and optimize it by refactoring into a loop. The current version JavaScript does not implement TCO, but ES6 plans to implement this feature! Read more here and here.

Tail-Call

Optimization

OBJECT-ORIENTED JAVASCRIPT

COMMON PATTERNS

FOR RECURSIONS

• Wrapper Functions

• Passing Memos / Accumulators

OBJECT-ORIENTED JAVASCRIPT

WRAPPER FUNCTIONS

function runRecursiveLoop(start, end) {
  function recurse(i) {
    console.log(i);
    if(i < end) {
      recurse(i + 1);
    }
  }

  recurse(start);
}

function runLoopAsMyself(i, end) {
  console.log(i);
  if(i < end) {
    runLoopAsMyself(i + 1, end);
  }
}

OBJECT-ORIENTED JAVASCRIPT

MEMO, ACCUMILATORS

function joinElements(array, joinString) {

  function recurse(index, resultSoFar) {
    resultSoFar += array[index];

    if(index === array.length - 1) {
      return resultSoFar;
    } else {
      return recurse(index + 1, resultSoFar + joinString);
    }
  }

  return iterate(0, '');
}

OBJECT-ORIENTED JAVASCRIPT

EXERCISE TIME!

(but first, a quick overview)