There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.

Prototype

In JavaScript, a prototype is a property that every function has which references an object. Its major use is to allow methods to be created and attached to the prototype so that all objects that a function creates automatically has access to those methods. Basically, instead of having to create separate methods in their own object and have other objects call them, methods can inherently be included in any instance of an object created by a function – this saves space in computer memory and lines of code.

So, to reiterate: a prototype is a property that every function in JavaScript has. When a function is created, it automatically gets a prototype. It allows methods to be shared across all instances of a given function – so any method created and attached to a given function’s prototype will be available to any object that the function creates.

What does this look like? The general idea is something like this:

function gameCharacter (name) {
  let gameCharacter = Object.create(gameCharacter.prototype)
  gameCharacter.name = name

  return gameCharacter
}

gameCharacter.prototype.run = function (distance, speed) {
  console.log(`${this.name} is running.`)
}

gameCharacter.prototype.jump = function (height, jumpMultiplier) {
  console.log(`${this.name} jumps.`)
}

gameCharacter.prototype.duck = function (duration) {
  console.log(`${this.name} ducks.`)
}

const mario = gameCharacter('mario');
const luigi = gameCharacter('luigi');
const sonic = gameCharacter('sonic');

mario.run(whileLeftOrRightButtonPressed, 5);
luigi.play(whileJumpButtonPressed, 1.5);
sonic.duck(whileDownButtonPressed);
sonic.run(whileLeftOrRightButtonPressed, 10);

So, whether we create Mario, Luigi or Sonic, they all gain the abilities to run, jump and duck. Any “gameCharacter” we create will have those abilities, so we can add Princess Peach or Amy the Hedgehog or even Chun Li and they’d also have those abilities.

This video from Tyler McGinnis beautifully explains prototypes by showing how functions and objects are created and then evolving it into prototypes:

https://www.youtube.com/watch?time_continue=15&v=XskMWBXNbp0

As per the Lambda School text:

Creating functions are expensive (in a computer memory way) and each time we create a new class object with methods we are recreating those methods in memory. You can imagine if you are creating thousands of class objects from a class with dozens of methods on it, the memory will add up quickly (20,000-40,000 methods). Classes have a unique way of setting a method once and giving every object of that class access to those methods. This is called the prototype. Each class has a prototype property, which we can then set methods on:

function User(name, github) {
  this.name = name;
  this.github = github;
}

User.prototype.introduction = function(){
  return 'My name is ' + this.name + ', my github handle is ' + this.github + '.';
}

let dan = new User('Dan', 'tetondan');
let riley = new User('Riley', 'rileyriley');
console.log(dan.introduction()); // My name is Dan, my github handle is tetondan.
console.log(riley.introduction()); // My name is Riley, my github handle is rileyriley.

Prototype methods DO have access to the this keyword, and just as before, it will always point to the object (left of the dot) that is calling it.

• Medium: Prototypes in JavaScript
• tylermcginnis.com: A Beginner’s Guide to JavaScript’s Prototype

• Lambda School Full-Stack/Web Developer Pre-course Index