• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • AI/ML
    • Backend
    • Frontend
    • Dev Life
    • DevOps
    • Soft Skills
  • Talent
  • Partners
  • For Companies
Home » Frontend » Web Developer » The what, why and how of Javascript functional programming
Web Developer

The what, why and how of Javascript functional programming

Codemotion and Facebook organized the Tech Leadership Training boot camp, heres a personal reportage from one of our attendees.

Last update April 16, 2019 by Toby Moncaster

As programming geeks know, “classical” programming languages, like C/C++ and Java, are Imperative. This means you tell the computer how to do something and it does it. By contrast, functional languages are Declarative – you tell the computer the outcome you want. In his talk “JavaScript functional programming: our misunderstood friend” at Codemotion Berlin 2018, Matteo Hertel of Skyscanner told us how he learned to embrace functional programming (FP), and gave some nice examples of how to write functional JavaScript code.

Matteo started off by explaining the difference between imperative and declarative code. His slides have a pretty gradient as a background. Using CSS (which is declarative), you just tell the render engine to set a gradient. Using imperative code, you would have to use for-loops to iterate through every pixel, setting the right colour each time.

He went on to explain the key concepts underpinning FP:

  • Mappers convert an input into an output e.g. the map() method
  • Predicates apply a test and return true or false e.g. the filter() method
  • Reducers combine 2 values together e.g. the reduce() method

He then showed how these concepts can be used in JavaScript programming.

A simple example

I will use one of his examples to illustrate how you can convert imperative code into declarative code. Imagine you have a list of cities that you want to convert to upper-case. The following snippet of imperative code does this using a for-loop:

So, how can you do this in a functional style? The answer is to use map(), which will take each element in the original string and use toUpperCase() to make it upper-case:

But can you do better? Well, yes. Ideally, for testability, you want to move the upper-case functionality to a separate method which Matteo called shout():

Combining functions

The cool thing about FP is that you can start to chain functions together. The following snippet chains together a filter(), a map() and a reduce(), along with a function that removes Edinburgh from the list:

But Matteo highlighted that this snippet uses lots of points – each function in the chain is calling the city parameter. This is seen as bad coding style, so he finished with a cleaner point-free version of the code, which can be read like a story:

Using FP for real

When asked about combining functional and imperative programming, Matteo explained that JS makes it really easy to start using functional programming, since you can refactor your code a bit at a time. This is because JavaScript was designed to allow functional and imperative programming to be combined. Unlike pure functional languages (e.g. Haskell), JS allows for side effects (where something outside the scope of the function is modified).

Matteo left us all feeling excited about functional programming, and suggested we check out Kyle Simpson’s FP course on Frontend Masters. I, for one, will definitely give it a go!

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Codemotion Berlin

How using cryptography helps to reduce the attack surface on data
Previous Post
The Lightning Network: from seven to 7,000 transactions per second
Next Post

Related articles

  • Video: Combining Jamstack, Vue.js, and a Headless CMS
  • Jamstack: Are Static Sites a New Revolution for the Web?
  • Video: A JavaScript Developers Guide to WebAssembly (with AssemblyScript)
  • How-To Guide: Improving Web Accessibility
  • Advanced CSS Tricks That You Have To Know
  • PHP for Web Development in 2022: Dead, Alive, or Missing in Action?
  • GRPC Approach for Improved Software Development
  • Pro Tips For Web Designers Who Want to Create Better Web Experiences
  • Devtools: Boosting Your Web Development Workflow on Chrome and Firefox
  • Best 10 Tools to Leverage for Progressive Web App Development

Primary Sidebar

Lessons Learned in the Cloud

Dive deep into this whitepaper dedicated to the Cloud and discover more about Kubernetes.

OVH Logo Lessons learned in the cloud

Codemotion Milan 2022

https://youtu.be/ym8iilUy_U0

Latest Articles

JAMSTACK

Video: Combining Jamstack, Vue.js, and a Headless CMS

Web Developer

integrate VueJS

How-to Guide: Adding VueJS to Your Existing Project

JavaScript

developer listening to devops podcast, learn devops

11 DevOps Podcasts You Should Be Listening To

DevOps

Video: How to Use Python for Async Microservices

Microservices

Discover More

  • Top Trending Python Frameworks Today
  • Video: Beyond Serverless Functions
  • Take Data to the Next Level With Graph Machine Learning

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Write for Us
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN