mungobungo8 окт 2012 в 21:24

Функциональное программирование на Javascript

15 мин

129K

JavaScript * Программирование *

Туториал

Перевод

+105

Комментарии 54

Gorthauer87 8 окт 2012 в 23:32

А что насчет ленивых вычислений?

mungobungo 9 окт 2012 в 07:03

То же самое, что и выводом типов ;) Я хочу заинтересовать людей, чтобы они начали смотреть по сторонам. Ступившие на скользкую дорожку функционального программирования рано или поздно знакомятся с Haskell. И ленивостью, и pattern matching, и монадами с функторами. И другими страшными словами.

VSOP_juDGe 9 окт 2012 в 00:28

Классная статья и хорошие примеры!

Regis 9 окт 2012 в 02:36

Небольшое замечание: вместо того, чтобы добавлять обертку вокруг jQuery.ajax можно было бы сделать аналогичное на базе jQuery.Deferred. Собственно вызов jQuery.ajax и возвращает jQuery.Deferred. Правда тогда бы было труднее показать преимущества map/reduce :)

DSL88 9 окт 2012 в 02:41

а чем не угодил такой кусок:

for (key in arr){
 return arr[key];
}

и зачем надо было городить foreach (через численный), который в принципе реализован нативно?
Много просто лишено смысла в реализации: все сводится к тому что «мне красиво и нравится, поэтому функционального программирования тут нет»

Damaskus 9 окт 2012 в 04:39

Не универсальное решение.
В чистом JS это сработает, но некоторые фреймворки могут добавить свой функционал в Array.prototype и тогда при итерировании вы этот атрибут тоже обойдете.

DSL88 9 окт 2012 в 04:45

У автора мешанина JQuery и чистого с последующим сравнением того, что сравнивать, по сути, нельзя.
Добавление в Array.prototype атрибутов, которые можно обойти с помощью for(key in arr) — феерический бред, т.к. есть объекты, а есть массивы.

Damaskus 9 окт 2012 в 04:56

Не понял про бред, поясните.

Array.prototype.newProp = "newprop"
var b = new Array();
b.push(0);
b.push(1);
for (var i in b) console.log(b[i]);

Выводит

0
1
newprop

DSL88 9 окт 2012 в 05:00

Я про то, что надобность данных структур по-моему сильно преувеличена.
Массив данных должен являться массивом данных, а не объектом хранения дополнительных структур, функций и т.д., т.к. для этого есть объекты.

widowmaker 9 окт 2012 в 05:04

Если использовать, например, тот же es5-shim, то в старых браузерах код будет работать некорректно

DSL88 9 окт 2012 в 05:06

Возможно я не прав.

Damaskus 9 окт 2012 в 05:08

Это в идеале.
А реальности можно словить че нить интересное.
Например в старых версия IE (не знаю как сейчас), у массива не было функции indexOf, и некоторые для исправления этой проблемы поступали очень просто:

if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(item) {
    ...
  }
}

widowmaker 9 окт 2012 в 04:50

Вероятно этим и не угодил:

var a = [1, 2], i;
Array.prototype.someFunc = function() {};
for (i in a) {
    console.log(i, ' > ' , a[i]);
}

P.S. То есть надо деллать дополнительную проверну на a.hasOwnProperty(i)
P.P.S. Насколько я помню, конструкция с in не гарантирует верную последовательность перебора. Она может быть такой исключительно по совпадению.

muradovm 9 окт 2012 в 04:27

Спасибо большое за статью!

Damaskus 9 окт 2012 в 04:31

for(var i =0; l< arr.length; i<l; ++i){
    console.log(arr[i]);
}

А не так должно быть?

for(var i=0, l = arr.length; i<l; ++i){
    console.log(arr[i]);
}

И так в нескольких местах оператору for 4 терма передается.

Dima_Sharihin 9 окт 2012 в 05:22

По поводу ФП на javascript — все хорошо, но количество слов function иногда задалбывает

Лично мне приятнее видеть, когда асинхронные запросы выполняются в виде. Не знаю, как остальным, так скобок нет грядки в конце выражения

SomeAsyncronousController.SomeMethodAsync(args).then(function(callback) { });

neyronius 9 окт 2012 в 07:00

Смотрите на CoffeeScript

Istergul 9 окт 2012 в 06:49

Думаю, стоит упомянуть, что ни map, ни reduce, ни forEach не работают в IE < 9.

neyronius 9 окт 2012 в 07:02

Есть куча библиотек, которые либо расширяют стандартные объекты, либо вводят подобный функционал через внешние объекты, например, underscore.js

Istergul 9 окт 2012 в 07:08

Я в курсе.

sdevalex 9 окт 2012 в 08:55

SugarJS тут больше подходит. underscore.js немного портит выразительность.

Istergul 9 окт 2012 в 08:59

А Sugar портит методами, не описанными в специффикации.

mungobungo 9 окт 2012 в 08:08

Да, не работают, но чукча не писатель, чукча переводчик :)

Внизу кстати правильно подсказали про underscore.js.

Istergul 9 окт 2012 в 08:17

Или es5-shim для совместимости.

modernstyle 9 окт 2012 в 07:30

Очень интересно, однако я смог осилить ровно половину. Через пол годика приду дочитывать.

mungobungo 9 окт 2012 в 11:11

Это перевод 45-минутной презентации. Полгодика на один школьный урок? Я думаю вы лукавите )

modernstyle 9 окт 2012 в 14:31

Возможно. В новом для меня мире программирования время течет абсолютно непредсказуемо.

azproduction 9 окт 2012 в 08:04

В JavaScript для функционального программирования важно понимать несколько ключевых особенностей языка:
1. функции — вызываемые объекты (их можно возвращать и передавать)
2. функция не проверяет тип и кол-во аргументов в нее переданных (имена аргументов формальны)
3. каждая функция образует лексическое замыкание (и это замыкание путешествует с ней)
4. this и прототипы

Дальше все прочее можно написать уже исходя из потребностей. Можно даже таких слов как «Функции высшего порядка» и «Частичное применение функций» не знать :)

mungobungo 9 окт 2012 в 08:27

Да, эти нюансы очень важны, но их редко где можно встретить описанными вместе. Да еще и в контексте функционального программирования. На ум приходит только Secrets of Javascript Ninja.

azproduction 9 окт 2012 в 08:17

По поводу производительности функций:
— Браузеры оптимизируют итераторы (сворачивают функции) так что ваша функция формально может и не вызываться (если вы, конечно, не делаете нечто извращенное и оптимизация не проходит). Так что пишите .map() .forEach() для холодных и теплых циклов — берегите глаза от for ;-)
— Наследование через замыкания дороже прототипного наследования (Scope функции может создаваться каждый раз при вызове функции). Опять же это заметно только в очень горячих функциях.

Istergul 9 окт 2012 в 08:21

Что есть наследование через замыкания?

azproduction 9 окт 2012 в 08:43

Ох я уж с этим наследованием наговорил чего-попало. Хотел сказать конструкторы через фактори дороже обычных через new (но не фатально).

var createSmth = function (myPrivate) {
    myPrivate = myPrivate || 0;

    return {
        setMyPrivate: function (val) {
            myPrivate = b;
        } 
    };
};

// или что-то такое

function makeF() {
  var x = 11;
  var y = 22;
  return function (what) {
    switch (what) {
      case "x": return x;
      case "y": return y;
    }
  }
}

var f = makeF();
f("x");

В общем всякие фактори функций и куча вложенных функций это дороже обычного new и нескольких неизменных функций.

dima_mendeleev 9 окт 2012 в 08:54

А это:

var totalLength = buffers.
    map(function (buffer) {return buffer.length; }).
    reduce(function(sum, curr){return sum+curr;}, 0);

Разве нельзя заменить на:

var totalLength = buffers.
    reduce(function(sum, buffer){return sum + buffer.length;}, 0);

mungobungo 9 окт 2012 в 10:27

Конечно можно. Но чем проще каждый шаг, тем проще понимать, что происходит. Особенно для тех, кто не сильно знаком с reduce.

Можно ведь и

function combine(scripts, callback){
    async.map(scripts, ajax, function(contents){
        callback(contents.join(""));
    });
}

заменить на

function combine(scripts, callback){
    async.map(scripts, ajax, function(contents){
        callback(contents.reduce(function(result, current) { return result + current},""));
    });
}

Чтобы совсем функцоинально. Но будет ли понятнее? :)

dima_mendeleev 9 окт 2012 в 10:41

Ваш пример вообще не коррелирует с тем, что я предложил.
Вы предлагаете расписать один шаг так, как он там внутри представляется, я же предложил два шага в один записать.

mungobungo 9 окт 2012 в 14:16

Разделение на map и reduce было сделано специально. Давайте представим, что buffer.length не просто buffer.length, а какое-то тяжелое вычисление. Которое надо раскинуть на кластер машин для ускорения.

В случае с явно выделенным map это будет просто и писать и читать. Если же все запихнуть в один reduce- это будет сложнее для восприятия.

Композиция функций поэтому и получилась такой мощной, что сначала мы разделили все на элементарные блоки. Их проще писать, их проще понимать, их проще тестировать.

dima_mendeleev 9 окт 2012 в 15:14

А, я понял! Идиома map-reduce.

dmitiybuldakov 17 фев 2016 в 13:18

не туда( написал комент

yorick_kiev_ua 9 окт 2012 в 09:10

>>Под циклом будем понимать стандартное лобовое решение. Примерно такое
>>for(var i =0; i

yorick_kiev_ua 9 окт 2012 в 10:25

Парсер пожрал.
>>Под циклом будем понимать стандартное лобовое решение. Примерно такое
>>for(var i = 0; i < n; ++1){

В очередной раз убедился, что на js может писать только «исполин духа и корифей».

eydemidov 9 окт 2012 в 14:02

Что не так?

eydemidov 9 окт 2012 в 14:02

Ах да. Плохо, что нельзя удалять комментарии.

ActiveObject 9 окт 2012 в 09:22

Для полного погружения в функциональное программирование на JavaScript:

И еще один интересный пост про оптимизация хвостовой рекурсии: Tail call optimization on it’s way… Who gives a frak?!

Kongo 23 сен 2013 в 09:54

7uiip[poop
'p[;
yiio
gthhhjkipk kooo,l,k,p'\

a11aud 9 окт 2012 в 12:35

Спешу заметить, что пост начинается в ошибочного примера (с функцией add). Говорится, что «Можно тот же код записать по-другому.». На самом деле эти формы записи имеют достаточно серьезные отличия, и, вообще говоря, работают по-разному. Объяснение которых уходит корнями спецификацию языка. О этих отличиях, кстати, любят спрашивать на собеседованиях. Кому интересно разобраться в данном вопросе, рекомендую почитать про Function Statement и Function Definition, например у Дмитрия Сошникова: dmitrysoshnikov.com/ecmascript/ru-chapter-5-functions/

Keyten 9 окт 2012 в 13:31

> var str = «Mentioned by » + tweeps.map(prop («name»)).join(", ");

Есть очень интересная вещь под названием «вызов по имени» (в RightJS, кстати, используется), позволяет заменить .map(prop(«name»)) на .map(«name»).

mungobungo 9 окт 2012 в 14:25

Собственно, реализацию этой возможности можно уместить ровно в одну строку.
Главное понимать, когда строка это свойство, когда — название функции, а когда — просто строка.

freeart 9 окт 2012 в 15:29

Писал библиотеку для glomper.com реализующую функциональный подход при разработке «богатых приложений» на js github.com/freeart/brisk

Keyten 9 окт 2012 в 17:55

> С чем тут могут быть проблемы? С областями видимости Javascript. В этом языке область видимость не поблочная, а функциональная. то есть все 3 функции будут видеть одно и то значение переменной i. Поскольку цикл отработает раньше, чем придут ответы от сервера, все три функции будут работать с i == 3;
Просто замените var на let.

krati 9 янв 2014 в 07:11

va ul = cull.dom.el("ul", className:"bands"},
                    cull.dom.el("li", "Tom Waits"));

очепятка, нету {

sigod 25 апр 2014 в 12:45

Статья настолько простая, что уже сложная.

«Порадовала» масса опечаток.

dmitiybuldakov 17 фев 2016 в 13:20

Неплохо бы что-то сделать с ясностью формулировок:

Одним из больших плюсов Javascript является то, что функции в нем являются полноценными объектами. Настоящие First Class Citizen.
В отличие, например от Java, где функция отдельно от объекта существовать не может.

По факту сказано — в JS функция является объектом, (то есть фактически, отдельно от объекта существовать не может), в отличие от Java где отдельно от объекта существовать не может...

dmitiybuldakov 17 фев 2016 в 13:27

Хотелось бы обратить внимание, что замена

for (var i =1; l = arr.length; i< l; ++i){
}

на foreach.

далеко не эквивалентна в общем случае. Стандарт языка не гарантирует что порядок вывода будет совпадать в обоих конструкциях, более того в разных реализациях (разных браузерах) присутствуют собственные эффекты.

mungobungo 17 фев 2016 в 14:43

Ну тут надо понимать, что пытаемся сделать

Я бы и foreach не использовал, а брал бы map/fold функции или их аналоги.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий