Posted on Oct 23 Dipping your toes into the world of Functional Programming can sometimes feel overwhelming. The transition from understanding its core concepts to actually applying them in real-world scenarios can be challenging. If you're familiar with some functional programming techniques but unsure when and how to use them, you're in the right place. In this article, we'll discuss some key concepts and their practical uses, and also explore how declarative programming is connected to functional programming.Imagine writing JavaScript code without using variables, loops, or logical constructs. This might sound bold, right? But how often do you find yourself writing code like this to toggle the visibility of a component in JSX?We can rewrite it in a more declarative way:As noted, this version is more declarative. Although we still use the conditional statement if internally, the goal is to abstract it from the main code.The visible property prompts us to write code in a declarative manner, even though the component itself is partially implemented in an imperative style.Let's take a look at the logical operator switch, which isn't just closely related to if, but is also a favorite among many developers:Perhaps you’ve already guessed where I'm heading with this, especially since a similar approach is implemented in React Router.Let’s consider this code from the perspective of functional programming, where HTML/JSX tags are treated as functions that produce HTML output and tag attributes act as Function input parameters.Drawing from the concept above, let's express the JSX code through function sets. It's pertinent to note that switch/case are reserved JavaScript keywords, so we'll add underscores:As you can see, declarative code doesn't always mean HTML or JSX. In JavaScript, we can use functions to represent the syntax of these languages. According to JS conventions, functions should represent actions and usually start with a verb, such as find or setTitle. However, in this case, functions can also represent an entity. For example, an SQL query can be written like this:This way, I want to draw a connection between declarative and functional programming. I believe that functional programming does not intentionally pursue declarativeness; rather, it is a result of extensively using functions. It's worth mentioning that functional programming is not solely about the DRY principle, which involves extracting repetitive code into separate functions. At its core, functional programming focuses on crafting universal functions that are both highly composable and versatile in application.Now we can take another look at the switch/case and represent them as a plain function:The current implementation falls short in terms of flexibility and composability with other functions. To enhance its utility, we could transform the selectComponent function into a higher-order function and break it down into more granular functions.If you're only somewhat familiar with the concept of curried functions, this serves as a solid illustration of their practical use. While a curried function resembles a standard function, its execution can be postponed until all its parameters have been supplied. This capability not only facilitates function composition, but also renders the code more declarative and understandable.We have the capability to craft various iterations of the when function, all the while ensuring that the primary select function remains intact and requires no alterations. Below is an example that demonstrates how to support lazy loading of components:If we take a much closer look at the initial version of the selectComponent function, it becomes clear that it is not possible to extend its functionality without making changes. With this approach, we can break down the code into smaller functions, each with a specific task in mind. This improves the test coverage experience and minimizes the future changes impacting multiple sections of the code. If we ever need to expand the functionality, we can simply add a new function and integrate it with the existing functions rather than rewriting the main function each time.In the next post, we’ll take a detailed look at this technique using the example of creating Redux reducers. We will learn how to replace the try/catch approach and continue the discussion on functional programming.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Freecodez - Oct 11 ksawery297 - Sep 30 Conner Ow - Oct 10 Husnain Mustafa - Sep 21 Once suspended, sultan99 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, sultan99 will be able to comment and publish posts again. Once unpublished, all posts by sultan99 will become hidden and only accessible to themselves. If sultan99 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Sultan. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag sultan99: sultan99 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging sultan99 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.