js-functions/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Функции в JS</title>
    <meta name="description" content="">
    <meta name="author" content="Andrey Miskov">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../reveal/css/reveal.css">
    <link rel="stylesheet" href="../reveal/css/theme/white.css" id="theme">
    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="../reveal/lib/css/github.css">
    <!-- Printing and PDF exports -->
    <script>
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = window.location.search.match(/print-pdf/gi) ? '../reveal/css/print/pdf.css' : '../reveal/css/print/paper.css';
    document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>

<body>
    <div class="reveal">
        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides">
            <section data-background="#f6de38">
                <h2>Функции в&nbsp;JavaScirpt</h2>
                <h4>История, терминология,<br>примеры</h4>
            </section>
<!--             <section>
                <img style="margin: 0" src="img/problems_and_me.png" alt="">
            </section>
 -->
            <section>
                <h2>Проблема разрешения</h2>
                <h4>Давид Гильберт, 1928</h4>
                <p>Может ли существовать какой-то способ проверить, является ли данное арифметическое утверждение доказуемым или не доказуемым.</p>
                <p><a href="https://ru.wikipedia.org/wiki/Проблема_разрешения">Вики</a></p>
            </section>
            <section>
                <p>Может ли существовать такой алгоритм, который примет на вход другой алгоритм и скажет, нормальный этот принятый алгоритм или кривой?</p>
                <p>Существует ли способ понять, может ли этот входящий алгоритм выдать в итоге ответ или он зависнет?</p>
                <p><small><a href="https://ru.wikipedia.org/wiki/Алгоритмическая_разрешимость">Алгоритмическая разрешимость</a>, <a href="https://ru.wikipedia.org/wiki/Проблема_остановки">Проблема остановки</a></small></p>
            </section>
            <section>
                <h2>Зачем разбираться?</h2>
                <p>Например, чтобы понять, что смогут сделать ЭВМ, а чего не могут.</p>
            </section>
            <section>
                <img src="img/church.jpg" alt="">
                <img src="img/turing.jpg" alt="">
                <h2>
                    Чёрч и Тьюринг
                </h2>
                <p>И еще <a href="https://ru.wikipedia.org/wiki/Машина_Поста">Пост</a>.</p>
            </section>
            <section>
                <p>Не существует алгоритма, определяющего является ли данное арифметическое утверждение доказуемым или не доказуемым.</p>
                <p><small><a href="https://ru.wikipedia.org/wiki/Теорема_Чёрча_—_Тьюринга">Тезис Черча-Тьюринга</a></small></p>
            </section>

            <section>
                <h2>Инструменты</h2>
                <table>
                    <thead>
                        <th>Чёрч</th>
                        <th>Тьюринг</th>
                    </thead>
                    <tbody>
                        <td>λ-исчисление</td>
                        <td>Машина Тьюринга</td>
                    </tbody>
                </table>
            </section>

            <section>
                <h2><span style="text-transform: lowercase;">λ</span>-исчисление</h2>
                <p>Формальный аппарат, придуманный для анализа вычислимости. Основа — анонимная функция от одного аргумента.</p>
            </section>

            <section>
                <p><i>x<sup>2</sup> + 5x + 7</i> — выражение. Но что здесь x?</p>
                <p class="fragment"><i>f(x) = x<sup>2</sup> + 5x + 7</i> — общепринятое обозначение того, что вместо x можно что-то подставлять.<br>
                <i>f(4) = 4<sup>2</sup> + 5&times;4 + 7</i></p>
                <p class="fragment">А как представить выражение с переменной, которое сразу же принимает ее значение?</p>
            </section>

            <section>
                <p>Например, так:<br> <i>[x<sup>2</sup> + 5x + 7](4)</i></p>
                <p class="fragment">А для нескольких переменных так:<br>
                    <i>[x<sup>2</sup> + 5x + 7<b>y</b>](4, <b>5</b>)</i>
                </p>
            </section>

            <section>
                <p>Изначальный вариант Чёрча<br>
                <i>^x[x<sup>2</sup> + 5x + 7](4)</i></p>
                <p class="fragment"><i>^x^y[x<sup>2</sup> + 5x + 7y](4, 5)</i></p>
            </section>

            <section>
                <p>Потом крышки стали лямбдами<br>
                    <small>(вроде как писать на машинке было проще и символ красивый)</small><br>
                <i>λx[x<sup>2</sup> + 5x + 7](4)</i></p>
                <p><i>λxλy[x<sup>2</sup> + 5x + 7y](4, 5)</i></p>
            </section>
            <section>
                <p>Чёрч писал без скобок, но с подсветкой<br>
                    <small>(любил разноцветные чернила)</small><br>
                <i>λ<b style="color: darkviolet;">x</b>.x<sup>2</sup> + 5x + 7 <b style="color: darkviolet;">4</b></i></p>
                <p><i>λ<b style="color: darkviolet;">x</b>.λ<b style="color: blue;">y</b>.x<sup>2</sup> + 5x + 7y <b style="color: darkviolet;">4</b> <b style="color: blue;">5</b></i></p>
            </section>

            <section>
                <p>На самом деле одного аргумента <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%80%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">хватит</a> для всех возможных вычислений.</p>
                <p><code>F(x,y)</code> эквивалентно <code>(f(x))(y)</code></p>
                <p class="fragment"><i>λx[λy[x<sup>2</sup> + 5x + 7y]](4)(5)</b></i></p>
            </section>
            <section>
<p>Было: функция от двух аргументов</p>
<pre><code class="hljs javascript">
(function (x, y) {
    return x**2 + 5*x + 7*y
})(4, 5); // 71

</code></pre>

<div class="fragment">
<p>Стало: две функции от одного аргумента</p>
<pre><code class="hljs javascript">
(function (x) {
    return function (y) {
        return x**2 + 5*x + 7*y
    }
})(4)(5); // 71

</code></pre></div>
            </section>
            <section>
<p>Современный синтаксис</p>
<pre><code class="hljs javascript">
(x => y => x**2 + 5*x + 7*y)(4)(5); // 71

</code></pre>
            </section>
            <section>
                <h2>Свободные и связанные переменные</h2>
                <p class="fragment">Лямбда-функция связывает переменную.</p>
                <p class="fragment">Привет, окружение и замыкание.</p>
            </section>
            <section>
                <p>Функции эквивалентны значениям. Их можно передавать как аргументы и возвращать как результат вычислений.</p>
                <p><i>λx[x<sup>2</sup> + 5x + 7](λz[z+1])(3)</i></p>
            </section>

            <section>
                <h2>Привет, колбэки!</h2>
<pre><code class="hljs javascript">
    [-1, 0, -3, 2, 3].filter(n => n > 0)

</code></pre>
            </section>

            <section>
                <blockquote>Возможно, у этой системы найдутся приложения не только в роли логического исчисления.
                    <br>— Алонзо Чёрч, 1932</blockquote>
            </section>

            <section>
                <h2>Машина Тьюринга</h2>
                <iframe width="510" height="287" src="https://www.youtube.com/embed/B2H1lMfpmfA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </section>

            <section>
                <h2>Архитектура ЭВМ</h2>
                <p>Машину Тьюринга можно собрать руками, лямбда-исчисление — абстрактный аппарат.</p>
                <p class="fragment">Императивность для компьютеров естественнее, чем декларативность.</p>
            </section>

            <section>
                <p>Такое пишется чаще:</p>
<pre><code class="hljs javascript">
    let sum = 0;
    for (let i = 0; i <= 100; i++) {
        sum += i;
    }

</code></pre>

<div class="fragment">
    <p>чем такое:</p>
<pre><code class="hljs javascript">
    (function sum(n, acc) {
        return (n == 0) ? acc : sum(n - 1, acc + n);
    })(100, 0)

</code></pre>
</div>
            </section>

            <section>
                <img src="img/mccarthy.jpg" alt=""><br>
                <h2>Lisp</h2>
            </section>

            <section>
               <p><b>λx.λy.</b>x<sup>2</sup> + 5x + 7y <b>4 5</b></p>
<pre><code class="hljs lisp">
    ((λ (x y)
        (+ (expt x 2) (* 5 x) (* 7 y))) 4 5) ; 71

</code></pre>

            </section>

            <section>
                <h2>Лисп-машина</h2>
                <p><img src="img/lisp-machine.jpg" alt=""></p>
            </section>

            <section>
                <h2>Впервые на Лисп-машинах</h2>
                <ul>
                    <li>Сборка мусора</li>
                    <li>Лазерная печать</li>
                    <li>Многооконный графический интерфейс пользователя</li>
                    <li>Растровая графика высокого разрешения</li>
                    <li>Рендеринг</li>
                    <li>Множество сетевых инноваций.</li>
                </ul>
            </section>

            <section data-background="#f6de38">
                <h1>JS</h1>
                <h4>Come and put Scheme<br>into the Browser!</h4>
            </section>

            <section>
                <h4>Three Magic Words</h4>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/-00X6Me-y7U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </section>
            <section>
                <h2>JS = Lisp + Self</h2>
                <h4>+ синтаксис а-ля Java</h4>
            </section>

            <section>
                <blockquote style="width: auto">
                    <p>The strength of JavaScript is that you can do anything.<br>
                    The weakness is that you will.</p>
                    <p>— Reg Braithwaite</p>
                </blockquote>
            </section>


            <section>
                <h3>Функции пришли в JS из Лиспа</h3>
                <p>Имеем λ-исчисление + императивность</p>
            </section>

            <section>
                <h2>Функции — данные</h2>
<pre><code class="hljs javascript">
    const checker = n => n > 0
    [-1, 0, -3, 2, 3].filter(checker)

</code></pre>
</section>
            <section>
                <h2>Определения</h2>
<pre><code class="hljs javascript">
    // Функциональное выражение (Function Expression)
    const checker = n => n > 0

    // Объявление функции (Function Declaration)
    function checker (n) { return n > 0 }

    // Функция высшего порядка (Higher-Order Function)
    [-1, 0, -3, 2, 3].filter(checker)

</code></pre>
            </section>
            <section>
                <h2>Люди второго сорта</h2>
                <ul>
                    <li>Живут отдельно</li>
                    <li>Отдельные места в транспорте</li>
                    <li>Нельзя входить в некоторые общественные места</li>
                </ul>
            </section>

            <section>
                <!-- <img height="300" src="img/kulak.jpg" alt=""> -->
                <blockquote>Собакам и китайцам вход запрещен</blockquote>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/VRruW_vOb4s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </section>

            <section>
                <h2>Сущности второго класса</h2>
                <ul>
                    <li>Нельзя передать как аргумент.</li>
                    <li>Нельзя сохранить в переменную.</li>
                    <li>Нельзя вернуть в качестве результата вычисления.</li>
                </ul>
                <p style="text-align: left;">В отличие от <a href="https://ru.wikipedia.org/wiki/Объект_первого_класса">сущностей первого класса</a>.</p>
            </section>

            <section>
                <h4>Функции в JS — сущности первого класса</h4>
                <p>First Class Entities or First Class Objects</p>
                <ul>
                    <li>Передаются как аргумент</li>
                    <li>Сохраняются в переменную</li>
                    <li>Возвращаются из функции [высшего порядка]</li>
                </ul>
            </section>

            <section>
                <h4>Функции высшего порядка</h4>
                <p>Higher-Order Function</p>
                <ul>
                    <li>Принимают функцию как аргумент</li>
                    <li>Возвращают функцию как результат вычислений</li>
                </ul>
<pre><code class="hljs javascript">
    [-1, 0, -3, 2, 3].filter(n => n > 0)

</code></pre>
</section>

            <section>
                    <h4>Именованное функциональное выражение</h4>
                    <p>Удобно для рекурсии</p>
<pre><code class="hljs javascript">
    const sumOf = function fn (acc) {
      return acc == 0 ? acc : acc + fn(acc - 1)
    }
    sumOf(10) // 55

</code></pre>
            </section>

            <section>
                <h4>Функция с вызовом на месте</h4>
                <p>Immediately Invoked Function Expression, IIFE</p>
<pre><code class="hljs javascript">
    var Module = (function (window, undefined) {
        const private = 'secret'
        const public = 'It is not a ' + private

        // Отдаем наружу только то, что нужно
        return { public: public }
    })(window, undefined);

    console.info(Module.public)
    console.info(Module.private) // undefined

</code></pre>
            </section>

            <section>
                <h4>Самовызывающаяся функция</h4>
                <p>Self-executing function (не путать с IIFE)</p>
<pre><code class="hljs javascript">
    const sum = function fn (acc) {
      return acc == 0 ? acc : acc + fn(acc - 1)
    }
    sum(10) // 55

</code></pre>
            </section>

            <section>
                <h4>Самовызывающаяся функция с&nbsp;вызовом на месте</h4>
                <p>Все сразу</p>
<pre><code class="hljs javascript">
    (function fn (acc) {
      return acc == 0 ? acc : acc + fn(acc - 1)
    })(10)

</code></pre>
            </section>

            <section>
                <h2>Итого</h2>
                <p class="fragment">λ-исчисление и машина Тьюринга породили два подхода к созданию языков программирования: декларативный (функциональный) и императивный.</p>
                <p class="fragment">λ-исчисление &rarr; Lisp &rarr; Scheme &rarr; JS.</p>
                <p class="fragment">В JS много всего можно делать с функциями.</p>
            </section>

            <section>
                <blockquote style="width: auto">
                    <p>ООП и функциональное программирование могут быть полностью совместимыми (и должны быть!).
                    <p>Нам лишь нужно понять, что «компьютеры — это симуляторы» и разобраться, что же симулировать.</p>
                    <p>— Алан Кей, создатель ООП</p></blockquote>
                <small>Из ответа на вопрос «<a href="https://ru.hexlet.io/blog/posts/why-fp-seen-as-opposite-of-OOP">Почему функциональное программирование считают противоположностью ООП, а не дополнением?</a>»</small>
            </section>

            <section data-markdown>
                ## Материалы
                - Ч. Петцольд «Читаем Тьюринга», глава 15
                - [The Lambda Calculus](https://plato.stanford.edu/entries/lambda-calculus/)
                - [Lambda Calculus - Computerphile](https://youtu.be/eis11j_iGMs)
                - [A Brief History of JavaScript](https://auth0.com/blog/a-brief-history-of-javascript/)
                - [Тьюринг, Алан Матисон](http://www.krugosvet.ru/enc/gumanitarnye_nauki/lingvistika/TYURING_ALAN_MATISON.html)
                - [Милый видос](https://youtu.be/92WHN-pAFCs), который доступно объясняет доказательство Тьюринга. К нему есть [FAQ](http://www.zutopedia.com/halting_problem.html#faq).

            </section>

            <section>
                <h2>Конец</h2>
                <p>Спасибо за внимание</p>
                <p>amiskov@ya.ru, <a href="http://andreymiskov.ru">andreymiskov.ru</a></p>
            </section>

        </div>
    </div>
    <script src="../reveal/lib/js/head.min.js"></script>
    <script src="../reveal/js/reveal.js"></script>
    <script>
    // More info https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        transition: 'none', // none/fade/slide/convex/concave/zoom

        // More info https://github.com/hakimel/reveal.js#dependencies
        dependencies: [
            { src: '../reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
            // Interpret Markdown in <section> elements
        { src: '../reveal/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
        { src: '../reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

        ]
    });
    </script>
</body>

</html>