a primary example for Functional programming in javascript
- background
In pursuit of a real-world application, let’s say we need an e-commerce web application
for a mail-order coffee bean company. They sell several types of coffee and in different
quantities, both of which affect the price.
- Imperative methods
First, let’s go with the procedural route. To keep this demonstration down to earth, we’ll
have to create objects that hold the data. This allows the ability to fetch the values from a
database if we need to. But for now, we’ll assume they’re statically defined:
// create some objects to store the data.
var columbian = {
name: 'columbian',
basePrice: 5
};
var frenchRoast = {
name: 'french roast',
basePrice: 8
};
var decaf = {
name: 'decaf',
basePrice: 6
};
// we'll use a helper function to calculate the cost
// according to the size and print it to an HTML list
function printPrice(coffee, size) {
if (size == 'small') {
var price = coffee.basePrice + 2;
}
else if (size == 'medium') {
var price = coffee.basePrice + 4;
}
else {
var price = coffee.basePrice + 6;
}
// create the new html list item
var node = document.createElement("li");
var label = coffee.name + ' ' + size;
var textnode = document.createTextNode(label+' price: $'+price);
node.appendChild(textnode);
document.getElementById('products').appendChild(node);
}
// now all we need to do is call the printPrice function
// for every single combination of coffee type and size
printPrice(columbian, 'small');
printPrice(columbian, 'medium');
printPrice(columbian, 'large');
printPrice(frenchRoast, 'small');
printPrice(frenchRoast, 'medium');
printPrice(frenchRoast, 'large');
printPrice(decaf, 'small');
printPrice(decaf, 'medium');
printPrice(decaf, 'large');
- Functional programming
While imperative code tells the machine, step-by-step, what it needs to do to solve the
problem, functional programming instead seeks to describe the problem mathematically so
that the machine can do the rest.
With a more functional approach, the same application can be written as follows:
// separate the data and logic from the interface
var printPrice = function(price, label) {
var node = document.createElement("li");
var textnode = document.createTextNode(label+' price: $'+price);
node.appendChild(textnode);
document.getElementById('products 2').appendChild(node);
}
// create function objects for each type of coffee
var columbian = function(){
this.name = 'columbian';
this.basePrice = 5;
};
var frenchRoast = function(){
this.name = 'french roast';
this.basePrice = 8;
};
var decaf = function(){
this.name = 'decaf';
this.basePrice = 6;
};
// create object literals for the different sizes
var small = {
getPrice: function(){return this.basePrice + 2},
getLabel: function(){return this.name + ' small'}
};
var medium = {
getPrice: function(){return this.basePrice + 4},
getLabel: function(){return this.name + ' medium'}
};
var large = {
getPrice: function(){return this.basePrice + 6},
getLabel: function(){return this.name + ' large'}
};
// put all the coffee types and sizes into arrays
var coffeeTypes = [columbian, frenchRoast, decaf];
var coffeeSizes = [small, medium, large];
// build new objects that are combinations of the above
// and put them into a new array
var coffees = coffeeTypes.reduce(function(previous, current) {
var newCoffee = coffeeSizes.map(function(mixin) {
// `plusmix` function for functional mixins, see Ch.7
var newCoffeeObj = plusMixin(current, mixin);
return new newCoffeeObj();
});
return previous.concat(newCoffee);
},[]);
// we've now defined how to get the price and label for each
// coffee type and size combination, now we can just print them
coffees.forEach(function(coffee){
printPrice(coffee.getPrice(),coffee.getLabel());
});
The first thing that should be obvious is that it is much more modular. This makes adding
a new size or a new coffee type as simple as shown in the following code snippet:
var peruvian = function(){
this.name = 'peruvian';
this.basePrice = 11;
};
var extraLarge = {
getPrice: function(){return this.basePrice + 10},
getLabel: function(){return this.name + ' extra large'}
};
coffeeTypes.push(Peruvian);
coffeeSizes.push(extraLarge);
Arrays of coffee objects and size objects are “mixed” together,—that is, their methods and
member variables are combined—with a custom function called plusMixin (see Chapter
7, Functional and Object-oriented Programming in JavaScript). The coffee type classes
contain the member variables and the sizes contain methods to calculate the name and
price. The “mixing” happens within a map operation, which applies a pure function to each
element in an array and returns a new function inside a reduce() operation—another
higher-order function similar to the map function, except that all the elements in the array
are combined into one. Finally, the new array of all possible combinations of types and
sizes is iterated through with the forEach() method The forEach() method is yet another
higher-order function that applies a callback function to each object in an array. In this
example, we provide it as an anonymous function that instantiates the objects and calls the
printPrice() function with the object’s getPrice() and getLabel() methods as
arguments.
Actually, we could make this example even more functional by removing the coffees
variable and chaining the functions together—another little trick in functional
programming.
coffeeTypes.reduce(function(previous, current) {
var newCoffee = coffeeSizes.map(function(mixin) {
// `plusMixin` function for functional mixins, see Ch.7
var newCoffeeObj = plusMixin(current, mixin);
return new newCoffeeObj();
});
return previous.concat(newCoffee);
},[]).forEach(function(coffee) {
printPrice(coffee.getPrice(),coffee.getLabel());
});
Also, the control flow is not as top-to-bottom as the imperative code was. In functional
programming, the map() function and other higher-order functions take the place of for
and while loops and very little importance is placed on the order of execution. This makes
it a little trickier for newcomers to the paradigm to read the code but, once you get the
hang of it, it’s not hard at all to follow and you’ll see that it is much better.
a primary example for Functional programming in javascript的更多相关文章
- JavaScript Functional Programming
JavaScript Functional Programming JavaScript 函数式编程 anonymous function https://en.wikipedia.org/wiki/ ...
- BETTER SUPPORT FOR FUNCTIONAL PROGRAMMING IN ANGULAR 2
In this blog post I will talk about the changes coming in Angular 2 that will improve its support fo ...
- Functional Programming without Lambda - Part 1 Functional Composition
Functions in Java Prior to the introduction of Lambda Expressions feature in version 8, Java had lon ...
- Sth about 函数式编程(Functional Programming)
今天开会提到了函数式编程,针对不同类型的百年城方式,查阅了一部分资料,展示如下: 编程语言一直到近代,从汇编到C到Java,都是站在计算机的角度,考虑CPU的运行模式和运行效率,以求通过设计一个高效的 ...
- Beginning Scala study note(4) Functional Programming in Scala
1. Functional programming treats computation as the evaluation of mathematical and avoids state and ...
- Functional Programming without Lambda - Part 2 Lifting, Functor, Monad
Lifting Now, let's review map from another perspective. map :: (T -> R) -> [T] -> [R] accep ...
- Functional programming
In computer science, functional programming is a programming paradigm, a style of building the struc ...
- Java 中的函数式编程(Functional Programming):Lambda 初识
Java 8 发布带来的一个主要特性就是对函数式编程的支持. 而 Lambda 表达式就是一个新的并且很重要的一个概念. 它提供了一个简单并且很简洁的编码方式. 首先从几个简单的 Lambda 表达式 ...
- Functional programming idiom
A functional programming function is like a mathematical function, which produces an output that typ ...
随机推荐
- java.lang.Class<T> -- 反射机制
1反射机制是什么 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为jav ...
- H5 学习笔记(一、关于position定位)
主要是relative与absolute的用法: 1.relative 依据left right top bottom 等属性在正常文档流中脱离位置,即相对于他的正常文档流位置进行移动.两个都为rel ...
- MySQL使用用户变量更新分组排序
第一个需求是根据A字段进行排序,排序结果更新到B字段 简单搜索之后,很快得到答案 http://dev.mysql.com/doc/refman/5.7/en/update.html ; ) ORDE ...
- Windbg使用简明指南
第一章 准备 1.1. 环境配置 _NT_DEBUGGER_EXTENSION_PATH=C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 _NT_SY ...
- Codeforces Round #375 (Div. 2) F. st-Spanning Tree
传送门 分析:构造题.可以这么想:先把s,t两个点去掉,把剩下的点先并查集合并.这样会出现个集合:, , 个剩余集合.那么个集合中先把只能与或中一个相连的连起来,如果这样已经超出了要求,那么就不能构造 ...
- NoSQL生态系统——事务机制,行锁,LSM,缓存多次写操作,RWN
13.2.4 事务机制 NoSQL系统通常注重性能和扩展性,而非事务机制. 传统的SQL数据库的事务通常都是支持ACID的强事务机制.要保证数据的一致性,通常多个事务是不可能交叉执行的,这样就导致了可 ...
- js 判断是什么类型浏览器
// firefoxif ( window.sidebar && "object" == typeof( window.sidebar ) && ...
- 实战Nginx与PHP(FastCGI)的安装、配置与优化
一.什么是 FastCGIFastCGI是一个可伸缩地.高速地在HTTP server和动态脚本语言间通信的接口.多数流行的HTTP server都支持FastCGI,包括Apache.Nginx和l ...
- WPF中Grid布局
WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...
- mpu
#include "mpu.h" #include "mem.h" #include "my_errno.h" #include " ...