mrdavidlaing / javascript-koans

Koans to learn Javascript

javascript-koans

Based on Edgecase's fantastic Ruby koans, the goal of the Javascript koans is to teach you Javascript programming through testing.

When you first run the koans, you'll be presented with a runtime error and a stack trace indicating where the error occurred. Your goal is to make the error go away. As you fix each error, you should learn something about the Javascript language and functional programming in general.

Your journey towards Javascript enlightenment starts in the koans/AboutExpects.js file. These koans will be very simple, so don't overthink them! As you progress through more koans, more and more Javascript syntax will be introduced which will allow you to solve more complicated problems and use more advanced techniques.

Running the Koans

Simply navigate to the Javascript Koans folder using a file browser, and double click on KoansRunnner.html.

Any browser will do, but for the best results Firefox or Chrome is recommended. More stack trace information shows up for javascript on these browsers.

The first error will be in koans/AboutExpects.js. Fix the first test and refresh the browser. Rinse and repeat until all tests turn green.

The test runner used is Jasmine with a customized report viewer.

Changelog

• v3 - Nov 2010 - Moved out of branch of functional-koans project, into own top level project
• v2 - Sept 2010 - Second version based on jasmine (Thanks Greg Malcolm!)
• v1 - July 2010 - First version based on jsTestDriver

Acknowledgements

• Dick Wall (the Java posse) - for bringing the idea of koans to my attention
• Edgecase - for the great Ruby Koans
• Douglas Crockford - for Javascript; the good bits

MIT Licensed

javascript-koans's Issues

function body as a string test

var multiply = function (a, b) {
//An internal comment
return a * b;
};
var stupid = "function (a, b) {
return a * b;
}"
expect(multiply.toString()).toBe(stupid);

why doesn't that work? if i remove the '' lien terminators it works but Firefox throws an unterminated string literal error.

Having issues with three of the files- "expects" "higher order functions" and "inheritance" are not showing up when I refresh the browser. Those subjects have disappeared!

In summary. there were 8 files and subjects. when I refresh the browser, it only shows 5 files and subjects. "expects" "higher order functions" and "inheritance" are not showing up when I refresh the browser. Those subjects have disappeared!

Here's what it looks like:

AboutFunctions.js line 112 expects incorrect string

The toString() method does not return linebreaks nor the tab'ed whitespace ('function (a, b) { return a * b; }') yet the code expects to receive: 'function (a, b) {\n return a * b;\n}'

underscore chain is not available in AboutApplyingWhatWeHaveLearnt.js

console.log(_.chain)
yields undefined in my instance. Other underscore methods are available.

Disappearing Koan — AboutApplyingWhatWeHaveLearnt

When refreshing the browser to test the second koan, the entire section for AboutApplyingWhatWeHaveLearnt disappears. Commenting the attempted solution and refreshing the browser brings back the section with the first koan passed and the second koan in red like before.

aboutObjects line 68 has a missing property

it("should not have the detonator however", function () {
hasDetonator = "theDetonator" in meglomaniac;
expect(hasDetonator).toBe(FILL_ME_IN);
});

"theDetonator" property is missing in the object:

var meglomaniac;
beforeEach(function () {
meglomaniac = {
mastermind: "The Monarch",
henchwoman: "Dr Girlfriend",
theBomb: true
};
});

"…internal variables override outer variables…" but apparently don't

The third assert in /koans/AboutFunctions.js asserts message to be "Outer". Either the test is named incorrectly, some other syntax is wrong, or I have a buggy version of V8.

404 reference to http://pivotal.github.io/jasmine/

In the github.io / readme page, There is a reference to URL http://pivotal.github.io/jasmine/
in "The test runner used is Jasmine with a customized report viewer."

Should that link be http://jasmine.github.io/?

Obfuscate variable and function names to aid true understanding

This is a great project.

Just thinking, many of these koans can be solved by simply reading the english words, rather than actually understanding what's going on.

eg, you're touching on a powerful concept here

it("should use lexical scoping to synthesise functions", function () {

  function makeIncreaseByFunction(increaseByAmount)
  {
    var increaseByFunction = function increaseBy(numberToIncrease)
    {
      return numberToIncrease + increaseByAmount;
    };
    return increaseByFunction;
  }

  var increaseBy3 = makeIncreaseByFunction(3);
  var increaseBy5 = makeIncreaseByFunction(5);

  expect(increaseBy3(10) + increaseBy5(10)).toBe(FILL_ME_IN);
});

and yet it's trivially solved without even looking at what's actually going on; you only need to read the last line (!). Although highly desirable in a real world app, this doesn't help in learning how javascript works.

Can I suggest that if this project is truly about learning the ways of the javascripts, then all function and variable names should be obfuscated such that the only way to solve the problems is to understand the javascript logic, rather than just using your intuition/everyday logic.

edit: fixing up terminology

update "any" to "some" in AboutHigherOrderFunctions.js

it("should use 'any' to test if any items passes condition" , function () {
    var onlyEven = [2,4,6];
    var mixedBag = [2,4,5,6];

    var isEven = function(x) { return x % 2 === 0 };

    expect(_(onlyEven).any(isEven)).toBe(true);
    expect(_(mixedBag).any(isEven)).toBe(true);
  });

in lines 60-68 of AboutHigherOrderFunctions.js should be updated to use "some" instead of "any"

it looks like "any" has been deprecated?

5 Brains, not 4

AboutObjects.js line 32 has an expected answer of "They are Pinky and the Brain Brain Brain Brain" -- with 4 iterations of the string "Brain".

The actual pseudo code is:

var megalomaniac = {
  mastermind : "Brain",
  henchman: "Pinky",
  battleCry: function (noOfBrains) {
    return "They are " + this.henchman + " and the" +
      Array(noOfBrains + 1).join(" " + this.mastermind);
  }
};

The problem in question was:

var battleCry = megalomaniac.battleCry(4);

If we indeed pass 4 as noOfBrains, since the method adds 1 to noOfBrains before joining them, would the result not have 5 "Brain"?

Changes required

Remove Koans related to dojo

Is there a reason for including koans related to dojo? I don't understand what leaning dojo has to do with learning javascript. Can they be moved out to a separate repo called dojo-koans?

(deleted)

Create an npm watch based test runner.

This would allow the test runner to be run in the ide and not just from a separate window

Being really exact

Thanks for making these, good fun!
I'm going to fix a few typos and do a pull request..
also, I wonder if this drives the point home further?

it("should assert equality with ===", function () {
  var expectedValue = "2";
  var actualValue = (1 + 1).toString();

  // toBe() will always use === to compare
  expect(actualValue).toBe(expectedValue);
});

For clarity, update the expect statement in AboutApplyingWhatWeHaveLeart.js

In the file, AboutApplyingWhatWeHaveLeart.js
The following line:
expect(233168).toBe(FILL_ME_IN);

should be
expect(sum).toBe(233168);

There is nothing to fill in on this line. (I saw someone fill in with 233168, which is not the point!)

flatten not working for products array in AboutApplyingWhatWeHaveLearnt.js

In the very last challenge in AboutApplyingWhatWeHaveLearnt.js, it("should count the ingredient occurrence (imperative)", I tried replacing the FILL_ME_IN placeholder with _(products).flatten() to see what the effect would be. The output to the browser in KoansRunner.html is as follows:

[ { name : 'Sonoma', ingredients : [ 'artichoke', 'sundried tomatoes', 'mushrooms' ], containsNuts : false, beget : Function }, { name : 'Pizza Primavera', ingredients : [ 'roma', 'sundried tomatoes', 'goats cheese', 'rosemary' ], containsNuts : false, beget : Function }, { name : 'South Of The Border', ingredients : [ 'black beans', 'jalapenos', 'mushrooms' ], containsNuts : false, beget : Function }, { name : 'Blue Moon', ingredients : [ 'blue cheese', 'garlic', 'walnuts' ], containsNuts : true, beget : Function }, { name : 'Taste Of Athens', ingredients : [ 'spinach', 'kalamata olives', 'sesame seeds' ], containsNuts : true, beget : Function } ]

It appears to me that the flatten function isn't actually doing anything to the products array. Am I misusing the function or is there a problem?

About Applying What We've Learnt - General Question

requires original syntax of chain for koan 53

Using a more recent chain syntax, `_.chain(collection)`, will cause errors.
Koan 53 requires the original syntax of : `_(collection).chain`.

The more recent chain syntax was added more than 4 years ago,
and causes confusion when otherwise correct code produces errors.
Adding a note to koan 53 should remove this source of confusion
for users familiar with the newer `_.chain(collection)` syntax.

reference notes:
javascript-koans uses underscore v 1.1.6 from  Apr 2011
newer chain syntax was added in v 1.2.3 on 30 Dec 2011 as fix #408
current underscore library is v 1.8.3