JavaScript for ABAP Programmers

Chapter 7.3 - Changing Your Mind

Chris Whealy / Technology RIG
 ABAP
Data typing Strong
Syntax Similar to COBOL
Variable Scope Block scope
“Function” No concept of a function as a
Concept data object
Inheritance Model Class based
Programming Style Strictly Imperative
JavaScript
Weak
Derived mainly from Java with some influence from C
Lexical (or function) scope
Functions are 1st class citizens.
That is, a function is an object with “an executable part”
Referential (or Prototypical)
Both Imperative and Functional
Changing Your Mind: The Transition
from Imperative to Functional Thinking
Understanding the map, filter and reduce functions
Learning How to Think in a Functional Way: First Steps

One consequence of thinking in a functional rather than an imperative style is that:

a) You tend to use arrays, lists and data streams as your basic unit of data storage
b) Consequently, there is extensive use of the map, filter and reduce functions.

However, this has led to the popular misunderstanding that functional programming is nothing more
than using the map, reduce and filter functions.
Functional programming is much more than simply using map, filter and reduce, but it is certainly
nothing less than this.
So in order to understand how to start thinking in a functional manner, lets look at understanding how
these basic functions can be used.

© 2015 SAP AG. All rights reserved. 4

Understanding the map function: 1/3

In this simple example, we have an array that contains the integers from 1 to 10, and we want to double the value
of each element.
We’ll start with an imperative solution and then convert it, step-by-step into a functional solution.

// Create an array of integers from 1 to 10

var nums = new Array(1,2,3,4,5,6,7,8,9,10);

for (var i=0; i<nums.length; i++) {

nums[i] = nums[i] * 2;
}

//  nums = [2,4,6,8,10,12,14,16,18,20]

In general, a loop construct allows us to repeat the same set of actions to some collection of things (array
elements in this case). Here, we are using the familiar for loop.
Notice that the calculation performed inside the for loop is free from side-effects - no values outside the scope of
the for loop are changed. This is very important because it makes the transition from the imperative to the
functional style of programming easy.
Also notice that the purpose of this particular for loop is to modify the original nums array - it does not create a
new array.
© 2015 SAP AG. All rights reserved. 5
Understanding the map function: 2/3

Since the action performed within the for loop is free from side effects, we can now make two simple alterations:
1) Move the functionality within the for loop into a separate function called double
2) Call function double within the for loop passing in the current element value
// Create an array of integers from 1 to 10
var nums = new Array(1,2,3,4,5,6,7,8,9,10);

function double(n) { return n * 2; }

for (var i=0; i<nums.length; i++) {

nums[i] = double(nums[i]);
}

//  nums = [2,4,6,8,10,12,14,16,18,20]

However, other than making the functionality invoked within the for loop reusable, these changes don’t really
accomplish much.

So let’s see how we can achieve exactly the same result by replacing the for loop with a call to the map function.

© 2015 SAP AG. All rights reserved. 6

Understanding the map function: 3/3

The for loop can now be removed and replaced with a call to the array’s map function. map must be passed a
function as the first parameter. map then passes every array element in turn to this function.
The result is the creation of a new array containing the modified values. The original array is not modified.

// Create an array of integers from 1 to 10

var nums = new Array(1,2,3,4,5,6,7,8,9,10);

function double(n) { return n * 2; }

nums.map(double);

//  new array containing [2,4,6,8,10,12,14,16,18,20]

// nums  [1,2,3,4,5,6,7,8,9,10]

The function passed as a parameter to the map function must accept up to three parameters. The first is the
current array element, the second is the index of the current array element, and the third is the array object itself.
In this example, function double requires only a single parameter, so the map function ensures that this is
populated with the current array element.
For more details on using map, see the documentation on the Mozilla Developer Network

© 2015 SAP AG. All rights reserved. 7

Understanding the filter function

Let’s now use the filter function to remove all the odd numbers from the array.
This can be done very simply by creating a function called isEven that returns true or false depending on
whether the number it is passed is even or odd.

// Create an array of integers from 1 to 10

var nums = new Array(1,2,3,4,5,6,7,8,9,10);

function isEven(n) { return n % 2 === 0; }

nums.filter(isEven);

//  new array containing [2,4,6,8,10]

The filter function behaves in a similar way to the map function in that it also receives a function as a parameter,
and every array element is then passed to that function.
Like map, filter also returns a new array; however, this new array will be missing those elements for which the
parameter function returns false.
For more details on using filter, see the documentation on the Mozilla Developer Network

© 2015 SAP AG. All rights reserved. 8

Understanding the reduce function: 1/3

The reduce function is different from either the map or filter functions in that does not necessarily give you back
an array. Instead, it gives back a value or object of any type you like.
reduce performs some calculation on each element of the array and builds up some sort of composite result.

// Create an array of integers from 1 to 10

var nums = new Array(1,2,3,4,5,6,7,8,9,10);
var acc = 0;

for (var i=0; i<nums.length; i++) {

acc = acc + nums[i];
}

//  acc = 55

In other words, the purpose of the reduce function is to reduce an array down to a single value or object (often
referred to an accumulator).
In this case, we’ll add up all the numbers in the array. Here we start with the imperative equivalent of the reduce
function - a simple for loop that keeps a running total in an accumulator variable called acc.

© 2015 SAP AG. All rights reserved. 9

Understanding the reduce function: 2/3

As with the map function, we notice that the functionality used within the for loop is free from side-effects, so it can
be moved into a separate function that we shall call add. This function is then called from within the for loop, but
this time it modifies the accumulator variable and not the current array element.

// Create an array of integers from 1 to 10

var nums = new Array(1,2,3,4,5,6,7,8,9,10);
var acc = 0;

function add(acc, n) { return acc + n; }

for (var i=0; i<nums.length; i++) {

acc = add(acc,nums[i]);
}

//  acc = 55

© 2015 SAP AG. All rights reserved. 10

Understanding the reduce function: 3/3

Now we can replace the for loop with a call to the array’s reduce function.
Notice that reduce must be passed two parameters; the first is the function that will be applied to both the
accumulator and each element of the array, and the second is the starting value of the accumulator.

// Create an array of integers from 1 to 10

var nums = new Array(1,2,3,4,5,6,7,8,9,10);

function add(acc, n) { return acc + n; }

nums.reduce(add,0);

//  55

The function passed to reduce must take up to four parameters; but here we are only concerned with the first two.
The first parameter is the current value of the accumulator and the second is the current array element. This
function must then return the new value of the accumulator.
For more details on using reduce, see the documentation on the Mozilla Developer Network

© 2015 SAP AG. All rights reserved. 11

© 2015 SAP AG. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express
permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of
other software vendors.
Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of
Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System
z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7,
POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize,
XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli,
Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation.
Linux is the registered trademark of Linus Torvalds in the United States and other countries.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe
Systems Incorporated in the United States and other countries.
Oracle and Java are registered trademarks of Oracle and its affiliates.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or
registered trademarks of Citrix Systems Inc.
HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W3C®, World Wide Web
Consortium, Massachusetts Institute of Technology.
Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri,
and Xcode are trademarks or registered trademarks of Apple Inc.
IOS is a registered trademark of Cisco Systems Inc.
RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry
Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered
trademarks of Research in Motion Limited.
© 2015 SAP AG. All rights reserved.
Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads,
Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice,
Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc.
INTERMEC is a registered trademark of Intermec Technologies Corporation.
Wi-Fi is a registered trademark of Wi-Fi Alliance.
Bluetooth is a registered trademark of Bluetooth SIG Inc.
Motorola is a registered trademark of Motorola Trademark Holdings LLC.
Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork,
SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP AG in Germany and other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web
Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects
is an SAP company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and
services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase
Inc. Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered trademarks of Crossgate AG
in Germany and other countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of their respective companies. Data
contained in this document serves informational purposes only. National product specifications may vary.
The information in this document is proprietary to SAP. No part of this document may be reproduced, copied,
or transmitted in any form or for any purpose without the express prior written permission of SAP AG.
12