<commit_before><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clean</title>
  <link href="../../lib/prism/prism.css" rel="stylesheet"/>
  <link href="../story.css" rel="stylesheet" />
</head>
<body>

<h1>Fibonacci</h1>

<p>In this story that tells about creating contracts for JavaScript functions,
  we will use one of the prototypical functions we all know as an example:
  the <a href="https://en.wikipedia.org/wiki/Fibonacci_number">Fibonacci</a> function.</p>
<p>We start out with a simple, correct but naive, recursive implementation:</p>

<pre id="fibonacci" class="line-numbers" data-line="2,2-4,5,5-6,8-10,12" data-src="../fibonacci.js"
     data-eval="script"></pre>

<p>The <a href="#fibonacci.2-4">Fibonacci number of 0 is 0</a>,
  the <a href="#fibonacci.5-7">Fibonacci number of 1 is 1</a>.
  The Fibonacci number of greater positive integers <var>n</var> is
  <a href="#fibonacci.12">the sum of the
  Fibonacci number of <var>n - 1</var> and <var>n - 2</var></a>.</p>
<p>To add some spice, we deliberately add an error: <a href="#fibonacci.8-10">for <var>n === 8</var>,
  we return <var>-3</var></a>, which is wrong.</p>



<h1>Test and demonstration</h1>

<p>In the next chapters of this story, we will introduce contracts into this function.
  Each time, we will evaluate the version we have with the same test and demonstration code.
  In this code, we first call <code class="language-javascript">fibonacci</code>
  with a character, and next with the numbers from -1 to 9.</p>


<h2>Call with a Character</h2>

<pre id="test" class="line-numbers" data-line="9,12,8-13" data-src="../execFibonacci.js" data-eval="script"></pre>
<p>First, we call the Fibonacci function with a character as parameter. That makes no sense.
  The Fibonacci function is not defined for characters, only for positive integers.
  The effect of this call with our naive implementation is:</p>
<div id="prism-eval-output-fibonacciWithA"></div>
<p>We get an error. That is to be expected. What is weird is that it is a
  <code class="language-javascript">RangeError</code>. Huh?</p>
<p>If you try to find out how we come to this result, you get a glimpse of why we need a better way
  of doing things. We want the computer to tell us that we have called
  <code class="language-javascript">fibonacci</code> with a character, and that only
  positive integers are allowed. Instead we get some weird reference to a call stack size
  that exceeds some maximum.</p>
<p>Now imagine the other way around: you think your code is correct, but you get this weird error.
  Try finding out from that cryptic message that you called <code class="language-javascript">fibonacci</code>
  with a character by mistake. Sounds like an afternoon of fun.</p>
<p>What actually happens is that, on execution of <code class="language-javascript">fibonacci(&quot;a&quot;)</code>,
  we pass through both conditions
  <a href="#fibonacci.2"><code class="language-javascript" data-eval="true">&quot;a&quot; === 0</code></a> and
  <a href="#fibonacci.5"><code class="language-javascript" data-eval="true">&quot;a&quot; === 1</code></a>.
  So we happily call
  <a href="#fibonacci.12"><code class="language-javascript">fibonacci(&quot;a&quot; - 1)</code></a>.
  <code class="language-javascript" data-eval="true" data-output="a_1">&quot;a&quot; - 1</code> evaluates to
  <span id="a_1"></span>.
  <code class="language-javascript">fibonacci(Number.NaN)</code> is called, and again
  we pass through both conditions:
  <a href="#fibonacci.2"><code class="language-javascript" data-eval="true">Number.NaN === 0</code></a> and
  <a href="#fibonacci.5"><code class="language-javascript" data-eval="true">Number.NaN === 1</code></a>.
  So we call
  <a href="#fibonacci.12"><code class="language-javascript">fibonacci(Number.NaN - 1)</code></a>.
  <code class="language-javascript" data-eval="true" data-output="a_nan">Number.NaN - 1</code> evaluates to
  <span id="a_nan"></span> again. So we are actually calling
  <code class="language-javascript">fibonacci(Number.NaN)</code> again. And again. And again.</p>
<p><code class="prism-eval-error">Maximum call stack size exceeded</code> most often implies
  an infinite recursion these days, and that is exactly what our coding mistake triggers.</p><commit_msg>take into account different exceptions / messages in different browsers.<commit_after><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clean</title>
  <link href="../../lib/prism/prism.css" rel="stylesheet"/>
  <link href="../story.css" rel="stylesheet" />
</head>
<body>

<h1>Fibonacci</h1>

<p>In this story that tells about creating contracts for JavaScript functions,
  we will use one of the prototypical functions we all know as an example:
  the <a href="https://en.wikipedia.org/wiki/Fibonacci_number">Fibonacci</a> function.</p>
<p>We start out with a simple, correct but naive, recursive implementation:</p>

<pre id="fibonacci" class="line-numbers" data-line="2,2-4,5,5-6,8-10,12" data-src="../fibonacci.js"
     data-eval="script"></pre>

<p>The <a href="#fibonacci.2-4">Fibonacci number of 0 is 0</a>,
  the <a href="#fibonacci.5-7">Fibonacci number of 1 is 1</a>.
  The Fibonacci number of greater positive integers <var>n</var> is
  <a href="#fibonacci.12">the sum of the
  Fibonacci number of <var>n - 1</var> and <var>n - 2</var></a>.</p>
<p>To add some spice, we deliberately add an error: <a href="#fibonacci.8-10">for <var>n === 8</var>,
  we return <var>-3</var></a>, which is wrong.</p>



<h1>Test and demonstration</h1>

<p>In the next chapters of this story, we will introduce contracts into this function.
  Each time, we will evaluate the version we have with the same test and demonstration code.
  In this code, we first call <code class="language-javascript">fibonacci</code>
  with a character, and next with the numbers from -1 to 9.</p>


<h2>Call with a Character</h2>

<pre id="test" class="line-numbers" data-line="9,12,8-13" data-src="../execFibonacci.js" data-eval="script"></pre>
<p>First, we call the Fibonacci function with a character as parameter. That makes no sense.
  The Fibonacci function is not defined for characters, only for positive integers.
  The effect of this call with our naive implementation is:</p>
<div id="prism-eval-output-fibonacciWithA"></div>
<p>We get an error. That is to be expected. What is weird is that it is a
  <code class="language-javascript">RangeError</code> (Chrome, Safari), or a
  <code class="language-javascript">InternalError</code> (Firefox). Huh?</p>
<p>If you try to find out how we come to this result, you get a glimpse of why we need a better way
  of doing things. We want the computer to tell us that we have called
  <code class="language-javascript">fibonacci</code> with a character, and that only
  positive integers are allowed. Instead we get some weird reference to a call stack size
  that exceeds some maximum (Chrome, Safari). Firefox is a bit more informative. It says
  <span class="prism-eval-error">too much recursion</span>.</p>
<p>Now imagine the other way around: you think your code is correct, but you get this weird error.
  Try finding out from that cryptic message that you called <code class="language-javascript">fibonacci</code>
  with a character by mistake. Sounds like an afternoon of fun.</p>
<p>What actually happens is that, on execution of <code class="language-javascript">fibonacci(&quot;a&quot;)</code>,
  we pass through both conditions
  <a href="#fibonacci.2"><code class="language-javascript" data-eval="true">&quot;a&quot; === 0</code></a> and
  <a href="#fibonacci.5"><code class="language-javascript" data-eval="true">&quot;a&quot; === 1</code></a>.
  So we happily call
  <a href="#fibonacci.12"><code class="language-javascript">fibonacci(&quot;a&quot; - 1)</code></a>.
  <code class="language-javascript" data-eval="true" data-output="a_1">&quot;a&quot; - 1</code> evaluates to
  <span id="a_1"></span>.
  <code class="language-javascript">fibonacci(Number.NaN)</code> is called, and again
  we pass through both conditions:
  <a href="#fibonacci.2"><code class="language-javascript" data-eval="true">Number.NaN === 0</code></a> and
  <a href="#fibonacci.5"><code class="language-javascript" data-eval="true">Number.NaN === 1</code></a>.
  So we call
  <a href="#fibonacci.12"><code class="language-javascript">fibonacci(Number.NaN - 1)</code></a>.
  <code class="language-javascript" data-eval="true" data-output="a_nan">Number.NaN - 1</code> evaluates to
  <span id="a_nan"></span> again. So we are actually calling
  <code class="language-javascript">fibonacci(Number.NaN)</code> again. And again. And again.</p>
<p><code class="prism-eval-error">Maximum call stack size exceeded</code> most often implies
  an infinite recursion these days, and that is exactly what our coding mistake triggers.</p>
{'fraction_non_alphanumeric': 0.15235300756122333, 'fraction_numerical': 0.01376819772034759, 'mean_word_length': 4.739637305699482, 'pattern_counts': {'":': 0, '<': 231, '<?xml version=': 0, '>': 231, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2946779', 'n_tokens_mistral': 2920, 'n_tokens_neox': 2761, 'n_words': 956}