{"id":3499,"date":"2022-05-25T07:46:55","date_gmt":"2022-05-25T07:46:55","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/functional-programming-in-javascript-part-1-introduction\/"},"modified":"2026-03-11T06:02:29","modified_gmt":"2026-03-11T06:02:29","slug":"puissance-de-la-programmation-fonctionnelle-en-javascript-partie-1-introduction","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fr\/blog\/power-of-functional-programming-in-javascript-part-1-introduction\/","title":{"rendered":"Programmation fonctionnelle en JavaScript Partie 1 - Introduction"},"content":{"rendered":"\n

What is functional programming?<\/h2>\n\n\n\n

\u201cIn simple terms, functional programming is a software development<\/a> style that places a major emphasis on the use of functions\u201d<\/em><\/p>\n\n\n\n

Excerpts from the book: Luis Atencio “Functional Programming in JavaScript<\/a><\/strong>. How to improve your JavaScript<\/strong> programs using functional techniques”<\/p>\n\n\n\n

Functional programming<\/strong> is classified as a declarative<\/strong> paradigm where the program description is separated from the calculations. The emphasis here is on the use of expressions to describe program logic. This is the opposite of imperative<\/strong> programming, where the code<\/a> is executed step by step and tells the computer in detail how to get the job done.<\/p>\n\n\n\n

Declarative vs imperative, examples<\/h2>\n\n\n\n

Consider a case where we have an array of integers and we need to raise each of them to the second power and then only select those values that are not even.<\/p>\n\n\n\n

Imperative<\/h3>\n\n\n\n
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];\n\nconst results = []\n\nfor(let i = 0; i < numbers.length; i++) {\nconst secondPower = Math.pow(numbers[i], 2)\nif(secondPower & 1) { \/\/ or % 2 but operations on bits are faster\nresults.push(secondPower);\n}\n}\n\nconsole.log(results) \/\/ [1, 9, 25, 49, 81]<\/code><\/pre>\n\n\n\n
As for the imperative<\/strong> solution, the focus on implementation details is clearly visible. In the loop, you can see the array index based on the need to control the number of elements. Due to the large number of details in the code, it is harder to focus on what it is doing. Let us<\/a> now focus on the declarative<\/strong> solution.<\/p>\n\n\n\n
Declarative<\/h3>\n\n\n\n
const risesToSecondPower = (num) => Math.pow(num, 2)\nconst isOdd = (num) => num & 1;\n\nconst numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]\n\nconst results = numbers\n.map(risesToSecondPower)\n.filter(isOdd);\n\nconsole.log(results) \/\/ [1, 9, 25, 49, 81]<\/code><\/pre>\n\n\n\n
In this solution, the implementing has been separated from the invocation by taking the logic to separate functions. Thanks to this solution, we can only focus on the names of functions that describe what is happening in them. Additionally, the level of abstraction has been raised and the logic now can be reusable. Now, let’s focus on the call. You can’t see any details in it, just a description that tells you what this code does, step by step:<\/p>\n\n\n\n
    \n
  1. map(risesToSecondPower)<\/code> – take each element of an array and raise it to the second power,<\/li>\n\n\n\n
  2. filter(isOdd)<\/code> – filter and select odd elements.<\/li>\n<\/ol>\n\n\n\n
    Benefits<\/h2>\n\n\n\n
    Functional programming<\/strong> has many benefits. When it comes to JavaScript<\/strong>, the use of functions is natural because it is a functional language. Even the classes in this language are “syntactic sugar” and they are underneath composed of functions.<\/p>\n\n\n\n
    When it comes to readability, in the imperative approach, the code usually becomes a list with names of functions that can be read sequentially without delving into their logic. As a result, we do not focus on the implementation details.<\/p>\n\n\n\n
    Another advantage is sticking to the convention of immutable objects. Thanks to this approach, the code becomes safer because the references in JavaScript<\/strong> are very strong and it is easy to modify the unwanted object.<\/p>\n\n\n\n
    In functional programming, the code is broken down into small functions that can easily be thought of as reusable abstract code.<\/p>\n\n\n\n
    Pure function<\/h2>\n\n\n\n
    One of the important considerations in functional programming is pure functions. To create such a function, you need to remember a few rules:<\/p>\n\n\n\n