{
 "blyg": "0.4",
 "id": "78kf2twgjzjvxhqcmqtsbkdwn6",
 "kind": "thread",
 "origin": "https://notionparallax.co.uk/",
 "page": "https://notionparallax.co.uk/2016/a-thinking-trick-for-beginner-programmers",
 "author": {
  "name": "Ben Doherty",
  "url": "https://notionparallax.co.uk/"
 },
 "created": "2016-06-10T16:28:21Z",
 "updated": "2016-06-10T16:28:21Z",
 "version": 1,
 "content_md": "# A thinking trick for beginner programmers - Ghetto TDD\n\n\nI've taught programming to a lot of people who don't have a STEM background; mostly architecture students. The myth is that architects know a lot of maths, but that's mostly false[^1]. That said, they are totally sold on the idea of programming as a creative medium, and often have a good idea of their intended outcome. They know where they want to go, but get frustrated because they can't get there.\n\n> Slow is smooth and smooth is fast\n\nOne of the traps I see beginner programmers falling into is trying to go too fast. I can't find a source for that quote, but it's generally attributed to military types. It's a bit like <q>more haste; less speed</q>.\n\nThere is a lack of respect for the skill level that professional programmers need to do their job. That lack of respect is totally natural; as a beginner in any endeavour you [don't know enough to evaluate your own ability](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect). That's fine, don't worry about it, that will come in time. Here's one way that you can make things a bit less painful until you get a bit more mastery of the art.\n\n# Ghetto TDD\n\nTDD stands for Test Driven Development. It, and all it's variants have one principle in common, _write a test before you write any code_. If you look up TDD methods you'll immediately come to a wall of complicated test frameworks. These are all totally overkill for the kind of code you'll be working on if you are reading this. This is because pro programmers can usually think their way through the kinds of problems beginners get stuck on. You want a way to get your head around _your_ problems, not a way to make sure _their_ problems don't trip you up.\n\nI'm going to use some simple code here that you can probably run in your head. This might make you think that there's no point doing this, but I want you to be able to see what's going on. If I made the code hard it'd be too hard to grasp the bigger picture.\n\nHere's an [empty console you can play in to keep up with what's going on](http://jsbin.com/mavodunago/edit?js,console).\n\n## The problem we'll try to solve\n\nWe're getting some data from a database, then we need to do something else with it. This is a real problem [based on this](http://where-in.space/2016/updating-some-changes-to-the-javascript), but I'm going to really cut down the complexity for the moment.\n\n### Input\n\nThe first thing to do is to work out what we're actually dealing with. I'm going to use the Mongo restaurants data as an example.\n\n```json\n{\n    \"address\": {\n        \"building\": \"1007\",\n        \"coord\": [-73.856077, 40.848447],\n        \"street\": \"Morris Park Ave\",\n        \"zipcode\": \"10462\"\n    },\n    \"borough\": \"Bronx\",\n    \"cuisine\": \"Bakery\",\n    \"grades\": [\n        { \"date\": { \"$date\": 1393804800000 }, \"grade\": \"A\", \"score\": 2 },\n        { \"date\": { \"$date\": 1378857600000 }, \"grade\": \"A\", \"score\": 6 },\n        { \"date\": { \"$date\": 1358985600000 }, \"grade\": \"A\", \"score\": 10 },\n        { \"date\": { \"$date\": 1322006400000 }, \"grade\": \"A\", \"score\": 9 },\n        { \"date\": { \"$date\": 1299715200000 }, \"grade\": \"B\", \"score\": 14 }\n    ],\n    \"name\": \"Morris Park Bake Shop\",\n    \"restaurant_id\": \"30075445\"\n}\n```\n\nThis is our input.\n\n### Output\n\nThe next thing we need to do is to decide what we want to end up with. How do we want this data to be once we're finished with it.\n\nLet's say that we're making a reviews site and we want to turn the JSON into a sentence about the restaurant. We might want it to look like:\n\n> The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\n\nLet's ignore how weird it sounds to say _in Bronx_ for now. We've got an input and an output and we're off to the races.\n\n```json\n{\n    \"address\": {\n        \"building\": \"1007\",\n        \"coord\": [-73.856077, 40.848447],\n        \"street\": \"Morris Park Ave\",\n        \"zipcode\": \"10462\"\n    },\n    \"borough\": \"Bronx\",\n    \"cuisine\": \"Bakery\",\n    \"grades\": [\n        { \"date\": { \"$date\": 1393804800000 }, \"grade\": \"A\", \"score\": 2 },\n        { \"date\": { \"$date\": 1378857600000 }, \"grade\": \"A\", \"score\": 6 },\n        { \"date\": { \"$date\": 1358985600000 }, \"grade\": \"A\", \"score\": 10 },\n        { \"date\": { \"$date\": 1322006400000 }, \"grade\": \"A\", \"score\": 9 },\n        { \"date\": { \"$date\": 1299715200000 }, \"grade\": \"B\", \"score\": 14 }\n    ],\n    \"name\": \"Morris Park Bake Shop\",\n    \"restaurant_id\": \"30075445\"\n}\n```\n\n{: style=\"font-size: 50%\"}\n\n⇣ Some magical function that does a transform ⇣\n{: style=\"text-align: center\"}\n\n```JS\n\"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\"\n```\n\n{: style=\"font-size: 60%\"}\n\n### The magical transform function\n\nLet's jump right in and start working on this...\n\nActually, **STOP** this is exactly the wrong thing to do! First we should write a test!\n\n### My First Test\n\nA test is just a function that checks to see if your transform function does what it's supposed to. Here's an example\n<noscript>\n\n```JS\nfunction add (a, b){\n    return 4;\n}\n\nfunction testAdding (aNumber, anotherNumber, theResult){\n    console.log(`if I add ${aNumber} and ${anotherNumber} I expect ${theResult}`)\n    console.log( add(aNumber, anotherNumber) === theResult);\n}\n\ntestAdding(2, 2, 4);\ntestAdding(1, 3, 4);\ntestAdding(4, 0, 4);\ntestAdding(4, 4, 8);\n```\n\n</noscript>\n\n<a class=\"jsbin-embed\" href=\"http://jsbin.com/hicalukovi/1/embed?js,console\">JS Bin on jsbin.com</a><script src=\"http://static.jsbin.com/js/embed.min.js?3.35.13\"></script>\n\nThis is all great! Our add function kicks arse until we get to the last case, and then it sucks.\n\nWe are doing things exactly right though. The model is _red, green, refactor_[^2]. This means that we write a test that we think is good, then we write a function that _fails_.\n\nExercise for you:\n\n-   How would you rewrite the add function so that it passes?\n-   Add some more test cases that might catch it out.\n\nIf we rewrite this for our restaurant data then it might look like this:\n<noscript>\n\n```JS\nlet inputData = {\n  \"address\": {\n     \"building\": \"1007\",\n     \"coord\": [ -73.856077, 40.848447 ],\n     \"street\": \"Morris Park Ave\",\n     \"zipcode\": \"10462\"\n  },\n  \"borough\": \"Bronx\",\n  \"cuisine\": \"Bakery\",\n  \"grades\": [\n     { \"date\": { \"$date\": 1393804800000 }, \"grade\": \"A\", \"score\": 2 },\n     { \"date\": { \"$date\": 1378857600000 }, \"grade\": \"A\", \"score\": 6 },\n     { \"date\": { \"$date\": 1358985600000 }, \"grade\": \"A\", \"score\": 10 },\n     { \"date\": { \"$date\": 1322006400000 }, \"grade\": \"A\", \"score\": 9 },\n     { \"date\": { \"$date\": 1299715200000 }, \"grade\": \"B\", \"score\": 14 }\n  ],\n  \"name\": \"Morris Park Bake Shop\",\n  \"restaurant_id\": \"30075445\"\n};\nlet outputData = \"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\";\n\n\nfunction makeSentence (input){\n    return \"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\";\n}\n\nfunction testMakeSentence (input, theResult){\n    console.log(`given ${JSON.stringify(input)} I expect ${theResult}`)\n    console.log( makeSentence (input) === theResult);\n}\n\ntestMakeSentence(inputData, outputData);\n```\n\n</noscript>\n<a class=\"jsbin-embed\" href=\"http://jsbin.com/jaletenida/1/embed?js,console\">JS Bin on jsbin.com</a><script src=\"http://static.jsbin.com/js/embed.min.js?3.35.13\"></script>\n\nThis looks a _lot_ more complicated, but actually it's exactly the same as before. Our job now is to write some more useful code that we think will turn any input data into the right output.\n\nOur magical transform function is now:\n\n```JS\nfunction makeSentence (input){\n    return \"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\";\n}\n```\n\nWhich gives us the same answer whatever the input. A better try might be:\n\n```JS\nfunction makeSentence (input){\n    let grades = 8.2;\n    return `The ${input.name} is a ${input.cuisine} in ${input.borough}. It's got an average score of ${grades}`;\n}\n```\n\nThis still isn't fully general because it will always give you a grade of 8.2, but we can work on that. The test still passes and we know that whatever we've done works.\n\n# Conclusion\n\nThis is a good drill to help at the start of your career. It's up to you if take with you for the rest of your life as you get better.\n\nIt's extremely helpful to take the time to define your input and output data. Just doing that is often enough to make it clear how to solve the problem.\n\nLearning to program is mostly about ways of mapping an input to an output. It's also about having a clear enough head to do this. Very little of programming is typing; it is almost all thinking.\n\n[^1]: This is true for British, Australian and Americans, less so for mainland Europe, Russia as their architecture education requires a lot more maths. In my degree we had 2 lectures that included any calculations, and it was primary school level maths. I don't think there is _any_ maths in Australian architectural education.\n[^2]: By _green_ you made it work, but not be good. The _refactor_ part means taking the bad but working code (messy, slow, etc.) and make it good. The test will stop you from introducing _regression_ errors.\n",
 "content_html": "<h1>A thinking trick for beginner programmers - Ghetto TDD</h1>\n<p>I’ve taught programming to a lot of people who don’t have a STEM background; mostly architecture students. The myth is that architects know a lot of maths, but that’s mostly false<sup id=\"fnref:1\" role=\"doc-noteref\"><a href=\"https://notionparallax.co.uk/2016/a-thinking-trick-for-beginner-programmers#fn:1\" class=\"footnote\" rel=\"footnote\">1</a></sup>. That said, they are totally sold on the idea of programming as a creative medium, and often have a good idea of their intended outcome. They know where they want to go, but get frustrated because they can’t get there.</p>\n\n<blockquote>\n  <p>Slow is smooth and smooth is fast</p>\n</blockquote>\n\n<p>One of the traps I see beginner programmers falling into is trying to go too fast. I can’t find a source for that quote, but it’s generally attributed to military types. It’s a bit like <q>more haste; less speed</q>.</p>\n\n<p>There is a lack of respect for the skill level that professional programmers need to do their job. That lack of respect is totally natural; as a beginner in any endeavour you <a href=\"https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect\">don’t know enough to evaluate your own ability</a>. That’s fine, don’t worry about it, that will come in time. Here’s one way that you can make things a bit less painful until you get a bit more mastery of the art.</p>\n\n<h1 id=\"ghetto-tdd\">Ghetto TDD</h1>\n\n<p>TDD stands for Test Driven Development. It, and all it’s variants have one principle in common, <em>write a test before you write any code</em>. If you look up TDD methods you’ll immediately come to a wall of complicated test frameworks. These are all totally overkill for the kind of code you’ll be working on if you are reading this. This is because pro programmers can usually think their way through the kinds of problems beginners get stuck on. You want a way to get your head around <em>your</em> problems, not a way to make sure <em>their</em> problems don’t trip you up.</p>\n\n<p>I’m going to use some simple code here that you can probably run in your head. This might make you think that there’s no point doing this, but I want you to be able to see what’s going on. If I made the code hard it’d be too hard to grasp the bigger picture.</p>\n\n<p>Here’s an <a href=\"http://jsbin.com/mavodunago/edit?js,console\">empty console you can play in to keep up with what’s going on</a>.</p>\n\n<h2 id=\"the-problem-well-try-to-solve\">The problem we’ll try to solve</h2>\n\n<p>We’re getting some data from a database, then we need to do something else with it. This is a real problem <a href=\"http://where-in.space/2016/updating-some-changes-to-the-javascript\">based on this</a>, but I’m going to really cut down the complexity for the moment.</p>\n\n<h3 id=\"input\">Input</h3>\n\n<p>The first thing to do is to work out what we’re actually dealing with. I’m going to use the Mongo restaurants data as an example.</p>\n\n<div class=\"language-json highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"p\">{</span><span class=\"w\">\n    </span><span class=\"nl\">\"address\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\">\n        </span><span class=\"nl\">\"building\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"1007\"</span><span class=\"p\">,</span><span class=\"w\">\n        </span><span class=\"nl\">\"coord\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">[</span><span class=\"mf\">-73.856077</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"mf\">40.848447</span><span class=\"p\">],</span><span class=\"w\">\n        </span><span class=\"nl\">\"street\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Morris Park Ave\"</span><span class=\"p\">,</span><span class=\"w\">\n        </span><span class=\"nl\">\"zipcode\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"10462\"</span><span class=\"w\">\n    </span><span class=\"p\">},</span><span class=\"w\">\n    </span><span class=\"nl\">\"borough\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Bronx\"</span><span class=\"p\">,</span><span class=\"w\">\n    </span><span class=\"nl\">\"cuisine\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Bakery\"</span><span class=\"p\">,</span><span class=\"w\">\n    </span><span class=\"nl\">\"grades\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">[</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1393804800000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">2</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1378857600000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">6</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1358985600000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">10</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1322006400000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">9</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1299715200000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"B\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">14</span><span class=\"w\"> </span><span class=\"p\">}</span><span class=\"w\">\n    </span><span class=\"p\">],</span><span class=\"w\">\n    </span><span class=\"nl\">\"name\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Morris Park Bake Shop\"</span><span class=\"p\">,</span><span class=\"w\">\n    </span><span class=\"nl\">\"restaurant_id\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"30075445\"</span><span class=\"w\">\n</span><span class=\"p\">}</span><span class=\"w\">\n</span></code></pre></div></div>\n\n<p>This is our input.</p>\n\n<h3 id=\"output\">Output</h3>\n\n<p>The next thing we need to do is to decide what we want to end up with. How do we want this data to be once we’re finished with it.</p>\n\n<p>Let’s say that we’re making a reviews site and we want to turn the JSON into a sentence about the restaurant. We might want it to look like:</p>\n\n<blockquote>\n  <p>The Morris Park Bake Shop is a Bakery in Bronx. It’s got an average score of 8.2</p>\n</blockquote>\n\n<p>Let’s ignore how weird it sounds to say <em>in Bronx</em> for now. We’ve got an input and an output and we’re off to the races.</p>\n\n<div class=\"language-json highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"p\">{</span><span class=\"w\">\n    </span><span class=\"nl\">\"address\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\">\n        </span><span class=\"nl\">\"building\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"1007\"</span><span class=\"p\">,</span><span class=\"w\">\n        </span><span class=\"nl\">\"coord\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">[</span><span class=\"mf\">-73.856077</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"mf\">40.848447</span><span class=\"p\">],</span><span class=\"w\">\n        </span><span class=\"nl\">\"street\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Morris Park Ave\"</span><span class=\"p\">,</span><span class=\"w\">\n        </span><span class=\"nl\">\"zipcode\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"10462\"</span><span class=\"w\">\n    </span><span class=\"p\">},</span><span class=\"w\">\n    </span><span class=\"nl\">\"borough\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Bronx\"</span><span class=\"p\">,</span><span class=\"w\">\n    </span><span class=\"nl\">\"cuisine\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Bakery\"</span><span class=\"p\">,</span><span class=\"w\">\n    </span><span class=\"nl\">\"grades\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">[</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1393804800000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">2</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1378857600000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">6</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1358985600000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">10</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1322006400000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"A\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">9</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\">\n        </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"p\">{</span><span class=\"w\"> </span><span class=\"nl\">\"$date\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">1299715200000</span><span class=\"w\"> </span><span class=\"p\">},</span><span class=\"w\"> </span><span class=\"nl\">\"grade\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"B\"</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nl\">\"score\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">14</span><span class=\"w\"> </span><span class=\"p\">}</span><span class=\"w\">\n    </span><span class=\"p\">],</span><span class=\"w\">\n    </span><span class=\"nl\">\"name\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Morris Park Bake Shop\"</span><span class=\"p\">,</span><span class=\"w\">\n    </span><span class=\"nl\">\"restaurant_id\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"30075445\"</span><span class=\"w\">\n</span><span class=\"p\">}</span><span class=\"w\">\n</span></code></pre></div></div>\n\n<p style=\"text-align: center\">⇣ Some magical function that does a transform ⇣</p>\n\n<pre><code class=\"language-JS\">\"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\"\n</code></pre>\n\n<h3 style=\"font-size: 60%\" id=\"the-magical-transform-function\">The magical transform function</h3>\n\n<p>Let’s jump right in and start working on this…</p>\n\n<p>Actually, <strong>STOP</strong> this is exactly the wrong thing to do! First we should write a test!</p>\n\n<h3 id=\"my-first-test\">My First Test</h3>\n\n<p>A test is just a function that checks to see if your transform function does what it’s supposed to. Here’s an example</p>\n<noscript>\n\n  <pre><code class=\"language-JS\">function add (a, b){\n    return 4;\n}\n\nfunction testAdding (aNumber, anotherNumber, theResult){\n    console.log(`if I add ${aNumber} and ${anotherNumber} I expect ${theResult}`)\n    console.log( add(aNumber, anotherNumber) === theResult);\n}\n\ntestAdding(2, 2, 4);\ntestAdding(1, 3, 4);\ntestAdding(4, 0, 4);\ntestAdding(4, 4, 8);\n</code></pre>\n\n</noscript>\n\n<p><a class=\"jsbin-embed\" href=\"http://jsbin.com/hicalukovi/1/embed?js,console\">JS Bin on jsbin.com</a><script src=\"http://static.jsbin.com/js/embed.min.js?3.35.13\"></script></p>\n\n<p>This is all great! Our add function kicks arse until we get to the last case, and then it sucks.</p>\n\n<p>We are doing things exactly right though. The model is <em>red, green, refactor</em><sup id=\"fnref:2\" role=\"doc-noteref\"><a href=\"https://notionparallax.co.uk/2016/a-thinking-trick-for-beginner-programmers#fn:2\" class=\"footnote\" rel=\"footnote\">2</a></sup>. This means that we write a test that we think is good, then we write a function that <em>fails</em>.</p>\n\n<p>Exercise for you:</p>\n\n<ul>\n  <li>How would you rewrite the add function so that it passes?</li>\n  <li>Add some more test cases that might catch it out.</li>\n</ul>\n\n<p>If we rewrite this for our restaurant data then it might look like this:</p>\n<noscript>\n\n  <pre><code class=\"language-JS\">let inputData = {\n  \"address\": {\n     \"building\": \"1007\",\n     \"coord\": [ -73.856077, 40.848447 ],\n     \"street\": \"Morris Park Ave\",\n     \"zipcode\": \"10462\"\n  },\n  \"borough\": \"Bronx\",\n  \"cuisine\": \"Bakery\",\n  \"grades\": [\n     { \"date\": { \"$date\": 1393804800000 }, \"grade\": \"A\", \"score\": 2 },\n     { \"date\": { \"$date\": 1378857600000 }, \"grade\": \"A\", \"score\": 6 },\n     { \"date\": { \"$date\": 1358985600000 }, \"grade\": \"A\", \"score\": 10 },\n     { \"date\": { \"$date\": 1322006400000 }, \"grade\": \"A\", \"score\": 9 },\n     { \"date\": { \"$date\": 1299715200000 }, \"grade\": \"B\", \"score\": 14 }\n  ],\n  \"name\": \"Morris Park Bake Shop\",\n  \"restaurant_id\": \"30075445\"\n};\nlet outputData = \"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\";\n\n\nfunction makeSentence (input){\n    return \"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\";\n}\n\nfunction testMakeSentence (input, theResult){\n    console.log(`given ${JSON.stringify(input)} I expect ${theResult}`)\n    console.log( makeSentence (input) === theResult);\n}\n\ntestMakeSentence(inputData, outputData);\n</code></pre>\n\n</noscript>\n<p><a class=\"jsbin-embed\" href=\"http://jsbin.com/jaletenida/1/embed?js,console\">JS Bin on jsbin.com</a><script src=\"http://static.jsbin.com/js/embed.min.js?3.35.13\"></script></p>\n\n<p>This looks a <em>lot</em> more complicated, but actually it’s exactly the same as before. Our job now is to write some more useful code that we think will turn any input data into the right output.</p>\n\n<p>Our magical transform function is now:</p>\n\n<pre><code class=\"language-JS\">function makeSentence (input){\n    return \"The Morris Park Bake Shop is a Bakery in Bronx. It's got an average score of 8.2\";\n}\n</code></pre>\n\n<p>Which gives us the same answer whatever the input. A better try might be:</p>\n\n<pre><code class=\"language-JS\">function makeSentence (input){\n    let grades = 8.2;\n    return `The ${input.name} is a ${input.cuisine} in ${input.borough}. It's got an average score of ${grades}`;\n}\n</code></pre>\n\n<p>This still isn’t fully general because it will always give you a grade of 8.2, but we can work on that. The test still passes and we know that whatever we’ve done works.</p>\n\n<h1 id=\"conclusion\">Conclusion</h1>\n\n<p>This is a good drill to help at the start of your career. It’s up to you if take with you for the rest of your life as you get better.</p>\n\n<p>It’s extremely helpful to take the time to define your input and output data. Just doing that is often enough to make it clear how to solve the problem.</p>\n\n<p>Learning to program is mostly about ways of mapping an input to an output. It’s also about having a clear enough head to do this. Very little of programming is typing; it is almost all thinking.</p>\n\n<div class=\"footnotes\" role=\"doc-endnotes\">\n  <ol>\n    <li id=\"fn:1\" role=\"doc-endnote\">\n      <p>This is true for British, Australian and Americans, less so for mainland Europe, Russia as their architecture education requires a lot more maths. In my degree we had 2 lectures that included any calculations, and it was primary school level maths. I don’t think there is <em>any</em> maths in Australian architectural education. <a href=\"https://notionparallax.co.uk/2016/a-thinking-trick-for-beginner-programmers#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n    <li id=\"fn:2\" role=\"doc-endnote\">\n      <p>By <em>green</em> you made it work, but not be good. The <em>refactor</em> part means taking the bad but working code (messy, slow, etc.) and make it good. The test will stop you from introducing <em>regression</em> errors. <a href=\"https://notionparallax.co.uk/2016/a-thinking-trick-for-beginner-programmers#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">&#8617;</a></p>\n    </li>\n  </ol>\n</div>\n",
 "content_hash": "sha256:d63a47b4147def89065468450a759a6a136197993e878ba9cce815768bc6b246",
 "media": [],
 "changelog": [
  {
   "version": 1,
   "at": "2016-06-10T16:28:21Z",
   "note": null
  }
 ],
 "transclusions": []
}