sporto / planetproto

Understanding JavaScript Prototypes - Workshop

Understanding JavaScript Prototypes - Workshop

Mission

The goal of this workshop is to help you understand the object model in Javascript by learning how prototypes work.

Most guides / tutorials start explaining JavaScript objects by going directly to ‘constructor functions’, this workshop is different, it starts simple by explaining prototype chains and building from there.

Please read the exercises thoroughly and follow all conditions, they are there to help you learn!

What you will learn

• What are prototypes chains
• Message delegation in a prototype chain
• What are function constructors
• What are function prototypes and how to work with them

Installation & Update

$ npm install -g planetproto@latest

Some npm installations require use of sudo in the above command. Recommend to instead reinstall node/npm so you don't need sudo.

Usage Instructions

1. Selecting a problem to work on

Once the workshop is installed, run planetproto to print a menu where you can select a problem to work on.

$ planetproto

Problems are listed in rough order of difficulty. You are advised to complete them in order, as later problems will build on skills developed by solving previous problems.

2. Writing your solution

Once you have selected a problem, the workshop will remember which problem you are working on. Using your preferred editor, simply create a file to write your solution in. Most problems will supply some boilerplate with which to get started.

Many challenges will ask you to make a 'claim'. We have provided claim as a global function. To make a claim write claim(actual, expected), e.g.:

claim(1 === 1, true);

3. Verifying your solution

Your solution will be verified against the output of the 'official' solution. If all of the output matches, then you have successfully solved the problem!

$ planetproto verify mysolution.js

Stuck?

Feedback and criticism is welcome, please log your troubles in issues.

Development

Run node planetproto.js to run the workshop Run node planetproto.js verify 010.js to verify a submission

Thanks rvagg

This tutorial was built using rvagg's workshopper framework.

Licence

MIT

Robot designed by Ricardo Moreira from the Noun Project

planetproto's Issues

Upgrading 'verify' to allow defining run configuration

Hey,

I've borrowed your code and adapted to my workshop I am currently working on. I kinda wanted to define run environment as well so users can test their code without calling verify all the time.

Here's the suite.js file (in your project it's verify.js that defines two methods).
https://github.com/grabbou/nodeschool-eventemitter/blob/master/exercises/study_events/suite.js

I've also added runProcessor here:
https://github.com/grabbou/nodeschool-eventemitter/blob/master/utils/wrapExercise.js#L48

and changed loadUserModule so it loads proper path no matter whether it's verify or run setup.
https://github.com/grabbou/nodeschool-eventemitter/blob/master/utils/helpers.js#L11-L14

What do you think? Is it worth including or did you sort out this particular issue differently?

Proto exercice

I haven't been able to complete the Proto task

It says
// -> Make machine the prototype of robot

// -> Make robot the prototype of robby

How do I solve it?

Thanks

Duplicate text in challenge 5

in challenge 5 it states 'Set the prototype of both robot and vehicle to machine' twice

/cc @maxogden

Add task(s) about using prototypes for creating smart objects

Loved the workshop! By far the best structured one of the four i've gone through so far.

Anyways, I was hoping to learn more about how to build smart objects (objects with properties and methods). Would you consider adding a lesson or two on how to create these kind of object structures? As far as I've understood, they're what you want to use if you're looking for a true OOP structure with models et cetera. :)

/exercises/020_proto/problem.ja.md has typo

// robotoオブジェクトも作ります
↓
//robotオブジェクトも作ります

"o" isn't needed.

Use cases

The use cases for constructor functions, Object.create and proto as they relate to each other are never discussed

/cc @maxogden

Similar setup

many of the challenges are very similar to setup, e.g. the user has to do var machine = {}, var robot = {}, var vehicle = {} in almost every challenge

/cc @maxogden

Typo on 070.js

Hi there,

I think there's a typo here:

// -> Define an object called 'Robot'
// -> Define a method called 'new' in Robot
// -> When Robot.new is called is it should return a new object with Robot as its prototype
// e.g. var robby = Robot.new();
// Robot should be the prototype of robby

Regards.
Btw. thanks for this workshop, finally understood how prototypes work on javascript.

Unfortunately proto is not part of the standard interface of JavaScript, ...

"Unfortunately proto is not part of the standard interface of JavaScript, not at least until ES6. So you shouldn't use it in production code" this section could use more explaining since it is used in most of the workshopper... e.g. the complexities of knowing what ES6 is and when/how to use it may confuse people who are first learning JavaScript

/cc @maxogden

teaching using proto has confusing drawbacks

teaching using proto has confusing drawbacks. e.g. y = {foo: 'bar'}, x.proto = y;, console.log(x) results in '{}' instead of {"foo": "bar"}

cc/ @maxogden

claim is not defined when running script

⇒ planetproto run 020.js
/home/coderonin/nodeschool/planetproto/020.js:23
claim(robby.motors, 4);
^
ReferenceError: claim is not defined

I would expect if you're giving us a custom global method it should be available for the run command as well as verify

Copy paste answer

Add a 'core' part to robot by doing
robot.parts.push('core')` - having the user copy paste the answer doesn't seem ideal

/cc @maxogden

Opinionated instructions

The popularity of constructor functions comes from the fact that this was the only original way for constructing types initially. i'm unclear on what this sentence is trying to convey (what are the takeaways of this? seems kind of opinionated)

/cc @maxogden

module.exports

'dont touch module.exports' and the whole pre-generated solution file strays from how the other nodeschool works, feels a bit too much 'paint by numbers'. for the last half I ended up not having to read the terminal output at all and just read the instructions in the generated file

/cc @maxogden

Confusing filenames

for me it created 0101.js and 010.js (and 0201.js and 020.js etc). what are the 0101 and 0201 files for? seems like a bug

/cc @maxogden

official solution to final problem doesn't work

// -> Add 'core' to robby.parts, cranky.parts should still be empty
// -> Add 'fly' to robby.capabilities, after doing that cranky.capabilities must
// also have 'fly' without adding to it directly, so this property has to be
// shared

official solution:
robby.parts.push('core');
robby.capabilities.push('fly');

working solution:
robby.parts = ['core'];
robby.proto.capabilities.push('fly');

Please correct me if I am wrong here, but it looks like the array.push updates the values for both instances.

extra boilerplate project files being generated

Windows-Phone:planetproto user$ ls
010.js  020.js  0202.js 0204.js 030.js  0302.js 040.js
0101.js 0201.js 0203.js 0205.js 0301.js 0303.js 050.js

Reset Exercises

Running 'planetproto reset' from within my folder does not reset the exercises for me. has anyone had sucess?

Last challenge is confusing

I got a bit confused on the very last challenge and wasn't sure exactly what it was asking me to do. I was trying to figure out what it was trying to teach me, and felt that the problem itself would have been better if it had obvious practical value (e.g. not as abtract as robots with parts etc but something more concrete)

/cc @maxogden

the planetproto run solution.js command doesnt work

the planetproto run solution.js command doesnt work for me, it errors with 'ReferenceError: claim is not defined'

cc/ @maxogden

confused about the "____"

claim(robot.smart, ), I was first confused about the "_", and maybe thought it was a variable that I shouldn't edit

/cc @maxogden

planetproto run program.js isn't working

When the planetproto run program.js is run undefined error appears:
ReferenceError: claim is not defined

simple objects exercise

Hi,

https://github.com/sporto/planetproto/blob/master/exercises/010_simple_objects/solution/solution.js
I used the exact solution in the above link

But I am seeing an error.
Providing the error below. Can you tell me how to fix it.

C:\Users\Desktop\node-school\planet-proto\010.js:5
claim(robot.smart, true);
^
ReferenceError: claim is not defined
at Object. (C:\Users\Desktop\node-school\planet-proto\010.js:5:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:902:3